[Icon][SvgIcon] Change default fontSize from default to medium

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",

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" } },

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.

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;
 }

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';

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)}`]),

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);

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.
  */

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.
  */