[Icon] Add a fontSize prop which accepts default and inherit (mui#11986)

* feat(icons): add a fontSize prop which accepts default and inherit * add test * remove default Class * add fontSize to icon as well * add test for icon as well * regenerate api docs * increase size increase size by 0.1kb
acroyear · Jul 14, 2018 · 5b12548 · 5b12548
1 parent 19264de
commit 5b12548
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 5 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.7 KB',
+    limit: '94.8 KB',
   },
   {
     name: 'The main bundle of the docs',

diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts
@@ -4,6 +4,7 @@ import { StandardProps, PropTypes } from '..';
 export interface IconProps
   extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, IconClassKey> {
   color?: PropTypes.Color | 'action' | 'disabled' | 'error';
+  fontSize?: 'inherit' | 'default';
 }
 
 export type IconClassKey =
@@ -12,7 +13,8 @@ export type IconClassKey =
   | 'colorAction'
   | 'colorDisabled'
   | 'colorError'
-  | 'colorPrimary';
+  | 'colorPrimary'
+  | 'fontSizeInherit';
 
 declare const Icon: React.ComponentType<IconProps>;
 

diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js
@@ -30,10 +30,13 @@ export const styles = theme => ({
   colorDisabled: {
     color: theme.palette.action.disabled,
   },
+  fontSizeInherit: {
+    fontSize: 'inherit',
+  },
 });
 
 function Icon(props) {
-  const { children, classes, className, color, ...other } = props;
+  const { children, classes, className, color, fontSize, ...other } = props;
 
   return (
     <span
@@ -42,6 +45,7 @@ function Icon(props) {
         classes.root,
         {
           [classes[`color${capitalize(color)}`]]: color !== 'inherit',
+          [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'default',
         },
         className,
       )}
@@ -71,10 +75,15 @@ Icon.propTypes = {
    * The color of the component. It supports those theme colors that make sense for this component.
    */
   color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   */
+  fontSize: PropTypes.oneOf(['inherit', 'default']),
 };
 
 Icon.defaultProps = {
   color: 'inherit',
+  fontSize: 'default',
 };
 
 Icon.muiName = 'Icon';

diff --git a/packages/material-ui/src/Icon/Icon.test.js b/packages/material-ui/src/Icon/Icon.test.js
@@ -66,4 +66,15 @@ describe('<Icon />', () => {
       );
     });
   });
+
+  describe('prop: fontSize', () => {
+    it('should be able to change the fontSize', () => {
+      const wrapper = shallow(<Icon fontSize="inherit">account_circle</Icon>);
+      assert.strictEqual(
+        wrapper.hasClass(classes.fontSizeInherit),
+        true,
+        'should have fontSize "inherit',
+      );
+    });
+  });
 });
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts
@@ -4,6 +4,7 @@ import { StandardProps, PropTypes } from '..';
 export interface SvgIconProps
   extends StandardProps<React.SVGProps<SVGSVGElement>, SvgIconClassKey> {
   color?: PropTypes.Color | 'action' | 'disabled' | 'error';
+  fontSize?: 'inherit' | 'default';
   nativeColor?: string;
   titleAccess?: string;
   viewBox?: string;
@@ -15,7 +16,8 @@ export type SvgIconClassKey =
   | 'colorAction'
   | 'colorDisabled'
   | 'colorError'
-  | 'colorPrimary';
+  | 'colorPrimary'
+  | 'fontSizeInherit';
 
 declare const SvgIcon: React.ComponentType<SvgIconProps>;
 

diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -7,12 +7,12 @@ import { capitalize } from '../utils/helpers';
 export const styles = theme => ({
   root: {
     userSelect: 'none',
-    fontSize: 24,
     width: '1em',
     height: '1em',
     display: 'inline-block',
     fill: 'currentColor',
     flexShrink: 0,
+    fontSize: 24,
     transition: theme.transitions.create('fill', {
       duration: theme.transitions.duration.shorter,
     }),
@@ -32,6 +32,9 @@ export const styles = theme => ({
   colorDisabled: {
     color: theme.palette.action.disabled,
   },
+  fontSizeInherit: {
+    fontSize: 'inherit',
+  },
 });
 
 function SvgIcon(props) {
@@ -40,6 +43,7 @@ function SvgIcon(props) {
     classes,
     className: classNameProp,
     color,
+    fontSize,
     nativeColor,
     titleAccess,
     viewBox,
@@ -49,6 +53,7 @@ function SvgIcon(props) {
   const className = classNames(
     classes.root,
     {
+      [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'default',
       [classes[`color${capitalize(color)}`]]: color !== 'inherit',
     },
     classNameProp,
@@ -88,6 +93,10 @@ SvgIcon.propTypes = {
    * You can use the `nativeColor` property to apply a color attribute to the SVG element.
    */
   color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   */
+  fontSize: PropTypes.oneOf(['inherit', 'default']),
   /**
    * Applies a color attribute to the SVG element.
    */
@@ -110,6 +119,7 @@ SvgIcon.propTypes = {
 SvgIcon.defaultProps = {
   color: 'inherit',
   viewBox: '0 0 24 24',
+  fontSize: 'default',
 };
 
 SvgIcon.muiName = 'SvgIcon';

diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.test.js b/packages/material-ui/src/SvgIcon/SvgIcon.test.js
@@ -88,4 +88,15 @@ describe('<SvgIcon />', () => {
       );
     });
   });
+
+  describe('prop: fontSize', () => {
+    it('should be able to change the fontSize', () => {
+      const wrapper = shallow(<SvgIcon fontSize="inherit">{path}</SvgIcon>);
+      assert.strictEqual(
+        wrapper.hasClass(classes.fontSizeInherit),
+        true,
+        'should have fontSize "inherit',
+      );
+    });
+  });
 });
diff --git a/pages/api/icon.md b/pages/api/icon.md
@@ -18,6 +18,7 @@ title: Icon API
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The name of the icon font ligature. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'<br> | <span class="prop-default">'default'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
 
 Any other properties supplied will be spread to the root element (native element).
 
@@ -31,6 +32,7 @@ This property accepts the following keys:
 - `colorAction`
 - `colorError`
 - `colorDisabled`
+- `fontSizeInherit`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Icon/Icon.js)

diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md
@@ -18,6 +18,7 @@ title: SvgIcon API
 | <span class="prop-name required">children *</span> | <span class="prop-type">node |   | Node passed into the SVG element. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. You can use the `nativeColor` property to apply a color attribute to the SVG element. |
+| <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'<br> | <span class="prop-default">'default'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
 | <span class="prop-name">nativeColor</span> | <span class="prop-type">string |   | Applies a color attribute to the SVG element. |
 | <span class="prop-name">titleAccess</span> | <span class="prop-type">string |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |
 | <span class="prop-name">viewBox</span> | <span class="prop-type">string | <span class="prop-default">'0 0 24 24'</span> | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |
@@ -34,6 +35,7 @@ This property accepts the following keys:
 - `colorAction`
 - `colorError`
 - `colorDisabled`
+- `fontSizeInherit`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/SvgIcon/SvgIcon.js)