Material-ui: [Radio] Add size="small" support

[pete-lennart]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Property size is not working on component <Radio />.

Expected Behavior 🤔

The docs for the Radio component state that

Any other props supplied will be provided to the root element (IconButton)

The IconButton component has a property size, so setting size on Radio should work as well. The typescript typings seem to be correct as size is recognized as valid property of Radio.

Steps to Reproduce 🕹

This sandbox demonstrates the issue. You can set size="small" on an IconButton, but has no effect on Radio.

| Tech | Version |
| ----------- | ------- |
| Material-UI | 4.6.1 |
| React | 16.12.0 |
| Browser | Firefox v70.0.1 |
| TypeScript | 3.8.0-dev.20191121 |

[oliviertassinari]

@pete-lennart You can find two demos for the size small variant:

• https://material-ui.com/components/radio-buttons/#standalone-radio-buttons
  
• http://material-ui.com/components/checkboxes/

However, there is no out-of-the-box prop support. I think that we could add it. What do you think of such a diff? It could be the beginning of a pull request is you are interested :).

diff --git a/docs/src/pages/components/radio-buttons/RadioButtons.tsx b/docs/src/pages/components/radio-buttons/RadioButtons.tsx
index ac30f0467..fd7ff9d72 100644
--- a/docs/src/pages/components/radio-buttons/RadioButtons.tsx
+++ b/docs/src/pages/components/radio-buttons/RadioButtons.tsx
@@ -60,8 +60,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>
   );
diff --git a/packages/material-ui/src/Radio/Radio.d.ts b/packages/material-ui/src/Radio/Radio.d.ts
index be2d98a50..5cfeb2fde 100644
--- a/packages/material-ui/src/Radio/Radio.d.ts
+++ b/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';
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 5fc1a3eb9..800d33dbd 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/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`.
    */
diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index 9cb07f681..d7e8dc464 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -33,26 +33,20 @@ 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>
   );
 }

 RadioButtonIcon.propTypes = {

It would make it consistent with the switch size support: https://material-ui.com/components/switches/#sizes.

[pete-lennart]

Yes, that looks good!

[oliviertassinari]

@pete-lennart Ok great. If you want to work on a pull request, you are free to go.

[SandraMarcelaHerreraArriaga]

Somebody has taken this issue?

[mbrookes]

@SandraMarcelaHerreraArriaga Not so far. Would you like to work on it?

[SandraMarcelaHerreraArriaga]

@SandraMarcelaHerreraArriaga Not so far. Would you like to work on it?

Sure! Thanks :) I will start working on it