From c6ab79cea86d1a19f3f112dcac6fdd1f35f2a270 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Wed, 4 May 2022 17:57:44 +0530 Subject: [PATCH] [FormLabel] Add support for CSS variables (#32602) --- .../experiments/material-ui/form-label.tsx | 109 ++++++++++++++++++ .../mui-material/src/FormLabel/FormLabel.js | 10 +- 2 files changed, 114 insertions(+), 5 deletions(-) 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 ( + + ); +}; + +export default function CssVarsTemplate() { + const [state, setState] = React.useState({ + gilad: true, + jason: false, + antoine: false, + }); + + const handleChange = (event: React.ChangeEvent) => { + setState({ + ...state, + [event.target.name]: event.target.checked, + }); + }; + + const { gilad, jason, antoine } = state; + const error = [gilad, jason, antoine].filter((v) => v).length !== 2; + return ( + + + + + + + + + Assign responsibility + + } + label="Gilad Gray" + /> + } + label="Jason Killian" + /> + } + label="Antoine Llorca" + /> + + Be careful + + + Pick two + + } + label="Gilad Gray" + /> + } + label="Jason Killian" + /> + } + label="Antoine Llorca" + /> + + You can display an error + + + + + ); +} 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, }, }));