diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md index 4ffe427ad4be27..40c85aa0b2c45c 100644 --- a/docs/pages/api/checkbox.md +++ b/docs/pages/api/checkbox.md @@ -38,6 +38,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | inputRef | ref | | Pass a ref to the `input` element. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | | 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. | diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md index 404ec1ea1b125a..81cf13146a8198 100644 --- a/docs/pages/api/radio.md +++ b/docs/pages/api/radio.md @@ -37,6 +37,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | name | string | | Name attribute of the `input` element. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). | | required | bool | | If `true`, the `input` element will be required. | +| size | 'small'
| 'medium'
| 'medium' | The size of the radio. `small` is equivalent to the dense radio styling. | | type | string | | The input component prop `type`. | | value | any | | The value of the component. The DOM API casts this to a string. | diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js index 96fe42731ef4f6..b7a6e4131526a2 100644 --- a/docs/src/pages/components/checkboxes/Checkboxes.js +++ b/docs/src/pages/components/checkboxes/Checkboxes.js @@ -2,72 +2,51 @@ import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; export default function Checkboxes() { - const [state, setState] = React.useState({ - checkedA: true, - checkedB: true, - checkedF: true, - }); + const [checked, setChecked] = React.useState(true); - const handleChange = name => event => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = event => { + setChecked(event.target.checked); }; return (
- - + + +
); diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx index 48844df006ea0c..0de890e3692e23 100644 --- a/docs/src/pages/components/checkboxes/Checkboxes.tsx +++ b/docs/src/pages/components/checkboxes/Checkboxes.tsx @@ -2,72 +2,51 @@ import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; export default function Checkboxes() { - const [state, setState] = React.useState({ - checkedA: true, - checkedB: true, - checkedF: true, - }); + const [checked, setChecked] = React.useState(true); - const handleChange = (name: string) => (event: React.ChangeEvent) => { - setState({ ...state, [name]: event.target.checked }); + const handleChange = (event: React.ChangeEvent) => { + setChecked(event.target.checked); }; return (
- - + + +
); diff --git a/docs/src/pages/components/radio-buttons/RadioButtons.js b/docs/src/pages/components/radio-buttons/RadioButtons.js index 25768e2d5a6d33..208be428d4e723 100644 --- a/docs/src/pages/components/radio-buttons/RadioButtons.js +++ b/docs/src/pages/components/radio-buttons/RadioButtons.js @@ -2,8 +2,6 @@ import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import { green } from '@material-ui/core/colors'; import Radio from '@material-ui/core/Radio'; -import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'; -import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked'; const GreenRadio = withStyles({ root: { @@ -60,8 +58,7 @@ export default function RadioButtons() { color="default" name="radio-button-demo" inputProps={{ 'aria-label': 'E' }} - icon={} - checkedIcon={} + size="small" /> ); diff --git a/docs/src/pages/components/radio-buttons/RadioButtons.tsx b/docs/src/pages/components/radio-buttons/RadioButtons.tsx index ac30f0467112e1..bd7afc74d8d4aa 100644 --- a/docs/src/pages/components/radio-buttons/RadioButtons.tsx +++ b/docs/src/pages/components/radio-buttons/RadioButtons.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import { green } from '@material-ui/core/colors'; import Radio, { RadioProps } from '@material-ui/core/Radio'; -import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'; -import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked'; const GreenRadio = withStyles({ root: { @@ -60,8 +58,7 @@ export default function RadioButtons() { color="default" name="radio-button-demo" inputProps={{ 'aria-label': 'E' }} - icon={} - checkedIcon={} + size="small" /> ); diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index 3270eb270f23cc..6931df5620daa0 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -9,6 +9,7 @@ export interface CheckboxProps icon?: React.ReactNode; indeterminate?: boolean; indeterminateIcon?: React.ReactNode; + size?: 'small' | 'medium'; } export type CheckboxClassKey = diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 0b538602f4ef76..9a8a721b34e275 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -69,13 +69,13 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) { indeterminate = false, indeterminateIcon = defaultIndeterminateIcon, inputProps, + size = 'medium', ...other } = props; return ( ({ * @ignore - internal component. */ function RadioButtonIcon(props) { - const { checked, classes } = props; + const { checked, classes, fontSize } = props; return (
- - + +
); } @@ -53,6 +53,11 @@ RadioButtonIcon.propTypes = { * See [CSS API](#css) below for more details. */ classes: PropTypes.object.isRequired, + /** + * The size of the radio. + * `small` is equivalent to the dense radio styling. + */ + fontSize: PropTypes.oneOf(['small', 'default']), }; export default withStyles(styles, { name: 'PrivateRadioButtonIcon' })(RadioButtonIcon);