Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Jun 26, 2018
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7735280
feat(icons): add a fontSize prop which accepts default and inherit
sakulstra Jun 26, 2018
d6746a6
add test
sakulstra Jun 26, 2018
8fc45fb
remove default Class
sakulstra Jun 26, 2018
f30f4ec
add fontSize to icon as well
sakulstra Jun 26, 2018
6bb2bf9
add test for icon as well
sakulstra Jun 26, 2018
1a9838f
regenerate api docs
sakulstra Jun 26, 2018
efabf06
increase size
sakulstra Jun 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/material-ui/src/SvgIcon/SvgIcon.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -15,7 +16,9 @@ export type SvgIconClassKey =
| 'colorAction'
| 'colorDisabled'
| 'colorError'
| 'colorPrimary';
| 'colorPrimary'
| 'fontSizeDefault'
| 'fontSizeInherit';

declare const SvgIcon: React.ComponentType<SvgIconProps>;

Expand Down
14 changes: 13 additions & 1 deletion packages/material-ui/src/SvgIcon/SvgIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -32,6 +31,12 @@ export const styles = theme => ({
colorDisabled: {
color: theme.palette.action.disabled,
},
fontSizeDefault: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it probably makes more sense to set this inside root and remove the whole fontSizeDefault class, does it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree 👍

fontSize: 24,
},
fontSizeInherit: {
fontSize: 'inherit',
},
});

function SvgIcon(props) {
Expand All @@ -40,6 +45,7 @@ function SvgIcon(props) {
classes,
className: classNameProp,
color,
fontSize,
nativeColor,
titleAccess,
viewBox,
Expand All @@ -48,6 +54,7 @@ function SvgIcon(props) {

const className = classNames(
classes.root,
classes[`fontSize${capitalize(fontSize)}`],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can be simplified following your previous comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you mean like we do with color or sth more static like: classes.fontSizeInherit: fontSize === 'inherit'?

{
[classes[`color${capitalize(color)}`]]: color !== 'inherit',
},
Expand Down Expand Up @@ -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.
*/
Expand All @@ -110,6 +121,7 @@ SvgIcon.propTypes = {
SvgIcon.defaultProps = {
color: 'inherit',
viewBox: '0 0 24 24',
fontSize: 'default',
};

SvgIcon.muiName = 'SvgIcon';
Expand Down
11 changes: 11 additions & 0 deletions packages/material-ui/src/SvgIcon/SvgIcon.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
);
});
});
});
3 changes: 3 additions & 0 deletions pages/api/svg-icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;'default', 'inherit'<br> | <span class="prop-default">'default'</span> | The fontSize of the component. It defaults to 24px. |
| <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. |
Expand All @@ -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)
Expand Down