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

Jump to bottom

[Icons] deprecate default value for fontSize in favor of medium #23951

Closed
wants to merge 4 commits into from
Closed

[Icons] deprecate default value for fontSize in favor of medium #23951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b2de808
[Icons] Change default fontSize from default to medium
mbrookes Dec 10, 2020
0981a86
Fix Radio
mbrookes Dec 10, 2020
98bafb7
add deprecation warning
mbrookes Dec 10, 2020
d813865
Apply suggestions from code review
mbrookes Dec 12, 2020
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
2 changes: 1 addition & 1 deletion docs/pages/api-docs/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ The `MuiIcon` name can be used for providing [default props](/customization/glob
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'action'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'disabled'</span> | <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">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
| <span class="prop-name">fontSize</span> | <span class="prop-type">'inherit'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;'large'</span> | <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">fontSize</span> | <span class="prop-type">'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |

The `ref` is forwarded to the root element.

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/svg-icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ The `MuiSvgIcon` name can be used for providing [default props](/customization/g
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <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 `htmlColor` prop to apply a color attribute to the SVG element. |
| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'svg'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
| <span class="prop-name">fontSize</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'small'</span> | <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">fontSize</span> | <span class="prop-type">'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
| <span class="prop-name">htmlColor</span> | <span class="prop-type">string</span> | | Applies a color attribute to the SVG element. |
| <span class="prop-name">shapeRendering</span> | <span class="prop-type">string</span> | | The shape-rendering attribute. The behavior of the different options is described on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). If you are having issues with blurry icons you should investigate this property. |
| <span class="prop-name">titleAccess</span> | <span class="prop-type">string</span> | | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Icon/Icon.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
props: P & {
color?: PropTypes.Color | 'action' | 'disabled' | 'error';
fontSize?: 'inherit' | 'default' | 'small' | 'large';
fontSize?: 'inherit' | 'large' | 'medium' | 'small';
};
defaultComponent: D;
classKey: IconClassKey;
Expand Down
19 changes: 15 additions & 4 deletions packages/material-ui/src/Icon/Icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import { chainPropTypes } from '@material-ui/utils';
import capitalize from '../utils/capitalize';
import withStyles from '../styles/withStyles';

export const styles = (theme) => ({
/* Styles applied to the root element. */
Expand Down Expand Up @@ -56,7 +57,7 @@ const Icon = React.forwardRef(function Icon(props, ref) {
className,
color = 'inherit',
component: Component = 'span',
fontSize = 'default',
fontSize = 'medium',
...other
} = props;

Expand All @@ -67,7 +68,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,
)}
Expand Down Expand Up @@ -104,7 +105,17 @@ Icon.propTypes = {
/**
* The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
*/
fontSize: PropTypes.oneOf(['inherit', 'default', 'small', 'large']),
fontSize: chainPropTypes(PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), (props) => {
const { fontSize } = props;

if (fontSize === 'default') {
throw new Error(
'Material-UI: `fontSize="default"` is deprecated. Use `fontSize="medium"` instead.',
);
}

return null;
}),
};

Icon.muiName = 'Icon';
Expand Down
4 changes: 2 additions & 2 deletions packages/material-ui/src/Radio/Radio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`]),
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Radio/RadioButtonIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,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);
2 changes: 1 addition & 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 @@ -15,7 +15,7 @@ export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
/**
* The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
*/
fontSize?: 'inherit' | 'default' | 'small' | 'large';
fontSize?: 'inherit' | 'large' | 'medium' | 'small';
Copy link
Member

Choose a reason for hiding this comment

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

If this is a deprecation, shouldn't we have both default and medium to allow migration? Otherwise, we are breaking the build with this change.

/**
* Applies a color attribute to the SVG element.
*/
Expand Down
20 changes: 16 additions & 4 deletions packages/material-ui/src/SvgIcon/SvgIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import { chainPropTypes } from '@material-ui/utils';
import capitalize from '../utils/capitalize';
import withStyles from '../styles/withStyles';

export const styles = (theme) => ({
/* Styles applied to the root element. */
Expand Down Expand Up @@ -59,7 +60,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',
Expand All @@ -72,7 +73,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,
)}
Expand Down Expand Up @@ -121,7 +122,18 @@ SvgIcon.propTypes = {
/**
* The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
*/
fontSize: PropTypes.oneOf(['default', 'inherit', 'large', 'small']),
fontSize: chainPropTypes(PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), (props) => {
const { fontSize } = props;

if (variant === 'default') {
throw new Error(
'Material-UI: `variant="default"` is deprecated. Use `variant="medium"` instead.',
);
}

return null;
}),

/**
* Applies a color attribute to the SVG element.
*/
Expand Down