diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index 9e2c398e80d7e6..a54396d2fb3c81 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -51,7 +51,7 @@ However, you can use different structures by providing a `getOptionLabel` prop. ### Playground -Each of the following examples demonstrate one feature of the Autocomplete component. +Each of the following examples demonstrates one feature of the Autocomplete component. {{"demo": "pages/components/autocomplete/Playground.js"}} @@ -61,14 +61,14 @@ Choose one of the 248 countries. {{"demo": "pages/components/autocomplete/CountrySelect.js"}} -### Controllable states +### Controlled states The component has two states that can be controlled: 1. the "value" state with the `value`/`onChange` props combination. This state represents the value selected by the user, for instance when pressing Enter. 2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox. -> ⚠️ These two state are isolated, they should be controlled independently. +> ⚠️ These two states are isolated, they should be controlled independently. {{"demo": "pages/components/autocomplete/ControllableStates.js"}} diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js index e1cfb0f6791e19..9a96fbbf0bf536 100644 --- a/docs/src/pages/components/checkboxes/CheckboxLabels.js +++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js @@ -6,15 +6,8 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function CheckboxLabels() { return ( - } - label="Secondary" - /> - } - label="Disabled" - /> + } label="Label" /> + } label="Disabled" /> ); } diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx index e1cfb0f6791e19..9a96fbbf0bf536 100644 --- a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx +++ b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx @@ -6,15 +6,8 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function CheckboxLabels() { return ( - } - label="Secondary" - /> - } - label="Disabled" - /> + } label="Label" /> + } label="Disabled" /> ); } diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js index c5978c4b5eee2d..2f2fe80fb3f88b 100644 --- a/docs/src/pages/components/checkboxes/Checkboxes.js +++ b/docs/src/pages/components/checkboxes/Checkboxes.js @@ -4,14 +4,10 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function Checkboxes() { return (
- - - - + + + +
); } diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx index c5978c4b5eee2d..2f2fe80fb3f88b 100644 --- a/docs/src/pages/components/checkboxes/Checkboxes.tsx +++ b/docs/src/pages/components/checkboxes/Checkboxes.tsx @@ -4,14 +4,10 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function Checkboxes() { return (
- - - - + + + +
); } diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.js b/docs/src/pages/components/checkboxes/ColorCheckboxes.js index 988b058d25ac0e..3a34995f9e9ccb 100644 --- a/docs/src/pages/components/checkboxes/ColorCheckboxes.js +++ b/docs/src/pages/components/checkboxes/ColorCheckboxes.js @@ -5,12 +5,20 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function ColorCheckboxes() { return (
- - - + + + - - - + + + ); } diff --git a/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx b/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx index be0474ca3a8a41..c94ef4108b2605 100644 --- a/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx +++ b/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx @@ -12,7 +12,7 @@ export default function ControlledCheckbox() { ); } diff --git a/docs/src/pages/components/checkboxes/FormControlLabelPosition.js b/docs/src/pages/components/checkboxes/FormControlLabelPosition.js index a36704237c1448..976f99415cdd60 100644 --- a/docs/src/pages/components/checkboxes/FormControlLabelPosition.js +++ b/docs/src/pages/components/checkboxes/FormControlLabelPosition.js @@ -8,7 +8,7 @@ import FormLabel from '@material-ui/core/FormLabel'; export default function FormControlLabelPosition() { return ( - Label Placement + Label placement - Label Placement + Label placement } checkedIcon={} - name="checkedA" - inputProps={{ 'aria-label': 'favorite checkbox' }} + inputProps={{ 'aria-label': 'favorite' }} /> } checkedIcon={} - name="checkedB" - inputProps={{ 'aria-label': 'bookmarked checkbox' }} + inputProps={{ 'aria-label': 'bookmarked' }} />
); diff --git a/docs/src/pages/components/checkboxes/IconCheckboxes.tsx b/docs/src/pages/components/checkboxes/IconCheckboxes.tsx index 4a0c144bce9564..58caf43d2e0840 100644 --- a/docs/src/pages/components/checkboxes/IconCheckboxes.tsx +++ b/docs/src/pages/components/checkboxes/IconCheckboxes.tsx @@ -11,14 +11,12 @@ export default function IconCheckboxes() { } checkedIcon={} - name="checkedA" - inputProps={{ 'aria-label': 'favorite checkbox' }} + inputProps={{ 'aria-label': 'favorite' }} /> } checkedIcon={} - name="checkedB" - inputProps={{ 'aria-label': 'bookmarked checkbox' }} + inputProps={{ 'aria-label': 'bookmarked' }} /> ); diff --git a/docs/src/pages/components/checkboxes/SizeCheckboxes.js b/docs/src/pages/components/checkboxes/SizeCheckboxes.js index 98389907764242..f0c81316f165a2 100644 --- a/docs/src/pages/components/checkboxes/SizeCheckboxes.js +++ b/docs/src/pages/components/checkboxes/SizeCheckboxes.js @@ -4,15 +4,11 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function SizeCheckboxes() { return (
+ + - -
diff --git a/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx b/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx index 98389907764242..f0c81316f165a2 100644 --- a/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx +++ b/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx @@ -4,15 +4,11 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function SizeCheckboxes() { return (
+ + - -
diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md index 9358b4c824c74b..f604471a4cde51 100644 --- a/docs/src/pages/components/checkboxes/checkboxes.md +++ b/docs/src/pages/components/checkboxes/checkboxes.md @@ -76,7 +76,7 @@ You can change the placement of the label: Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/how-to-customize/). -{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js", "defaultCodeOpen": false}} +{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js"}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/checkbox). diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md index 4177486e7352ed..f83b8728bef7b5 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons.md @@ -29,7 +29,7 @@ To lay out the buttons horizontally, set the `row` prop: {{"demo": "pages/components/radio-buttons/RowRadioButtonsGroup.js"}} -### Controllable +### Controlled You can control the radio with the `value` and `onChange` props: diff --git a/docs/src/pages/components/switches/BasicSwitches.js b/docs/src/pages/components/switches/BasicSwitches.js new file mode 100644 index 00000000000000..2c7a9b0688d239 --- /dev/null +++ b/docs/src/pages/components/switches/BasicSwitches.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import Switch from '@material-ui/core/Switch'; + +export default function BasicSwitches() { + return ( +
+ + + + +
+ ); +} diff --git a/docs/src/pages/components/switches/BasicSwitches.tsx b/docs/src/pages/components/switches/BasicSwitches.tsx new file mode 100644 index 00000000000000..2c7a9b0688d239 --- /dev/null +++ b/docs/src/pages/components/switches/BasicSwitches.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import Switch from '@material-ui/core/Switch'; + +export default function BasicSwitches() { + return ( +
+ + + + +
+ ); +} diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js new file mode 100644 index 00000000000000..19295df2af5f09 --- /dev/null +++ b/docs/src/pages/components/switches/ColorSwitches.js @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { alpha, experimentalStyled as styled } from '@material-ui/core/styles'; +import { green } from '@material-ui/core/colors'; +import Switch from '@material-ui/core/Switch'; + +const GreenSwitch = styled(Switch)(({ theme }) => ({ + '& .MuiSwitch-input.Mui-checked': { + color: green[600], + '&:hover': { + backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity), + }, + }, + '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': { + backgroundColor: green[600], + }, +})); + +export default function ColorSwitches() { + return ( +
+ + + + +
+ ); +} diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx new file mode 100644 index 00000000000000..19295df2af5f09 --- /dev/null +++ b/docs/src/pages/components/switches/ColorSwitches.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { alpha, experimentalStyled as styled } from '@material-ui/core/styles'; +import { green } from '@material-ui/core/colors'; +import Switch from '@material-ui/core/Switch'; + +const GreenSwitch = styled(Switch)(({ theme }) => ({ + '& .MuiSwitch-input.Mui-checked': { + color: green[600], + '&:hover': { + backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity), + }, + }, + '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': { + backgroundColor: green[600], + }, +})); + +export default function ColorSwitches() { + return ( +
+ + + + +
+ ); +} diff --git a/docs/src/pages/components/switches/ControlledSwitches.js b/docs/src/pages/components/switches/ControlledSwitches.js new file mode 100644 index 00000000000000..be23ced32ab1de --- /dev/null +++ b/docs/src/pages/components/switches/ControlledSwitches.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Switch from '@material-ui/core/Switch'; + +export default function ControlledSwitches() { + const [checked, setChecked] = React.useState(true); + + const handleChange = (event) => { + setChecked(event.target.checked); + }; + + return ( + + ); +} diff --git a/docs/src/pages/components/switches/ControlledSwitches.tsx b/docs/src/pages/components/switches/ControlledSwitches.tsx new file mode 100644 index 00000000000000..b18dfb5cc9a3f3 --- /dev/null +++ b/docs/src/pages/components/switches/ControlledSwitches.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Switch from '@material-ui/core/Switch'; + +export default function ControlledSwitches() { + const [checked, setChecked] = React.useState(true); + + const handleChange = (event: React.ChangeEvent) => { + setChecked(event.target.checked); + }; + + return ( + + ); +} diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js index b6d3094b1d9f9f..5553cd31563323 100644 --- a/docs/src/pages/components/switches/CustomizedSwitches.js +++ b/docs/src/pages/components/switches/CustomizedSwitches.js @@ -1,165 +1,87 @@ import * as React from 'react'; -import { alpha, withStyles } from '@material-ui/core/styles'; -import { purple } from '@material-ui/core/colors'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; -import Grid from '@material-ui/core/Grid'; +import Stack from '@material-ui/core/Stack'; import Typography from '@material-ui/core/Typography'; -const PurpleSwitch = withStyles((theme) => ({ - switchBase: { - color: purple[300], - '&$checked': { - color: purple[500], - '&:hover': { - backgroundColor: alpha(purple[500], theme.palette.action.hoverOpacity), - }, - }, - '&$checked + $track': { - backgroundColor: purple[500], - }, - }, - checked: {}, - track: {}, -}))(Switch); - -const IOSSwitch = withStyles((theme) => ({ - root: { - width: 42, - height: 26, - padding: 0, - margin: theme.spacing(1), - }, - switchBase: { +const IOSSwitch = styled((props) => ( + +))(({ theme }) => ({ + width: 42, + height: 26, + padding: 0, + margin: theme.spacing(1), + '& .MuiSwitch-switchBase': { padding: 1, - '&$checked': { + '&.Mui-checked': { transform: 'translateX(16px)', color: theme.palette.common.white, - '& + $track': { + '& + .MuiSwitch-track': { backgroundColor: '#52d869', opacity: 1, border: 'none', }, }, - '&$focusVisible $thumb': { + '&.Mui-focusVisible .MuiSwitch-thumb': { color: '#52d869', border: '6px solid #fff', }, }, - thumb: { + '& .MuiSwitch-thumb': { width: 24, height: 24, }, - track: { + '& .MuiSwitch-track': { borderRadius: 26 / 2, border: `1px solid ${theme.palette.grey[400]}`, backgroundColor: theme.palette.grey[50], opacity: 1, transition: theme.transitions.create(['background-color', 'border-color']), }, - checked: {}, - focusVisible: {}, -}))(({ classes, ...props }) => { - return ( - - ); -}); +})); -const AntSwitch = withStyles((theme) => ({ - root: { - width: 28, - height: 16, - padding: 0, - display: 'flex', - }, - switchBase: { +const AntSwitch = styled(Switch)(({ theme }) => ({ + width: 28, + height: 16, + padding: 0, + display: 'flex', + '& .MuiSwitch-switchBase': { padding: 2, color: theme.palette.grey[500], - '&$checked': { + '&.Mui-checked': { transform: 'translateX(12px)', color: theme.palette.common.white, - '& + $track': { + '& + .MuiSwitch-track': { opacity: 1, backgroundColor: theme.palette.primary.main, borderColor: theme.palette.primary.main, }, }, }, - thumb: { + '& .MuiSwitch-thumb': { width: 12, height: 12, boxShadow: 'none', }, - track: { + '& .MuiSwitch-track': { border: `1px solid ${theme.palette.grey[500]}`, borderRadius: 16 / 2, opacity: 1, backgroundColor: theme.palette.common.white, }, - checked: {}, -}))(Switch); +})); export default function CustomizedSwitches() { - const [state, setState] = React.useState({ - checkedA: true, - checkedB: true, - checkedC: true, - }); - - const handleChange = (event) => { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - return ( - - } - label="Custom color" - /> - - } - label="iOS style" - /> - - - Off - - - - On - - + } label="iOS style" /> + + Off + + On + ); } diff --git a/docs/src/pages/components/switches/CustomizedSwitches.tsx b/docs/src/pages/components/switches/CustomizedSwitches.tsx index e6c1e8b8e50a9a..7d8baa9bc4fdb9 100644 --- a/docs/src/pages/components/switches/CustomizedSwitches.tsx +++ b/docs/src/pages/components/switches/CustomizedSwitches.tsx @@ -1,179 +1,87 @@ import * as React from 'react'; -import { alpha, withStyles, Theme, createStyles } from '@material-ui/core/styles'; -import { purple } from '@material-ui/core/colors'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Switch, { SwitchClassKey, SwitchProps } from '@material-ui/core/Switch'; -import Grid from '@material-ui/core/Grid'; +import Switch, { SwitchProps } from '@material-ui/core/Switch'; +import Stack from '@material-ui/core/Stack'; import Typography from '@material-ui/core/Typography'; -interface Styles extends Partial> { - focusVisible?: string; -} - -interface Props extends SwitchProps { - classes: Styles; -} - -const PurpleSwitch = withStyles((theme: Theme) => - createStyles({ - switchBase: { - color: purple[300], - '&$checked': { - color: purple[500], - '&:hover': { - backgroundColor: alpha(purple[500], theme.palette.action.hoverOpacity), - }, - }, - '&$checked + $track': { - backgroundColor: purple[500], - }, - }, - checked: {}, - track: {}, - }), -)(Switch); - -const IOSSwitch = withStyles((theme: Theme) => - createStyles({ - root: { - width: 42, - height: 26, - padding: 0, - margin: theme.spacing(1), - }, - switchBase: { - padding: 1, - '&$checked': { - transform: 'translateX(16px)', - color: theme.palette.common.white, - '& + $track': { - backgroundColor: '#52d869', - opacity: 1, - border: 'none', - }, +const IOSSwitch = styled((props: SwitchProps) => ( + +))(({ theme }) => ({ + width: 42, + height: 26, + padding: 0, + margin: theme.spacing(1), + '& .MuiSwitch-switchBase': { + padding: 1, + '&.Mui-checked': { + transform: 'translateX(16px)', + color: theme.palette.common.white, + '& + .MuiSwitch-track': { + backgroundColor: '#52d869', + opacity: 1, + border: 'none', }, - '&$focusVisible $thumb': { - color: '#52d869', - border: '6px solid #fff', - }, - }, - thumb: { - width: 24, - height: 24, }, - track: { - borderRadius: 26 / 2, - border: `1px solid ${theme.palette.grey[400]}`, - backgroundColor: theme.palette.grey[50], - opacity: 1, - transition: theme.transitions.create(['background-color', 'border-color']), + '&.Mui-focusVisible .MuiSwitch-thumb': { + color: '#52d869', + border: '6px solid #fff', }, - checked: {}, - focusVisible: {}, - }), -)(({ classes, ...props }: Props) => { - return ( - - ); -}); + }, + '& .MuiSwitch-thumb': { + width: 24, + height: 24, + }, + '& .MuiSwitch-track': { + borderRadius: 26 / 2, + border: `1px solid ${theme.palette.grey[400]}`, + backgroundColor: theme.palette.grey[50], + opacity: 1, + transition: theme.transitions.create(['background-color', 'border-color']), + }, +})); -const AntSwitch = withStyles((theme: Theme) => - createStyles({ - root: { - width: 28, - height: 16, - padding: 0, - display: 'flex', - }, - switchBase: { - padding: 2, - color: theme.palette.grey[500], - '&$checked': { - transform: 'translateX(12px)', - color: theme.palette.common.white, - '& + $track': { - opacity: 1, - backgroundColor: theme.palette.primary.main, - borderColor: theme.palette.primary.main, - }, +const AntSwitch = styled(Switch)(({ theme }) => ({ + width: 28, + height: 16, + padding: 0, + display: 'flex', + '& .MuiSwitch-switchBase': { + padding: 2, + color: theme.palette.grey[500], + '&.Mui-checked': { + transform: 'translateX(12px)', + color: theme.palette.common.white, + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: theme.palette.primary.main, + borderColor: theme.palette.primary.main, }, }, - thumb: { - width: 12, - height: 12, - boxShadow: 'none', - }, - track: { - border: `1px solid ${theme.palette.grey[500]}`, - borderRadius: 16 / 2, - opacity: 1, - backgroundColor: theme.palette.common.white, - }, - checked: {}, - }), -)(Switch); + }, + '& .MuiSwitch-thumb': { + width: 12, + height: 12, + boxShadow: 'none', + }, + '& .MuiSwitch-track': { + border: `1px solid ${theme.palette.grey[500]}`, + borderRadius: 16 / 2, + opacity: 1, + backgroundColor: theme.palette.common.white, + }, +})); export default function CustomizedSwitches() { - const [state, setState] = React.useState({ - checkedA: true, - checkedB: true, - checkedC: true, - }); - - const handleChange = (event: React.ChangeEvent) => { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - return ( - - } - label="Custom color" - /> - - } - label="iOS style" - /> - - - Off - - - - On - - + } label="iOS style" /> + + Off + + On + ); } diff --git a/docs/src/pages/components/switches/FormControlLabelPosition.js b/docs/src/pages/components/switches/FormControlLabelPosition.js index 3a26c2b7132693..64f0e36d6d942e 100644 --- a/docs/src/pages/components/switches/FormControlLabelPosition.js +++ b/docs/src/pages/components/switches/FormControlLabelPosition.js @@ -3,10 +3,12 @@ import Switch from '@material-ui/core/Switch'; import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControl from '@material-ui/core/FormControl'; +import FormLabel from '@material-ui/core/FormLabel'; export default function FormControlLabelPosition() { return ( + Label placement + Label placement { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - return ( - - - } - label="Secondary" - /> - - } - label="Primary" - /> - } label="Uncontrolled" /> + + } label="Label" /> } label="Disabled" /> - } label="Disabled" /> ); } diff --git a/docs/src/pages/components/switches/SwitchLabels.tsx b/docs/src/pages/components/switches/SwitchLabels.tsx index 9a69409036baec..6d5318ca0f22ba 100644 --- a/docs/src/pages/components/switches/SwitchLabels.tsx +++ b/docs/src/pages/components/switches/SwitchLabels.tsx @@ -4,40 +4,10 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; export default function SwitchLabels() { - const [state, setState] = React.useState({ - checkedA: true, - checkedB: true, - }); - - const handleChange = (event: React.ChangeEvent) => { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - return ( - - - } - label="Secondary" - /> - - } - label="Primary" - /> - } label="Uncontrolled" /> + + } label="Label" /> } label="Disabled" /> - } label="Disabled" /> ); } diff --git a/docs/src/pages/components/switches/Switches.js b/docs/src/pages/components/switches/Switches.js deleted file mode 100644 index 0cf9a786e95038..00000000000000 --- a/docs/src/pages/components/switches/Switches.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Switch from '@material-ui/core/Switch'; - -export default function Switches() { - const [state, setState] = React.useState({ - checkedA: true, - checkedB: true, - }); - - const handleChange = (event) => { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - - return ( -
- - - - - - -
- ); -} diff --git a/docs/src/pages/components/switches/Switches.tsx b/docs/src/pages/components/switches/Switches.tsx deleted file mode 100644 index 44843ae48c3cf4..00000000000000 --- a/docs/src/pages/components/switches/Switches.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Switch from '@material-ui/core/Switch'; - -export default function Switches() { - const [state, setState] = React.useState({ - checkedA: true, - checkedB: true, - }); - - const handleChange = (event: React.ChangeEvent) => { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - - return ( -
- - - - - - -
- ); -} diff --git a/docs/src/pages/components/switches/SwitchesSize.js b/docs/src/pages/components/switches/SwitchesSize.js index 1d801a41ce57cb..47d558c8dfbb6f 100644 --- a/docs/src/pages/components/switches/SwitchesSize.js +++ b/docs/src/pages/components/switches/SwitchesSize.js @@ -1,25 +1,11 @@ import * as React from 'react'; import Switch from '@material-ui/core/Switch'; -import FormGroup from '@material-ui/core/FormGroup'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; export default function SwitchesSize() { - const [checked, setChecked] = React.useState(false); - - const toggleChecked = () => { - setChecked((prev) => !prev); - }; - return ( - - } - label="Small" - /> - } - label="Normal" - /> - +
+ + +
); } diff --git a/docs/src/pages/components/switches/SwitchesSize.tsx b/docs/src/pages/components/switches/SwitchesSize.tsx index 1d801a41ce57cb..47d558c8dfbb6f 100644 --- a/docs/src/pages/components/switches/SwitchesSize.tsx +++ b/docs/src/pages/components/switches/SwitchesSize.tsx @@ -1,25 +1,11 @@ import * as React from 'react'; import Switch from '@material-ui/core/Switch'; -import FormGroup from '@material-ui/core/FormGroup'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; export default function SwitchesSize() { - const [checked, setChecked] = React.useState(false); - - const toggleChecked = () => { - setChecked((prev) => !prev); - }; - return ( - - } - label="Small" - /> - } - label="Normal" - /> - +
+ + +
); } diff --git a/docs/src/pages/components/switches/switches.md b/docs/src/pages/components/switches/switches.md index 1920508ee71f37..89069291c34632 100644 --- a/docs/src/pages/components/switches/switches.md +++ b/docs/src/pages/components/switches/switches.md @@ -17,14 +17,30 @@ should be made clear from the corresponding inline label. ## Basic switches -{{"demo": "pages/components/switches/Switches.js"}} +{{"demo": "pages/components/switches/BasicSwitches.js"}} -## Switch with FormControlLabel +## Label -`Switch` can be provided with a description thanks to the `FormControlLabel` component. +You can provide a label to the `Switch` thanks to the `FormControlLabel` component. {{"demo": "pages/components/switches/SwitchLabels.js"}} +## Size + +Use the `size` prop to change the size of the switch. + +{{"demo": "pages/components/switches/SwitchesSize.js"}} + +## Color + +{{"demo": "pages/components/switches/ColorSwitches.js"}} + +## Controlled + +You can control the switch with the `value` and `onChange` props: + +{{"demo": "pages/components/switches/ControlledSwitches.js"}} + ## Switches with FormGroup `FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API. @@ -41,12 +57,6 @@ Here are some examples of customizing the component. You can learn more about th 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/switch). -## Sizes - -Fancy smaller switches? Use the `size` prop. - -{{"demo": "pages/components/switches/SwitchesSize.js"}} - ## Label placement You can change the placement of the label: diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 0d536cc05a5885..9e31f85e3e7d61 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -7,9 +7,8 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled import { alpha, darken, lighten } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; import SwitchBase from '../internal/SwitchBase'; - import useThemeProps from '../styles/useThemeProps'; -import experimentalStyled from '../styles/experimentalStyled'; +import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; import switchClasses, { getSwitchUtilityClass } from './switchClasses'; const overridesResolver = (props, styles) => { @@ -41,10 +40,10 @@ const useUtilityClasses = (styleProps) => { `color${capitalize(color)}`, checked && 'checked', disabled && 'disabled', - 'input', ], thumb: ['thumb'], track: ['track'], + input: ['input'], }; const composedClasses = composeClasses(slots, getSwitchUtilityClass, classes); @@ -105,7 +104,7 @@ const SwitchRoot = experimentalStyled( const SwitchSwitchBase = experimentalStyled( SwitchBase, - {}, + { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiSwitch', slot: 'SwitchBase',