[Radio][Checkbox] Add size="small" support

docs/pages/api/checkbox.md

@@ -38,6 +38,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> |  | Pass a ref to the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
+| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the checkbox. `small` is equivalent to the dense checkbox styling. |
 | <span class="prop-name">type</span> | <span class="prop-type">string</span> |  | The input component prop `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the component. The DOM API casts this to a string. |
 

docs/pages/api/radio.md

@@ -37,6 +37,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | Name attribute of the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*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). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
+| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the radio. `small` is equivalent to the dense radio styling. |
 | <span class="prop-name">type</span> | <span class="prop-type">string</span> |  | The input component prop `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the component. The DOM API casts this to a string. |
 

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 (
     <div>
       <Checkbox
-        checked={state.checkedA}
-        onChange={handleChange('checkedA')}
-        value="checkedA"
-        inputProps={{
-          'aria-label': 'primary checkbox',
-        }}
+        checked={checked}
+        onChange={handleChange}
+        value="primary"
+        inputProps={{ 'aria-label': 'primary checkbox' }}
       />
       <Checkbox
-        checked={state.checkedB}
-        onChange={handleChange('checkedB')}
-        value="checkedB"
+        defaultChecked
+        value="secondary"
         color="primary"
-        inputProps={{
-          'aria-label': 'secondary checkbox',
-        }}
-      />
-      <Checkbox
-        value="checkedC"
-        inputProps={{
-          'aria-label': 'uncontrolled-checkbox',
-        }}
-      />
-      <Checkbox
-        disabled
-        value="checkedD"
-        inputProps={{
-          'aria-label': 'disabled checkbox',
-        }}
+        inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
+      <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+      <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
       <Checkbox
         disabled
         checked
-        value="checkedE"
-        inputProps={{
-          'aria-label': 'disabled checked checkbox',
-        }}
+        value="disabled checked"
+        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
       />
       <Checkbox
-        checked={state.checkedF}
-        onChange={handleChange('checkedF')}
-        value="checkedF"
+        defaultChecked
+        value="indeterminate"
         indeterminate
-        inputProps={{
-          'aria-label': 'indeterminate checkbox',
-        }}
+        inputProps={{ 'aria-label': 'indeterminate checkbox' }}
       />
       <Checkbox
         defaultChecked
         color="default"
-        value="checkedG"
-        inputProps={{
-          'aria-label': 'checkbox with default color',
-        }}
+        value="default"
+        inputProps={{ 'aria-label': 'checkbox with default color' }}
+      />
+      <Checkbox
+        defaultChecked
+        size="small"
+        value="small"
+        inputProps={{ 'aria-label': 'checkbox with small size' }}
       />
     </div>
   );

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<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
   };
 
   return (
     <div>
       <Checkbox
-        checked={state.checkedA}
-        onChange={handleChange('checkedA')}
-        value="checkedA"
-        inputProps={{
-          'aria-label': 'primary checkbox',
-        }}
+        checked={checked}
+        onChange={handleChange}
+        value="primary"
+        inputProps={{ 'aria-label': 'primary checkbox' }}
       />
       <Checkbox
-        checked={state.checkedB}
-        onChange={handleChange('checkedB')}
-        value="checkedB"
+        defaultChecked
+        value="secondary"
         color="primary"
-        inputProps={{
-          'aria-label': 'secondary checkbox',
-        }}
-      />
-      <Checkbox
-        value="checkedC"
-        inputProps={{
-          'aria-label': 'uncontrolled-checkbox',
-        }}
-      />
-      <Checkbox
-        disabled
-        value="checkedD"
-        inputProps={{
-          'aria-label': 'disabled checkbox',
-        }}
+        inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
+      <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+      <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
       <Checkbox
         disabled
         checked
-        value="checkedE"
-        inputProps={{
-          'aria-label': 'disabled checked checkbox',
-        }}
+        value="disabled checked"
+        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
       />
       <Checkbox
-        checked={state.checkedF}
-        onChange={handleChange('checkedF')}
-        value="checkedF"
+        defaultChecked
+        value="indeterminate"
         indeterminate
-        inputProps={{
-          'aria-label': 'indeterminate checkbox',
-        }}
+        inputProps={{ 'aria-label': 'indeterminate checkbox' }}
       />
       <Checkbox
         defaultChecked
         color="default"
-        value="checkedG"
-        inputProps={{
-          'aria-label': 'checkbox with default color',
-        }}
+        value="default"
+        inputProps={{ 'aria-label': 'checkbox with default color' }}
+      />
+      <Checkbox
+        defaultChecked
+        size="small"
+        value="small"
+        inputProps={{ 'aria-label': 'checkbox with small size' }}
       />
     </div>
   );

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={<RadioButtonUncheckedIcon fontSize="small" />}
-        checkedIcon={<RadioButtonCheckedIcon fontSize="small" />}
+        size="small"
       />
     </div>
   );

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={<RadioButtonUncheckedIcon fontSize="small" />}
-        checkedIcon={<RadioButtonCheckedIcon fontSize="small" />}
+        size="small"
       />
     </div>
   );

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 =

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 (
     <SwitchBase
       type="checkbox"
-      checkedIcon={indeterminate ? indeterminateIcon : checkedIcon}
       classes={{
         root: clsx(classes.root, classes[`color${capitalize(color)}`], {
           [classes.indeterminate]: indeterminate,
@@ -88,7 +88,12 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
         'data-indeterminate': indeterminate,
         ...inputProps,
       }}
-      icon={indeterminate ? indeterminateIcon : icon}
+      icon={React.cloneElement(indeterminate ? indeterminateIcon : icon, {
+        fontSize: size === 'small' ? 'small' : 'default',
+      })}
+      checkedIcon={React.cloneElement(indeterminate ? indeterminateIcon : checkedIcon, {
+        fontSize: size === 'small' ? 'small' : 'default',
+      })}
       ref={ref}
       disabled={disabled}
       {...other}
@@ -160,6 +165,11 @@ Checkbox.propTypes = {
    * If `true`, the `input` element will be required.
    */
   required: PropTypes.bool,
+  /**
+   * The size of the checkbox.
+   * `small` is equivalent to the dense checkbox styling.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
   /**
    * The input component prop `type`.
    */

packages/material-ui/src/Radio/Radio.d.ts

@@ -7,6 +7,7 @@ export interface RadioProps
   checkedIcon?: React.ReactNode;
   color?: 'primary' | 'secondary' | 'default';
   icon?: React.ReactNode;
+  size?: 'small' | 'medium';
 }
 
 export type RadioClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondary';

packages/material-ui/src/Radio/Radio.js

@@ -64,6 +64,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
     disabled = false,
     name: nameProp,
     onChange: onChangeProp,
+    size = 'medium',
     ...other
   } = props;
   const radioGroup = React.useContext(RadioGroupContext);
@@ -85,8 +86,10 @@ const Radio = React.forwardRef(function Radio(props, ref) {
     <SwitchBase
       color={color}
       type="radio"
-      icon={defaultIcon}
-      checkedIcon={defaultCheckedIcon}
+      icon={React.cloneElement(defaultIcon, { fontSize: size === 'small' ? 'small' : 'default' })}
+      checkedIcon={React.cloneElement(defaultCheckedIcon, {
+        fontSize: size === 'small' ? 'small' : 'default',
+      })}
       classes={{
         root: clsx(classes.root, classes[`color${capitalize(color)}`]),
         checked: classes.checked,
@@ -160,6 +163,11 @@ Radio.propTypes = {
    * If `true`, the `input` element will be required.
    */
   required: PropTypes.bool,
+  /**
+   * The size of the radio.
+   * `small` is equivalent to the dense radio styling.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
   /**
    * The input component prop `type`.
    */

packages/material-ui/src/Radio/RadioButtonIcon.js

@@ -33,12 +33,12 @@ export const styles = theme => ({
  * @ignore - internal component.
  */
 function RadioButtonIcon(props) {
-  const { checked, classes } = props;
+  const { checked, classes, fontSize } = props;
 
   return (
     <div className={clsx(classes.root, { [classes.checked]: checked })}>
-      <RadioButtonUncheckedIcon />
-      <RadioButtonCheckedIcon className={classes.layer} />
+      <RadioButtonUncheckedIcon fontSize={fontSize} />
+      <RadioButtonCheckedIcon fontSize={fontSize} className={classes.layer} />
     </div>
   );
 }
@@ -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);