From 6d91f5a7882e07b76e0143beaf3f842d2b5d9eaa Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Thu, 10 Dec 2020 22:03:03 +0000
Subject: [PATCH 1/3] [Icons] Change default fontSize from default to medium

---
 docs/pages/api-docs/icon.json                 | 4 ++--
 docs/pages/api-docs/svg-icon.json             | 4 ++--
 packages/material-ui/src/Icon/Icon.d.ts       | 4 ++--
 packages/material-ui/src/Icon/Icon.js         | 8 ++++----
 packages/material-ui/src/SvgIcon/SvgIcon.d.ts | 4 ++--
 packages/material-ui/src/SvgIcon/SvgIcon.js   | 8 ++++----
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/pages/api-docs/icon.json b/docs/pages/api-docs/icon.json
index 61209d21c3619e..ec9f571cfd827f 100644
--- a/docs/pages/api-docs/icon.json
+++ b/docs/pages/api-docs/icon.json
@@ -14,9 +14,9 @@
     "fontSize": {
       "type": {
         "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'small'"
+        "description": "'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
       },
-      "default": "'default'"
+      "default": "'medium'"
     }
   },
   "name": "Icon",
diff --git a/docs/pages/api-docs/svg-icon.json b/docs/pages/api-docs/svg-icon.json
index 8adb620deca916..45c57865045c63 100644
--- a/docs/pages/api-docs/svg-icon.json
+++ b/docs/pages/api-docs/svg-icon.json
@@ -13,9 +13,9 @@
     "fontSize": {
       "type": {
         "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'small'"
+        "description": "'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
       },
-      "default": "'default'"
+      "default": "'medium'"
     },
     "htmlColor": { "type": { "name": "string" } },
     "shapeRendering": { "type": { "name": "string" } },
diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts
index dfe9cabde2e6a7..0c4f343bda03b5 100644
--- a/packages/material-ui/src/Icon/Icon.d.ts
+++ b/packages/material-ui/src/Icon/Icon.d.ts
@@ -44,9 +44,9 @@ export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
     color?: Exclude<PropTypes.Color, 'default'> | 'action' | 'disabled' | 'error';
     /**
      * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-     * @default 'default'
+     * @default 'medium'
      */
-    fontSize?: 'inherit' | 'default' | 'small' | 'large';
+    fontSize?: 'inherit' | 'large' | 'medium' | 'small';
   };
   defaultComponent: D;
 }
diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js
index 89ac4adabbb332..f7a5696987449d 100644
--- a/packages/material-ui/src/Icon/Icon.js
+++ b/packages/material-ui/src/Icon/Icon.js
@@ -59,7 +59,7 @@ const Icon = React.forwardRef(function Icon(props, ref) {
     className,
     color = 'inherit',
     component: Component = 'span',
-    fontSize = 'default',
+    fontSize = 'medium',
     ...other
   } = props;
 
@@ -73,7 +73,7 @@ const Icon = React.forwardRef(function Icon(props, ref) {
         classes.root,
         {
           [classes[`color${capitalize(color)}`]]: color !== 'inherit',
-          [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'default',
+          [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'medium',
         },
         className,
       )}
@@ -119,9 +119,9 @@ Icon.propTypes = {
   component: PropTypes.elementType,
   /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   * @default 'default'
+   * @default 'medium'
    */
-  fontSize: PropTypes.oneOf(['default', 'inherit', 'large', 'small']),
+  fontSize: PropTypes.oneOf(['inherit', 'large', 'medium', 'small']),
 };
 
 Icon.muiName = 'Icon';
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts
index d37d0d7279eb3e..8174d6dc57450a 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts
@@ -38,9 +38,9 @@ export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
     color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'disabled' | 'error';
     /**
      * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-     * @default 'default'
+     * @default 'medium'
      */
-    fontSize?: 'inherit' | 'default' | 'small' | 'large';
+    fontSize?: 'inherit' | 'large' | 'medium' | 'small';
     /**
      * Applies a color attribute to the SVG element.
      */
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
index 91d01445859c37..4085908bc8caea 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -59,7 +59,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
     className,
     color = 'inherit',
     component: Component = 'svg',
-    fontSize = 'default',
+    fontSize = 'medium',
     htmlColor,
     titleAccess,
     viewBox = '0 0 24 24',
@@ -72,7 +72,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
         classes.root,
         {
           [classes[`color${capitalize(color)}`]]: color !== 'inherit',
-          [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'default',
+          [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'medium',
         },
         className,
       )}
@@ -120,9 +120,9 @@ SvgIcon.propTypes = {
   component: PropTypes.elementType,
   /**
    * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   * @default 'default'
+   * @default 'medium'
    */
-  fontSize: PropTypes.oneOf(['default', 'inherit', 'large', 'small']),
+  fontSize: PropTypes.oneOf(['inherit', 'large', 'medium', 'small']),
   /**
    * Applies a color attribute to the SVG element.
    */

From d7d1c1b6ea52b8f3f94a926f13335547644f8b58 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Thu, 10 Dec 2020 22:39:29 +0000
Subject: [PATCH 2/3] Fix Radio

---
 packages/material-ui/src/Radio/Radio.js           | 4 ++--
 packages/material-ui/src/Radio/RadioButtonIcon.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index f612f1e040d12d..0054211b3b617c 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -85,9 +85,9 @@ const Radio = React.forwardRef(function Radio(props, ref) {
     <SwitchBase
       color={color}
       type="radio"
-      icon={React.cloneElement(defaultIcon, { fontSize: size === 'small' ? 'small' : 'default' })}
+      icon={React.cloneElement(defaultIcon, { fontSize: size === 'small' ? 'small' : 'medium' })}
       checkedIcon={React.cloneElement(defaultCheckedIcon, {
-        fontSize: size === 'small' ? 'small' : 'default',
+        fontSize: size === 'small' ? 'small' : 'medium',
       })}
       classes={{
         root: clsx(classes.root, classes[`color${capitalize(color)}`]),
diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index f4e34a325d2b43..2bc4204e347b65 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -61,7 +61,7 @@ RadioButtonIcon.propTypes = {
    * The size of the radio.
    * `small` is equivalent to the dense radio styling.
    */
-  fontSize: PropTypes.oneOf(['small', 'default']),
+  fontSize: PropTypes.oneOf(['small', 'medium']),
 };
 
 export default withStyles(styles, { name: 'PrivateRadioButtonIcon' })(RadioButtonIcon);

From 94e24ef430526d8bf17db937b443a726ece08fda Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Sat, 12 Dec 2020 11:27:13 +0000
Subject: [PATCH 3/3] Add changes to migration guide

---
 .../pages/guides/migration-v4/migration-v4.md | 84 ++++++++++++-------
 1 file changed, 53 insertions(+), 31 deletions(-)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index e29e48ebe720b5..bfff5eb3ac0875 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -378,6 +378,14 @@ const classes = makeStyles(theme => ({
   +<Button />
   ```
 
+  ### Chip
+
+- Rename `default` variant to `filled` for consistency.
+  ```diff
+  -<Chip variant="default">
+  +<Chip variant="filled">
+  ```
+
 ### CircularProgress
 
 - The `static` variant has been merged into the `determinate` variant, with the latter assuming the appearance of the former.
@@ -549,14 +557,6 @@ const classes = makeStyles(theme => ({
   +<Fab variant="circular">
   ```
 
-### Chip
-
-- Rename `default` variant to `filled` for consistency.
-  ```diff
-  -<Chip variant="default">
-  +<Chip variant="filled">
-  ```
-
 ### Grid
 
 - Rename `justify` prop with `justifyContent` to be aligned with the CSS property name.
@@ -576,29 +576,39 @@ const classes = makeStyles(theme => ({
 - Use CSS object-fit. For IE11 support either use a polyfill such as
   https://www.npmjs.com/package/object-fit-images, or continue to use the v4 component.
 
-```diff
--import GridList from '@material-ui/core/GridList';
--import GridListTile from '@material-ui/core/GridListTile';
--import GridListTileBar from '@material-ui/core/GridListTileBar';
-+import ImageList from '@material-ui/core/ImageList';
-+import ImageListItem from '@material-ui/core/ImageListItem';
-+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
-
--<GridList spacing={8} cellHeight={200}>
--  <GridListTile>
-+<ImageList gap={8} rowHeight={200}>
-+  <ImageListItem>
-     <img src="file.jpg" alt="Image title" />
--    <GridListTileBar
-+    <ImageListItemBar
-       title="Title"
-       subtitle="Subtitle"
-     />
--  </GridListTile>
--</GridList>
-+  </ImageListItem>
-+</ImageList>
-```
+  ```diff
+  -import GridList from '@material-ui/core/GridList';
+  -import GridListTile from '@material-ui/core/GridListTile';
+  -import GridListTileBar from '@material-ui/core/GridListTileBar';
+  +import ImageList from '@material-ui/core/ImageList';
+  +import ImageListItem from '@material-ui/core/ImageListItem';
+  +import ImageListItemBar from '@material-ui/core/ImageListItemBar';
+
+  -<GridList spacing={8} cellHeight={200}>
+  -  <GridListTile>
+  +<ImageList gap={8} rowHeight={200}>
+  +  <ImageListItem>
+      <img src="file.jpg" alt="Image title" />
+  -    <GridListTileBar
+  +    <ImageListItemBar
+        title="Title"
+        subtitle="Subtitle"
+      />
+  -  </GridListTile>
+  -</GridList>
+  +  </ImageListItem>
+  +</ImageList>
+  ```
+
+### Icon
+
+- The default value of `fontSize` was changed from `default` to `medium` for consistency.
+  In the unlikey event that you were using the value `default`, the prop can be removed:
+
+  ```diff
+  -<Icon fontSize="default">icon-name</Icon>
+  +<Icon>icon-name</Icon>
+  ```
 
 ### Menu
 
@@ -907,6 +917,18 @@ const classes = makeStyles(theme => ({
   +</Stepper>
   ```
 
+### SvgIcon
+
+- The default value of `fontSize` was changed from `default` to `medium` for consistency.
+  In the unlikey event that you were using the value `default`, the prop can be removed:
+
+  ```diff
+  -<SvgIcon fontSize="default">
+  +<SvgIcon>
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+  </SvgIcon>
+  ```
+
 ### Table
 
 - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.