diff --git a/docs/pages/api-docs/checkbox.md b/docs/pages/api-docs/checkbox.md index cdb01fa3415845..f329cb79dd68d5 100644 --- a/docs/pages/api-docs/checkbox.md +++ b/docs/pages/api-docs/checkbox.md @@ -40,7 +40,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | required | bool | | If `true`, the `input` element will be required. | | size | 'small'
| 'medium' | 'medium' | The size of the checkbox. `small` is equivalent to the dense checkbox styling. | | type | string | | The input component prop `type`. | -| value | any | | The value of the component. The DOM API casts this to a string. | +| value | any | | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/switch.md b/docs/pages/api-docs/switch.md index e33b56c704c50c..75df15b0c49ec1 100644 --- a/docs/pages/api-docs/switch.md +++ b/docs/pages/api-docs/switch.md @@ -39,7 +39,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | required | bool | | If `true`, the `input` element will be required. | | size | 'small'
| 'medium' | 'medium' | The size of the switch. `small` is equivalent to the dense switch styling. | | type | string | | The input component prop `type`. | -| value | any | | The value of the component. The DOM API casts this to a string. | +| value | any | | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. | The `ref` is forwarded to the root element. diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 304fc23609a2a5..43b09e2092a260 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -112,8 +112,8 @@ const styles = theme => ({ }, }, appBar: { - color: theme.palette.type === 'dark' ? '#fff' : null, - backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.level2 : null, + color: theme.palette.type === 'light' ? null : '#fff', + backgroundColor: theme.palette.type === 'light' ? null : theme.palette.background.level2, transition: theme.transitions.create('width'), }, language: { diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index acda4134c56c83..3931c0e70d2e7c 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -139,7 +139,7 @@ const styles = theme => ({ padding: '2px 6px', color: theme.palette.text.primary, backgroundColor: - theme.palette.type === 'dark' ? 'rgba(255,229,100,0.2)' : 'rgba(255,229,100,0.1)', + theme.palette.type === 'light' ? 'rgba(255, 229, 100, 0.1)' : 'rgba(255, 229, 100, 0.2)', fontSize: 14, borderRadius: 2, }, diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index 038e98945a3872..3a1a2042cb93be 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -12,6 +12,8 @@ The widget is useful for setting the value of a single-line textbox in one of tw 1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). 2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). +It's meant to be an improved version of the "react-select" and "downshift" packages. + ## Combo box The value must be chosen from a predefined set of allowed values. diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js index 0423018486cff4..14948b92e5f636 100644 --- a/docs/src/pages/components/checkboxes/CheckboxLabels.js +++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js @@ -28,13 +28,13 @@ export default function CheckboxLabels() { }); const handleChange = event => { - setState({ ...state, [event.target.value]: event.target.checked }); + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( } + control={} label="Secondary" /> } label="Primary" /> - } label="Uncontrolled" /> - } label="Disabled" /> - } label="Disabled" /> + } label="Uncontrolled" /> + } label="Disabled" /> + } label="Disabled" /> } label="Indeterminate" /> - } + control={} label="Custom color" /> } checkedIcon={} value="checkedH" />} + control={} checkedIcon={} name="checkedH" />} label="Custom icon" /> } checkedIcon={} - value="checkedI" + name="checkedI" /> } label="Custom size" diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx index a02de6ca69dec7..b0c48f0084b960 100644 --- a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx +++ b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx @@ -28,13 +28,13 @@ export default function CheckboxLabels() { }); const handleChange = (event: React.ChangeEvent) => { - setState({ ...state, [event.target.value]: event.target.checked }); + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( } + control={} label="Secondary" /> } label="Primary" /> - } label="Uncontrolled" /> - } label="Disabled" /> - } label="Disabled" /> + } label="Uncontrolled" /> + } label="Disabled" /> + } label="Disabled" /> } label="Indeterminate" /> - } + control={} label="Custom color" /> } checkedIcon={} value="checkedH" />} + control={} checkedIcon={} name="checkedH" />} label="Custom icon" /> } checkedIcon={} - value="checkedI" + name="checkedI" /> } label="Custom size" diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js index b7a6e4131526a2..a8cfae91babe2e 100644 --- a/docs/src/pages/components/checkboxes/Checkboxes.js +++ b/docs/src/pages/components/checkboxes/Checkboxes.js @@ -13,39 +13,29 @@ export default function Checkboxes() { - - - + + + diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx index 0de890e3692e23..25019084982f21 100644 --- a/docs/src/pages/components/checkboxes/Checkboxes.tsx +++ b/docs/src/pages/components/checkboxes/Checkboxes.tsx @@ -13,39 +13,29 @@ export default function Checkboxes() { - - - + + + diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.js b/docs/src/pages/components/checkboxes/CheckboxesGroup.js index 2e07130f10d1a0..3d5368fd27634f 100644 --- a/docs/src/pages/components/checkboxes/CheckboxesGroup.js +++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.js @@ -25,7 +25,7 @@ export default function CheckboxesGroup() { }); const handleChange = event => { - setState({ ...state, [event.target.value]: event.target.checked }); + setState({ ...state, [event.target.name]: event.target.checked }); }; const { gilad, jason, antoine } = state; @@ -37,15 +37,15 @@ export default function CheckboxesGroup() { Assign responsibility } + control={} label="Gilad Gray" /> } + control={} label="Jason Killian" /> } + control={} label="Antoine Llorca" /> @@ -55,15 +55,15 @@ export default function CheckboxesGroup() { Pick two } + control={} label="Gilad Gray" /> } + control={} label="Jason Killian" /> } + control={} label="Antoine Llorca" /> diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx index 8ec0ac757d6443..fe0c30c7a67856 100644 --- a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx +++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx @@ -27,7 +27,7 @@ export default function CheckboxesGroup() { }); const handleChange = (event: React.ChangeEvent) => { - setState({ ...state, [event.target.value]: event.target.checked }); + setState({ ...state, [event.target.name]: event.target.checked }); }; const { gilad, jason, antoine } = state; @@ -39,15 +39,15 @@ export default function CheckboxesGroup() { Assign responsibility } + control={} label="Gilad Gray" /> } + control={} label="Jason Killian" /> } + control={} label="Antoine Llorca" /> @@ -57,15 +57,15 @@ export default function CheckboxesGroup() { Pick two } + control={} label="Gilad Gray" /> } + control={} label="Jason Killian" /> } + control={} label="Antoine Llorca" /> diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js index 67dc398c3e532b..cada0448448fb6 100644 --- a/docs/src/pages/components/chips/ChipsPlayground.js +++ b/docs/src/pages/components/chips/ChipsPlayground.js @@ -33,11 +33,10 @@ function ChipsPlayground(props) { size: 'medium', }); - const handleChange = key => event => { - const value = event.target.value; + const handleChange = event => { setState(state => ({ ...state, - [key]: value, + [event.target.name]: event.target.value, })); }; @@ -131,7 +130,7 @@ function ChipsPlayground(props) { name="variant" aria-label="variant" value={variant} - onChange={handleChange('variant')} + onChange={handleChange} > } label="default" /> } label="outlined" /> @@ -141,13 +140,7 @@ function ChipsPlayground(props) { color - + } label="default" /> } label="primary" /> } label="secondary" /> @@ -157,13 +150,7 @@ function ChipsPlayground(props) { size - + } label="medium" /> } label="small" /> @@ -172,13 +159,7 @@ function ChipsPlayground(props) { icon - + } label="none" /> } label="icon" /> @@ -192,7 +173,7 @@ function ChipsPlayground(props) { name="avatar" aria-label="avatar" value={avatar} - onChange={handleChange('avatar')} + onChange={handleChange} > } label="none" /> } label="letter" /> @@ -208,7 +189,7 @@ function ChipsPlayground(props) { name="onDelete" aria-label="on delete" value={onDelete} - onChange={handleChange('onDelete')} + onChange={handleChange} > } label="none" /> } label="default" /> diff --git a/docs/src/pages/components/dialogs/MaxWidthDialog.js b/docs/src/pages/components/dialogs/MaxWidthDialog.js index c7230a0a238204..11f437339d04b7 100644 --- a/docs/src/pages/components/dialogs/MaxWidthDialog.js +++ b/docs/src/pages/components/dialogs/MaxWidthDialog.js @@ -90,9 +90,7 @@ export default function MaxWidthDialog() { - } + control={} label="Full width" /> diff --git a/docs/src/pages/components/dialogs/MaxWidthDialog.tsx b/docs/src/pages/components/dialogs/MaxWidthDialog.tsx index 67809679b9bf49..d53de6dd0c4e75 100644 --- a/docs/src/pages/components/dialogs/MaxWidthDialog.tsx +++ b/docs/src/pages/components/dialogs/MaxWidthDialog.tsx @@ -92,9 +92,7 @@ export default function MaxWidthDialog() { - } + control={} label="Full width" /> diff --git a/docs/src/pages/components/lists/InteractiveList.js b/docs/src/pages/components/lists/InteractiveList.js index d2444ed3082c51..c0addef06c1c66 100644 --- a/docs/src/pages/components/lists/InteractiveList.js +++ b/docs/src/pages/components/lists/InteractiveList.js @@ -46,22 +46,12 @@ export default function InteractiveList() {
setDense(event.target.checked)} - value="dense" - /> - } + control={ setDense(event.target.checked)} />} label="Enable dense" /> setSecondary(event.target.checked)} - value="secondary" - /> + setSecondary(event.target.checked)} /> } label="Enable secondary text" /> diff --git a/docs/src/pages/components/lists/InteractiveList.tsx b/docs/src/pages/components/lists/InteractiveList.tsx index 598d98aa5f9d0d..eb8967592164ab 100644 --- a/docs/src/pages/components/lists/InteractiveList.tsx +++ b/docs/src/pages/components/lists/InteractiveList.tsx @@ -48,22 +48,12 @@ export default function InteractiveList() {
setDense(event.target.checked)} - value="dense" - /> - } + control={ setDense(event.target.checked)} />} label="Enable dense" /> setSecondary(event.target.checked)} - value="secondary" - /> + setSecondary(event.target.checked)} /> } label="Enable secondary text" /> diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js index e92d9794515097..d29b01ea0083b7 100644 --- a/docs/src/pages/components/popover/AnchorPlayground.js +++ b/docs/src/pages/components/popover/AnchorPlayground.js @@ -91,19 +91,17 @@ function AnchorPlayground(props) { anchorReference: 'anchorEl', }); - const handleChange = key => event => { - const value = event.target.value; + const handleChange = event => { setState(state => ({ ...state, - [key]: value, + [event.target.name]: event.target.value, })); }; const handleNumberInputChange = key => event => { - const value = event.target.value; setState(state => ({ ...state, - [key]: parseInt(value, 10), + [key]: parseInt(event.target.value, 10), })); }; @@ -192,7 +190,7 @@ function AnchorPlayground(props) { aria-label="anchor reference" name="anchorReference" value={anchorReference} - onChange={handleChange('anchorReference')} + onChange={handleChange} > } label="anchorEl" /> } label="anchorPosition" /> @@ -227,7 +225,7 @@ function AnchorPlayground(props) { aria-label="anchor origin vertical" name="anchorOriginVertical" value={anchorOriginVertical} - onChange={handleChange('anchorOriginVertical')} + onChange={handleChange} > } label="Top" /> } label="Center" /> @@ -270,7 +268,7 @@ function AnchorPlayground(props) { aria-label="anchor origin horizontal" name="anchorOriginHorizontal" value={anchorOriginHorizontal} - onChange={handleChange('anchorOriginHorizontal')} + onChange={handleChange} > } label="Left" /> } label="Center" /> diff --git a/docs/src/pages/components/selects/NativeSelects.js b/docs/src/pages/components/selects/NativeSelects.js index d3945d59fe3056..4d3e935a6d5f06 100644 --- a/docs/src/pages/components/selects/NativeSelects.js +++ b/docs/src/pages/components/selects/NativeSelects.js @@ -23,7 +23,8 @@ export default function NativeSelects() { name: 'hai', }); - const handleChange = name => event => { + const handleChange = event => { + const name = event.target.name; setState({ ...state, [name]: event.target.value, @@ -37,7 +38,7 @@ export default function NativeSelects() { ( - event: React.ChangeEvent<{ value: unknown }>, - ) => { + const handleChange = (event: React.ChangeEvent<{ name?: string; value: unknown }>) => { + const name = event.target.name as keyof typeof state; setState({ ...state, [name]: event.target.value, @@ -41,7 +40,7 @@ export default function NativeSelects() { ` element. If you are looking for more advanced features, like combobox, multiselect, autocomplete, async or creatable support, head to the [`Autocomplete` component](/components/autocomplete/). -It's also meant to be an improved version of the "react-select" package. +It's meant to be an improved version of the "react-select" and "downshift" packages. ## Native Select diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index e8e017eb48172e..5ecb87c294f05f 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -61,7 +61,7 @@ const IOSSlider = withStyles({ boxShadow: iOSBoxShadow, marginTop: -14, marginLeft: -14, - '&:focus,&:hover,&$active': { + '&:focus, &:hover, &$active': { boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { @@ -110,7 +110,7 @@ const PrettoSlider = withStyles({ border: '2px solid currentColor', marginTop: -8, marginLeft: -12, - '&:focus,&:hover,&$active': { + '&:focus, &:hover, &$active': { boxShadow: 'inherit', }, }, @@ -142,7 +142,7 @@ const AirbnbSlider = withStyles({ marginTop: -12, marginLeft: -13, boxShadow: '#ebebeb 0px 2px 2px', - '&:focus,&:hover,&$active': { + '&:focus, &:hover, &$active': { boxShadow: '#ccc 0px 2px 3px 1px', }, '& .bar': { diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index cfaafa287fa497..e4ae7d83f87d74 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -62,7 +62,7 @@ const IOSSlider = withStyles({ boxShadow: iOSBoxShadow, marginTop: -14, marginLeft: -14, - '&:focus,&:hover,&$active': { + '&:focus, &:hover, &$active': { boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { @@ -111,7 +111,7 @@ const PrettoSlider = withStyles({ border: '2px solid currentColor', marginTop: -8, marginLeft: -12, - '&:focus,&:hover,&$active': { + '&:focus, &:hover, &$active': { boxShadow: 'inherit', }, }, @@ -143,7 +143,7 @@ const AirbnbSlider = withStyles({ marginTop: -12, marginLeft: -13, boxShadow: '#ebebeb 0px 2px 2px', - '&:focus,&:hover,&$active': { + '&:focus, &:hover, &$active': { boxShadow: '#ccc 0px 2px 3px 1px', }, '& .bar': { diff --git a/docs/src/pages/components/speed-dial/SpeedDials.js b/docs/src/pages/components/speed-dial/SpeedDials.js index e4648255421d3c..2cc16124121b3d 100644 --- a/docs/src/pages/components/speed-dial/SpeedDials.js +++ b/docs/src/pages/components/speed-dial/SpeedDials.js @@ -73,9 +73,7 @@ export default function SpeedDials() { return (
- } + control={} label="Hidden" /> diff --git a/docs/src/pages/components/speed-dial/SpeedDials.tsx b/docs/src/pages/components/speed-dial/SpeedDials.tsx index 2abd8ea5ea65ae..06c584fc0a04e0 100644 --- a/docs/src/pages/components/speed-dial/SpeedDials.tsx +++ b/docs/src/pages/components/speed-dial/SpeedDials.tsx @@ -75,9 +75,7 @@ export default function SpeedDials() { return (
- } + control={} label="Hidden" /> diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js index 556aea3711c897..34e64499ef6749 100644 --- a/docs/src/pages/components/switches/CustomizedSwitches.js +++ b/docs/src/pages/components/switches/CustomizedSwitches.js @@ -115,41 +115,25 @@ export default function CustomizedSwitches() { checkedC: true, }); - const handleChange = name => event => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = event => { + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( - } + control={} label="Custom color" /> - } + control={} label="iOS style" /> Off - + On diff --git a/docs/src/pages/components/switches/CustomizedSwitches.tsx b/docs/src/pages/components/switches/CustomizedSwitches.tsx index 31c6236c7ea39f..2179f9b5c29f86 100644 --- a/docs/src/pages/components/switches/CustomizedSwitches.tsx +++ b/docs/src/pages/components/switches/CustomizedSwitches.tsx @@ -127,41 +127,25 @@ export default function CustomizedSwitches() { checkedC: true, }); - const handleChange = (name: string) => (event: React.ChangeEvent) => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = (event: React.ChangeEvent) => { + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( - } + control={} label="Custom color" /> - } + control={} label="iOS style" /> Off - + On diff --git a/docs/src/pages/components/switches/SwitchLabels.js b/docs/src/pages/components/switches/SwitchLabels.js index 084ca43e98727b..4bb7066a390f1b 100644 --- a/docs/src/pages/components/switches/SwitchLabels.js +++ b/docs/src/pages/components/switches/SwitchLabels.js @@ -9,32 +9,30 @@ export default function SwitchLabels() { checkedB: true, }); - const handleChange = name => event => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = event => { + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( - } + control={} label="Secondary" /> } label="Primary" /> - } label="Uncontrolled" /> - } label="Disabled" /> - } label="Disabled" /> + } label="Uncontrolled" /> + } label="Disabled" /> + } label="Disabled" /> ); } diff --git a/docs/src/pages/components/switches/SwitchLabels.tsx b/docs/src/pages/components/switches/SwitchLabels.tsx index 3dbd5d14fb949b..1050a9df35d31b 100644 --- a/docs/src/pages/components/switches/SwitchLabels.tsx +++ b/docs/src/pages/components/switches/SwitchLabels.tsx @@ -9,32 +9,30 @@ export default function SwitchLabels() { checkedB: true, }); - const handleChange = (name: string) => (event: React.ChangeEvent) => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = (event: React.ChangeEvent) => { + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( - } + control={} label="Secondary" /> } label="Primary" /> - } label="Uncontrolled" /> - } label="Disabled" /> - } label="Disabled" /> + } label="Uncontrolled" /> + } label="Disabled" /> + } label="Disabled" /> ); } diff --git a/docs/src/pages/components/switches/Switches.js b/docs/src/pages/components/switches/Switches.js index 1065af4af60aa4..d617cd700b90bb 100644 --- a/docs/src/pages/components/switches/Switches.js +++ b/docs/src/pages/components/switches/Switches.js @@ -7,31 +7,30 @@ export default function Switches() { checkedB: true, }); - const handleChange = name => event => { - setState({ ...state, [name]: event.target.checked }); + 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 index 5100b648e7276d..9edf8abdc4218e 100644 --- a/docs/src/pages/components/switches/Switches.tsx +++ b/docs/src/pages/components/switches/Switches.tsx @@ -7,31 +7,30 @@ export default function Switches() { checkedB: true, }); - const handleChange = (name: string) => (event: React.ChangeEvent) => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = (event: React.ChangeEvent) => { + setState({ ...state, [event.target.name]: event.target.checked }); }; return (
- - - + + + diff --git a/docs/src/pages/components/switches/SwitchesGroup.js b/docs/src/pages/components/switches/SwitchesGroup.js index a81d8719d72acd..c18f8560f1f8ee 100644 --- a/docs/src/pages/components/switches/SwitchesGroup.js +++ b/docs/src/pages/components/switches/SwitchesGroup.js @@ -13,8 +13,8 @@ export default function SwitchesGroup() { antoine: true, }); - const handleChange = name => event => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = event => { + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( @@ -22,17 +22,15 @@ export default function SwitchesGroup() { Assign responsibility } + control={} label="Gilad Gray" /> } + control={} label="Jason Killian" /> - } + control={} label="Antoine Llorca" /> diff --git a/docs/src/pages/components/switches/SwitchesGroup.tsx b/docs/src/pages/components/switches/SwitchesGroup.tsx index f3a7cbe3d28c25..5fedc68e3daf75 100644 --- a/docs/src/pages/components/switches/SwitchesGroup.tsx +++ b/docs/src/pages/components/switches/SwitchesGroup.tsx @@ -13,8 +13,8 @@ export default function SwitchesGroup() { antoine: true, }); - const handleChange = (name: string) => (event: React.ChangeEvent) => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = (event: React.ChangeEvent) => { + setState({ ...state, [event.target.name]: event.target.checked }); }; return ( @@ -22,17 +22,15 @@ export default function SwitchesGroup() { Assign responsibility } + control={} label="Gilad Gray" /> } + control={} label="Jason Killian" /> - } + control={} label="Antoine Llorca" /> diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js index d3386d72e70ffa..89dfe4ca85d2c5 100644 --- a/docs/src/pages/components/text-fields/FormattedInputs.js +++ b/docs/src/pages/components/text-fields/FormattedInputs.js @@ -69,10 +69,10 @@ export default function FormattedInputs() { numberformat: '1320', }); - const handleChange = name => event => { + const handleChange = event => { setValues({ ...values, - [name]: event.target.value, + [event.target.name]: event.target.value, }); }; @@ -82,7 +82,8 @@ export default function FormattedInputs() { react-text-mask @@ -90,7 +91,8 @@ export default function FormattedInputs() { (event: React.ChangeEvent) => { + const handleChange = (event: React.ChangeEvent) => { setValues({ ...values, - [name]: event.target.value, + [event.target.name]: event.target.value, }); }; @@ -88,7 +88,8 @@ export default function FormattedInputs() { react-text-mask @@ -96,7 +97,8 @@ export default function FormattedInputs() { ({ }, cardHeader: { backgroundColor: - theme.palette.type === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200], + theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[700], }, cardPricing: { display: 'flex', diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js index 54b9be8c75a99f..3b177d13abc81b 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js @@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({ backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', backgroundColor: - theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[50], + theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900], backgroundSize: 'cover', backgroundPosition: 'center', }, diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js index 44f9f578596ef6..9d16ff4d317427 100644 --- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js +++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js @@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(3, 2), marginTop: 'auto', backgroundColor: - theme.palette.type === 'dark' ? theme.palette.grey[800] : theme.palette.grey[200], + theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800], }, })); diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 5a659554d306ca..4dce708ebb3f49 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -174,6 +174,7 @@ Checkbox.propTypes = { type: PropTypes.string, /** * The value of the component. The DOM API casts this to a string. + * The browser uses "on" as the default value. */ value: PropTypes.any, }; diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 66907b9cb43557..3cbd060fd8a3d9 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -267,6 +267,7 @@ Switch.propTypes = { type: PropTypes.string, /** * The value of the component. The DOM API casts this to a string. + * The browser uses "on" as the default value. */ value: PropTypes.any, }; diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index 2c647d7d7447c5..e37741476d643f 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.js @@ -16,7 +16,7 @@ export const styles = theme => ({ '&$hover:hover': { backgroundColor: theme.palette.action.hover, }, - '&$selected,&$selected:hover': { + '&$selected, &$selected:hover': { backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.selectedOpacity), }, },