From 1875689bd415efa343bb8d70cdc0f55ddfc3e687 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli <zeeshan.tamboli@gmail.com> Date: Wed, 4 May 2022 15:39:23 +0530 Subject: [PATCH 1/2] feat(FormLabel): Add support for CSS variables --- packages/mui-material/src/FormLabel/FormLabel.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js index 67944e5f3d18c5..6369be7a052abb 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.js +++ b/packages/mui-material/src/FormLabel/FormLabel.js @@ -38,19 +38,19 @@ export const FormLabelRoot = styled('label', { }; }, })(({ theme, ownerState }) => ({ - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, ...theme.typography.body1, lineHeight: '1.4375em', padding: 0, position: 'relative', [`&.${formLabelClasses.focused}`]: { - color: theme.palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].main, }, [`&.${formLabelClasses.disabled}`]: { - color: theme.palette.text.disabled, + color: (theme.vars || theme).palette.text.disabled, }, [`&.${formLabelClasses.error}`]: { - color: theme.palette.error.main, + color: (theme.vars || theme).palette.error.main, }, })); @@ -60,7 +60,7 @@ const AsteriskComponent = styled('span', { overridesResolver: (props, styles) => styles.asterisk, })(({ theme }) => ({ [`&.${formLabelClasses.error}`]: { - color: theme.palette.error.main, + color: (theme.vars || theme).palette.error.main, }, })); From 82c2c8bbf784bd6192fbe6f2704ef8a8abac7546 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli <zeeshan.tamboli@gmail.com> Date: Wed, 4 May 2022 15:39:50 +0530 Subject: [PATCH 2/2] docs: add CSS vars experimental docs for FormLabel --- .../experiments/material-ui/form-label.tsx | 109 ++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 docs/pages/experiments/material-ui/form-label.tsx diff --git a/docs/pages/experiments/material-ui/form-label.tsx b/docs/pages/experiments/material-ui/form-label.tsx new file mode 100644 index 00000000000000..b3566a1c9b5eee --- /dev/null +++ b/docs/pages/experiments/material-ui/form-label.tsx @@ -0,0 +1,109 @@ +import * as React from 'react'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + useColorScheme, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Container from '@mui/material/Container'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; +import FormGroup from '@mui/material/FormGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormHelperText from '@mui/material/FormHelperText'; +import Checkbox from '@mui/material/Checkbox'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + <Button + variant="outlined" + onClick={() => { + if (mode === 'light') { + setMode('dark'); + } else { + setMode('light'); + } + }} + > + {mode === 'light' ? <Moon /> : <Sun />} + </Button> + ); +}; + +export default function CssVarsTemplate() { + const [state, setState] = React.useState({ + gilad: true, + jason: false, + antoine: false, + }); + + const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { + setState({ + ...state, + [event.target.name]: event.target.checked, + }); + }; + + const { gilad, jason, antoine } = state; + const error = [gilad, jason, antoine].filter((v) => v).length !== 2; + return ( + <CssVarsProvider> + <CssBaseline /> + <Container sx={{ my: 5 }}> + <Box sx={{ pb: 2 }}> + <ColorSchemePicker /> + </Box> + <Box sx={{ display: 'flex' }}> + <FormControl sx={{ m: 3 }} component="fieldset" variant="standard"> + <FormLabel component="legend">Assign responsibility</FormLabel> + <FormGroup> + <FormControlLabel + control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />} + label="Gilad Gray" + /> + <FormControlLabel + control={<Checkbox checked={jason} onChange={handleChange} name="jason" />} + label="Jason Killian" + /> + <FormControlLabel + control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />} + label="Antoine Llorca" + /> + </FormGroup> + <FormHelperText>Be careful</FormHelperText> + </FormControl> + <FormControl required error={error} component="fieldset" sx={{ m: 3 }} variant="standard"> + <FormLabel component="legend">Pick two</FormLabel> + <FormGroup> + <FormControlLabel + control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />} + label="Gilad Gray" + /> + <FormControlLabel + control={<Checkbox checked={jason} onChange={handleChange} name="jason" />} + label="Jason Killian" + /> + <FormControlLabel + control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />} + label="Antoine Llorca" + /> + </FormGroup> + <FormHelperText>You can display an error</FormHelperText> + </FormControl> + </Box> + </Container> + </CssVarsProvider> + ); +}