From 7735280bb26d688472c57d82945213cd084f583e Mon Sep 17 00:00:00 2001 From: lukas strassel Date: Tue, 26 Jun 2018 20:07:36 +0200 Subject: [PATCH 1/7] feat(icons): add a fontSize prop which accepts default and inherit --- packages/material-ui/src/SvgIcon/SvgIcon.d.ts | 5 ++++- packages/material-ui/src/SvgIcon/SvgIcon.js | 14 +++++++++++++- pages/api/svg-icon.md | 3 +++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts index c9e91ebc15f20d..add3f268172103 100644 --- 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, SvgIconClassKey> { color?: PropTypes.Color | 'action' | 'disabled' | 'error'; + fontSize?: 'inherit' | 'default'; nativeColor?: string; titleAccess?: string; viewBox?: string; @@ -15,7 +16,9 @@ export type SvgIconClassKey = | 'colorAction' | 'colorDisabled' | 'colorError' - | 'colorPrimary'; + | 'colorPrimary' + | 'fontSizeDefault' + | 'fontSizeInherit'; declare const SvgIcon: React.ComponentType; diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 7fa2cf113be69b..3bd889ff7d42ff 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -7,7 +7,6 @@ import { capitalize } from '../utils/helpers'; export const styles = theme => ({ root: { userSelect: 'none', - fontSize: 24, width: '1em', height: '1em', display: 'inline-block', @@ -32,6 +31,12 @@ export const styles = theme => ({ colorDisabled: { color: theme.palette.action.disabled, }, + fontSizeDefault: { + fontSize: 24 + }, + fontSizeInherit: { + fontSize: 'inherit' + }, }); function SvgIcon(props) { @@ -40,6 +45,7 @@ function SvgIcon(props) { classes, className: classNameProp, color, + fontSize, nativeColor, titleAccess, viewBox, @@ -48,6 +54,7 @@ function SvgIcon(props) { const className = classNames( classes.root, + classes[`fontSize${capitalize(fontSize)}`], { [classes[`color${capitalize(color)}`]]: color !== 'inherit', }, @@ -88,6 +95,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 +121,7 @@ SvgIcon.propTypes = { SvgIcon.defaultProps = { color: 'inherit', viewBox: '0 0 24 24', + fontSize: 'default' }; SvgIcon.muiName = 'SvgIcon'; diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md index 42d0872479b6b4..ec2fe898761dca 100644 --- a/pages/api/svg-icon.md +++ b/pages/api/svg-icon.md @@ -18,6 +18,7 @@ title: SvgIcon API | children * | node |   | Node passed into the SVG element. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'
| 'inherit' | 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. | +| fontSize | enum: 'default', 'inherit'
| 'default' | The fontSize of the component. It defaults to 24px. | | nativeColor | string |   | Applies a color attribute to the SVG element. | | titleAccess | string |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent | | viewBox | string | '0 0 24 24' | 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,8 @@ This property accepts the following keys: - `colorAction` - `colorError` - `colorDisabled` +- `fontSizeDefault` +- `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) From d6746a6a75a893a1197eda4cd03bb1b6f9a9a22e Mon Sep 17 00:00:00 2001 From: lukas strassel Date: Tue, 26 Jun 2018 20:17:50 +0200 Subject: [PATCH 2/7] add test --- packages/material-ui/src/SvgIcon/SvgIcon.js | 6 +++--- packages/material-ui/src/SvgIcon/SvgIcon.test.js | 11 +++++++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 3bd889ff7d42ff..b6390ea816c138 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -32,10 +32,10 @@ export const styles = theme => ({ color: theme.palette.action.disabled, }, fontSizeDefault: { - fontSize: 24 + fontSize: 24, }, fontSizeInherit: { - fontSize: 'inherit' + fontSize: 'inherit', }, }); @@ -121,7 +121,7 @@ SvgIcon.propTypes = { SvgIcon.defaultProps = { color: 'inherit', viewBox: '0 0 24 24', - fontSize: 'default' + 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 index 30ee60555230f2..781748ced2b421 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.test.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.test.js @@ -88,4 +88,15 @@ describe('', () => { ); }); }); + + describe('prop: fontSize', () => { + it('should be able to change the fontSize', () => { + const wrapper = shallow({path}); + assert.strictEqual( + wrapper.hasClass(classes.fontSizeInherit), + true, + 'should have fontSize "inherit', + ); + }); + }); }); From 8fc45fb618744fa15bd57668acec3a71f6b0d30a Mon Sep 17 00:00:00 2001 From: lukas strassel Date: Tue, 26 Jun 2018 20:41:06 +0200 Subject: [PATCH 3/7] remove default Class --- packages/material-ui/src/SvgIcon/SvgIcon.d.ts | 1 - packages/material-ui/src/SvgIcon/SvgIcon.js | 6 ++---- pages/api/svg-icon.md | 1 - 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts index add3f268172103..6b7235727d4b41 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts +++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts @@ -17,7 +17,6 @@ export type SvgIconClassKey = | 'colorDisabled' | 'colorError' | 'colorPrimary' - | 'fontSizeDefault' | 'fontSizeInherit'; declare const SvgIcon: React.ComponentType; diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index b6390ea816c138..3582d161afb973 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -12,6 +12,7 @@ export const styles = theme => ({ display: 'inline-block', fill: 'currentColor', flexShrink: 0, + fontSize: 24, transition: theme.transitions.create('fill', { duration: theme.transitions.duration.shorter, }), @@ -31,9 +32,6 @@ export const styles = theme => ({ colorDisabled: { color: theme.palette.action.disabled, }, - fontSizeDefault: { - fontSize: 24, - }, fontSizeInherit: { fontSize: 'inherit', }, @@ -54,8 +52,8 @@ function SvgIcon(props) { const className = classNames( classes.root, - classes[`fontSize${capitalize(fontSize)}`], { + [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'default', [classes[`color${capitalize(color)}`]]: color !== 'inherit', }, classNameProp, diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md index ec2fe898761dca..cf0b6ccb1a9b4f 100644 --- a/pages/api/svg-icon.md +++ b/pages/api/svg-icon.md @@ -35,7 +35,6 @@ This property accepts the following keys: - `colorAction` - `colorError` - `colorDisabled` -- `fontSizeDefault` - `fontSizeInherit` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section From f30f4ecde14af0f2e8eacc8909bce2895edea0d6 Mon Sep 17 00:00:00 2001 From: lukas strassel Date: Tue, 26 Jun 2018 22:20:09 +0200 Subject: [PATCH 4/7] add fontSize to icon as well --- packages/material-ui/src/Icon/Icon.d.ts | 4 +++- packages/material-ui/src/Icon/Icon.js | 11 ++++++++++- pages/api/icon.md | 1 + 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts index 4937e093cd1cd8..dfcfa8a6e4a730 100644 --- 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, 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; diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js index 256f63b1b81567..7c5f6324979414 100644 --- 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 ( children | node |   | The name of the icon font ligature. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'
| 'inherit' | The color of the component. It supports those theme colors that make sense for this component. | +| fontSize | enum: 'default', 'inherit'
| 'default' | The fontSize of the component. It defaults to 24px. | Any other properties supplied will be spread to the root element (native element). From 6bb2bf9829c41f29c5483fe895b078a4b346f98c Mon Sep 17 00:00:00 2001 From: lukas strassel Date: Tue, 26 Jun 2018 22:22:22 +0200 Subject: [PATCH 5/7] add test for icon as well --- packages/material-ui/src/Icon/Icon.test.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/material-ui/src/Icon/Icon.test.js b/packages/material-ui/src/Icon/Icon.test.js index 734f6cb4699136..3446faeea7887e 100644 --- a/packages/material-ui/src/Icon/Icon.test.js +++ b/packages/material-ui/src/Icon/Icon.test.js @@ -66,4 +66,15 @@ describe('', () => { ); }); }); + + describe('prop: fontSize', () => { + it('should be able to change the fontSize', () => { + const wrapper = shallow(account_circle); + assert.strictEqual( + wrapper.hasClass(classes.fontSizeInherit), + true, + 'should have fontSize "inherit', + ); + }); + }); }); From 1a9838f3fbf8e1ff52d700f0fc06754844d11bf0 Mon Sep 17 00:00:00 2001 From: lukas strassel Date: Tue, 26 Jun 2018 22:36:01 +0200 Subject: [PATCH 6/7] regenerate api docs --- pages/api/icon.md | 3 ++- pages/api/svg-icon.md | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/pages/api/icon.md b/pages/api/icon.md index e381c9f942cc53..f0bb4c10c41183 100644 --- a/pages/api/icon.md +++ b/pages/api/icon.md @@ -18,7 +18,7 @@ title: Icon API | children | node |   | The name of the icon font ligature. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'
| 'inherit' | The color of the component. It supports those theme colors that make sense for this component. | -| fontSize | enum: 'default', 'inherit'
| 'default' | The fontSize of the component. It defaults to 24px. | +| fontSize | enum: 'inherit' |
 'default'
| 'default' | 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). @@ -32,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 index cf0b6ccb1a9b4f..d39a18eadee1b3 100644 --- a/pages/api/svg-icon.md +++ b/pages/api/svg-icon.md @@ -18,7 +18,7 @@ title: SvgIcon API | children * | node |   | Node passed into the SVG element. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'
| 'inherit' | 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. | -| fontSize | enum: 'default', 'inherit'
| 'default' | The fontSize of the component. It defaults to 24px. | +| fontSize | enum: 'inherit' |
 'default'
| 'default' | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. | | nativeColor | string |   | Applies a color attribute to the SVG element. | | titleAccess | string |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent | | viewBox | string | '0 0 24 24' | 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. | From efabf0640687170af58a1ead380467365ff676d1 Mon Sep 17 00:00:00 2001 From: lukas strassel Date: Tue, 26 Jun 2018 22:46:15 +0200 Subject: [PATCH 7/7] increase size increase size by 0.1kb --- .size-limit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.size-limit.js b/.size-limit.js index 2bb652af3e085e..16d63b7b2b7444 100644 --- 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',