From 95fc3b77b7152ce4dfa86813259c33e0cb7f530d Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Thu, 21 Jan 2021 20:13:33 -0800 Subject: [PATCH 01/16] [IconButton] Migrate to emotion --- docs/pages/api-docs/icon-button.json | 5 +- .../api-docs/icon-button/icon-button.json | 3 +- .../src/IconButton/IconButton.d.ts | 8 +- .../material-ui/src/IconButton/IconButton.js | 180 +++++++++++------- .../src/IconButton/IconButton.test.js | 26 +-- .../src/IconButton/iconButtonClasses.d.ts | 17 ++ .../src/IconButton/iconButtonClasses.js | 19 ++ .../material-ui/src/IconButton/index.d.ts | 3 + packages/material-ui/src/IconButton/index.js | 3 + 9 files changed, 174 insertions(+), 90 deletions(-) create mode 100644 packages/material-ui/src/IconButton/iconButtonClasses.d.ts create mode 100644 packages/material-ui/src/IconButton/iconButtonClasses.js diff --git a/docs/pages/api-docs/icon-button.json b/docs/pages/api-docs/icon-button.json index 1bc67c034b8109..8092039c153db0 100644 --- a/docs/pages/api-docs/icon-button.json +++ b/docs/pages/api-docs/icon-button.json @@ -22,7 +22,8 @@ "size": { "type": { "name": "enum", "description": "'medium'
| 'small'" }, "default": "'medium'" - } + }, + "sx": { "type": { "name": "object" } } }, "name": "IconButton", "styles": { @@ -45,6 +46,6 @@ "filename": "/packages/material-ui/src/IconButton/IconButton.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json index c0f3dfce888fb8..55bf8da7da0fce 100644 --- a/docs/translations/api-docs/icon-button/icon-button.json +++ b/docs/translations/api-docs/icon-button/icon-button.json @@ -8,7 +8,8 @@ "disableFocusRipple": "If true, the keyboard focus ripple is disabled.", "disableRipple": "If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusedVisible class.", "edge": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).", - "size": "The size of the component. small is equivalent to the dense button styling." + "size": "The size of the component. small is equivalent to the dense button styling.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts index e3193b624dee27..081203a9aa0ae4 100644 --- a/packages/material-ui/src/IconButton/IconButton.d.ts +++ b/packages/material-ui/src/IconButton/IconButton.d.ts @@ -1,4 +1,6 @@ -import { PropTypes } from '..'; +import * as React from 'react'; +import { SxProps } from '@material-ui/system'; +import { PropTypes, Theme } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; @@ -63,6 +65,10 @@ export type IconButtonTypeMap< * @default 'medium' */ size?: 'small' | 'medium'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; }; defaultComponent: D; }>; diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index c4f9b1e3f85cd2..cb5a145f7b508c 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -1,57 +1,90 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { chainPropTypes } from '@material-ui/utils'; -import withStyles from '../styles/withStyles'; +import { chainPropTypes, deepmerge } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import experimentalStyled from '../styles/experimentalStyled'; +import useThemeProps from '../styles/useThemeProps'; import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; +import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; -export const styles = (theme) => ({ +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...(styleProps.disabled && styles.disabled), + ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), + ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]), + ...(styleProps.size === 'small' && styles.sizeSmall), + [`& .${iconButtonClasses.label}`]: styles.label, + }); +}; + +const useUtilityClasses = (styleProps) => { + const { classes, disabled, color, edge, size } = styleProps; + + const slots = { + root: [ + 'root', + disabled && 'disabled', + color !== 'default' && `color${capitalize(color)}`, + edge && `edge${capitalize(edge)}`, + size === 'small' && 'sizeSmall', + ], + label: ['label'], + }; + + return composeClasses(slots, getIconButtonUtilityClass, classes); +}; + +const IconButtonRoot = experimentalStyled( + ButtonBase, + {}, + { + name: 'MuiIconButton', + slot: 'Root', + overridesResolver, + }, +)(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ - root: { - textAlign: 'center', - flex: '0 0 auto', - fontSize: theme.typography.pxToRem(24), - padding: 12, - borderRadius: '50%', - overflow: 'visible', // Explicitly set the default value to solve a bug on IE11. - color: theme.palette.action.active, - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shortest, - }), - '&:hover': { - backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, - '&$disabled': { + textAlign: 'center', + flex: '0 0 auto', + fontSize: theme.typography.pxToRem(24), + padding: 12, + borderRadius: '50%', + overflow: 'visible', // Explicitly set the default value to solve a bug on IE11. + color: theme.palette.action.active, + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shortest, + }), + '&:hover': { + backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { backgroundColor: 'transparent', - color: theme.palette.action.disabled, }, }, + /* Styles applied to the root element if `disabled={true}`. */ + ...(styleProps.disabled && { + backgroundColor: 'transparent', + color: theme.palette.action.disabled, + }), /* Styles applied to the root element if `edge="start"`. */ - edgeStart: { - marginLeft: -12, - '$sizeSmall&': { - marginLeft: -3, - }, - }, + ...(styleProps.edge === 'start' && { + marginLeft: styleProps.size === 'small' ? -3 : -12, + }), /* Styles applied to the root element if `edge="end"`. */ - edgeEnd: { - marginRight: -12, - '$sizeSmall&': { - marginRight: -3, - }, - }, + ...(styleProps.edge === 'end' && { + marginRight: styleProps.size === 'small' ? -3 : -12, + }), /* Styles applied to the root element if `color="inherit"`. */ - colorInherit: { + ...(styleProps.color === 'inherit' && { color: 'inherit', - }, + }), /* Styles applied to the root element if `color="primary"`. */ - colorPrimary: { + ...(styleProps.color === 'primary' && { color: theme.palette.primary.main, '&:hover': { backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), @@ -60,9 +93,9 @@ export const styles = (theme) => ({ backgroundColor: 'transparent', }, }, - }, + }), /* Styles applied to the root element if `color="secondary"`. */ - colorSecondary: { + ...(styleProps.color === 'secondary' && { color: theme.palette.secondary.main, '&:hover': { backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), @@ -71,32 +104,38 @@ export const styles = (theme) => ({ backgroundColor: 'transparent', }, }, - }, - /* Pseudo-class applied to the root element if `disabled={true}`. */ - disabled: {}, + }), /* Styles applied to the root element if `size="small"`. */ - sizeSmall: { + ...(styleProps.size === 'small' && { padding: 3, fontSize: theme.typography.pxToRem(18), + }), +})); + +const IconButtonLabel = experimentalStyled( + 'span', + {}, + { + name: 'MuiIconButton', + slot: 'Label', }, +)({ /* Styles applied to the children container element. */ - label: { - width: '100%', - display: 'flex', - alignItems: 'inherit', - justifyContent: 'inherit', - }, + width: '100%', + display: 'flex', + alignItems: 'inherit', + justifyContent: 'inherit', }); /** * Refer to the [Icons](/components/icons/) section of the documentation * regarding the available icon options. */ -const IconButton = React.forwardRef(function IconButton(props, ref) { +const IconButton = React.forwardRef(function IconButton(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiIconButton' }); const { edge = false, children, - classes, className, color = 'default', disabled = false, @@ -105,27 +144,30 @@ const IconButton = React.forwardRef(function IconButton(props, ref) { ...other } = props; + const styleProps = { + ...props, + edge, + color, + disabled, + size, + }; + + const classes = useUtilityClasses(styleProps); + return ( - - {children} - + + {children} + + ); }); @@ -199,6 +241,10 @@ IconButton.propTypes = { * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiIconButton' })(IconButton); +export default IconButton; diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js index 6e99ca8ca7e9a2..1443316bebec24 100644 --- a/packages/material-ui/src/IconButton/IconButton.test.js +++ b/packages/material-ui/src/IconButton/IconButton.test.js @@ -1,26 +1,25 @@ import * as React from 'react'; import { expect } from 'chai'; import PropTypes from 'prop-types'; -import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils'; +import { createMount, createClientRender, describeConformanceV5 } from 'test/utils'; import Icon from '../Icon'; import ButtonBase from '../ButtonBase'; import IconButton from './IconButton'; +import classes from './iconButtonClasses'; describe('', () => { - let classes; const mount = createMount(); const render = createClientRender({ strict: false }); - before(() => { - classes = getClasses(); - }); - - describeConformance(book, () => ({ + describeConformanceV5(book, () => ({ classes, inheritComponent: ButtonBase, mount, refInstanceof: window.HTMLButtonElement, - skip: ['componentProp'], + muiName: 'MuiIconButton', + testVariantProps: { edge: 'end', disabled: true }, + testDeepOverrides: { slotName: 'label', slotClassName: classes.label }, + skip: ['componentProp', 'componentsProp'], })); it('should render an inner label span (bloody safari)', () => { @@ -104,15 +103,4 @@ describe('', () => { expect(button).to.have.class(classes.disabled); }); }); - - it('should raise a warning about onClick in children because of Firefox', () => { - expect(() => { - PropTypes.checkPropTypes( - IconButton.Naked.propTypes, - { classes: {}, children: {}} /> }, - 'prop', - 'MockedName', - ); - }).toErrorDev(['Material-UI: You are providing an onClick event listener']); - }); }); diff --git a/packages/material-ui/src/IconButton/iconButtonClasses.d.ts b/packages/material-ui/src/IconButton/iconButtonClasses.d.ts new file mode 100644 index 00000000000000..a38e6761f26aa4 --- /dev/null +++ b/packages/material-ui/src/IconButton/iconButtonClasses.d.ts @@ -0,0 +1,17 @@ +export interface IconButtonClasses { + root: string; + disabled: string; + colorInherit: string; + colorPrimary: string; + colorSecondary: string; + edgeStart: string; + edgeEnd: string; + sizeSmall: string; + label: string; +} + +declare const iconButtonClasses: IconButtonClasses; + +export function getIconButtonUtilityClass(slot: string): string; + +export default iconButtonClasses; diff --git a/packages/material-ui/src/IconButton/iconButtonClasses.js b/packages/material-ui/src/IconButton/iconButtonClasses.js new file mode 100644 index 00000000000000..982923dbcf7b80 --- /dev/null +++ b/packages/material-ui/src/IconButton/iconButtonClasses.js @@ -0,0 +1,19 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getIconButtonUtilityClass(slot) { + return generateUtilityClass('MuiIconButton', slot); +} + +const iconButtonClasses = generateUtilityClasses('MuiIconButton', [ + 'root', + 'disabled', + 'colorInherit', + 'colorPrimary', + 'colorSecondary', + 'edgeStart', + 'edgeEnd', + 'sizeSmall', + 'label', +]); + +export default iconButtonClasses; diff --git a/packages/material-ui/src/IconButton/index.d.ts b/packages/material-ui/src/IconButton/index.d.ts index 655ec4c48891c5..aecf12553a0334 100644 --- a/packages/material-ui/src/IconButton/index.d.ts +++ b/packages/material-ui/src/IconButton/index.d.ts @@ -1,2 +1,5 @@ export { default } from './IconButton'; export * from './IconButton'; + +export { default as iconButtonClasses } from './iconButtonClasses'; +export * from './iconButtonClasses'; diff --git a/packages/material-ui/src/IconButton/index.js b/packages/material-ui/src/IconButton/index.js index 86c5e513af24dd..115058c9d6a9f6 100644 --- a/packages/material-ui/src/IconButton/index.js +++ b/packages/material-ui/src/IconButton/index.js @@ -1 +1,4 @@ export { default } from './IconButton'; + +export { default as iconButtonClasses } from './iconButtonClasses'; +export * from './iconButtonClasses'; From 8f8020526a06f0199f16b7d95858a8078c306fd6 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Thu, 21 Jan 2021 20:21:41 -0800 Subject: [PATCH 02/16] Resolve framer issues --- framer/scripts/framerConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 333d914aa40920..f1a893d0dda255 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -186,7 +186,7 @@ export const componentSettings = { template: 'icon.txt', }, IconButton: { - ignoredProps: ['children', 'edge', 'disableRipple', 'disableFocusRipple'], + ignoredProps: ['children', 'edge', 'disableRipple', 'disableFocusRipple', 'sx'], propValues: { icon: "'favorite'", iconTheme: 'Filled', From 5956966cd3f8a691d18cd1c13d7494b394b3001d Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Thu, 21 Jan 2021 21:43:18 -0800 Subject: [PATCH 03/16] Remove unused variables --- packages/material-ui/src/IconButton/IconButton.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js index 1443316bebec24..8d56a203a548b2 100644 --- a/packages/material-ui/src/IconButton/IconButton.test.js +++ b/packages/material-ui/src/IconButton/IconButton.test.js @@ -1,6 +1,5 @@ import * as React from 'react'; import { expect } from 'chai'; -import PropTypes from 'prop-types'; import { createMount, createClientRender, describeConformanceV5 } from 'test/utils'; import Icon from '../Icon'; import ButtonBase from '../ButtonBase'; From 8cfde743a847843f87cbe621023dbccf2f66b876 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Thu, 21 Jan 2021 22:20:37 -0800 Subject: [PATCH 04/16] Resolve theme overrides issue --- .../material-ui/src/IconButton/IconButton.js | 114 +++++++++--------- 1 file changed, 59 insertions(+), 55 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index cb5a145f7b508c..4ee8b85dca0364 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -47,70 +47,74 @@ const IconButtonRoot = experimentalStyled( slot: 'Root', overridesResolver, }, -)(({ theme, styleProps }) => ({ - /* Styles applied to the root element. */ - textAlign: 'center', - flex: '0 0 auto', - fontSize: theme.typography.pxToRem(24), - padding: 12, - borderRadius: '50%', - overflow: 'visible', // Explicitly set the default value to solve a bug on IE11. - color: theme.palette.action.active, - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shortest, - }), - '&:hover': { - backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, - /* Styles applied to the root element if `disabled={true}`. */ - ...(styleProps.disabled && { - backgroundColor: 'transparent', - color: theme.palette.action.disabled, - }), - /* Styles applied to the root element if `edge="start"`. */ - ...(styleProps.edge === 'start' && { - marginLeft: styleProps.size === 'small' ? -3 : -12, - }), - /* Styles applied to the root element if `edge="end"`. */ - ...(styleProps.edge === 'end' && { - marginRight: styleProps.size === 'small' ? -3 : -12, - }), - /* Styles applied to the root element if `color="inherit"`. */ - ...(styleProps.color === 'inherit' && { - color: 'inherit', - }), - /* Styles applied to the root element if `color="primary"`. */ - ...(styleProps.color === 'primary' && { - color: theme.palette.primary.main, +)( + ({ theme, styleProps }) => ({ + /* Styles applied to the root element. */ + textAlign: 'center', + flex: '0 0 auto', + fontSize: theme.typography.pxToRem(24), + padding: 12, + borderRadius: '50%', + overflow: 'visible', // Explicitly set the default value to solve a bug on IE11. + color: theme.palette.action.active, + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shortest, + }), '&:hover': { - backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', }, }, - }), - /* Styles applied to the root element if `color="secondary"`. */ - ...(styleProps.color === 'secondary' && { - color: theme.palette.secondary.main, - '&:hover': { - backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', + /* Styles applied to the root element if `edge="start"`. */ + ...(styleProps.edge === 'start' && { + marginLeft: styleProps.size === 'small' ? -3 : -12, + }), + /* Styles applied to the root element if `edge="end"`. */ + ...(styleProps.edge === 'end' && { + marginRight: styleProps.size === 'small' ? -3 : -12, + }), + /* Styles applied to the root element if `color="inherit"`. */ + ...(styleProps.color === 'inherit' && { + color: 'inherit', + }), + /* Styles applied to the root element if `color="primary"`. */ + ...(styleProps.color === 'primary' && { + color: theme.palette.primary.main, + '&:hover': { + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, - }, + }), + /* Styles applied to the root element if `color="secondary"`. */ + ...(styleProps.color === 'secondary' && { + color: theme.palette.secondary.main, + '&:hover': { + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + }), + /* Styles applied to the root element if `size="small"`. */ + ...(styleProps.size === 'small' && { + padding: 3, + fontSize: theme.typography.pxToRem(18), + }), }), - /* Styles applied to the root element if `size="small"`. */ - ...(styleProps.size === 'small' && { - padding: 3, - fontSize: theme.typography.pxToRem(18), + ({ theme, styleProps }) => ({ + /* Styles applied to the root element if `disabled={true}`. */ + ...(styleProps.disabled && { + backgroundColor: 'transparent', + color: theme.palette.action.disabled, + }), }), -})); +); const IconButtonLabel = experimentalStyled( 'span', From 6f62810cbecb6e189ef635ff6a29c7550357b0e7 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 08:30:47 -0800 Subject: [PATCH 05/16] Apply suggestions from code review Co-authored-by: Marija Najdova --- packages/material-ui/src/IconButton/IconButton.js | 10 +++++----- .../material-ui/src/IconButton/IconButton.test.js | 12 ++++++++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 4ee8b85dca0364..05718ba4522bd5 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -14,10 +14,9 @@ const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root || {}, { - ...(styleProps.disabled && styles.disabled), ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]), - ...(styleProps.size === 'small' && styles.sizeSmall), + styles[`size${capitalize(styleProps.size)}`], [`& .${iconButtonClasses.label}`]: styles.label, }); }; @@ -31,7 +30,7 @@ const useUtilityClasses = (styleProps) => { disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, - size === 'small' && 'sizeSmall', + `size${capitalize(size)}` ], label: ['label'], }; @@ -109,10 +108,10 @@ const IconButtonRoot = experimentalStyled( }), ({ theme, styleProps }) => ({ /* Styles applied to the root element if `disabled={true}`. */ - ...(styleProps.disabled && { + [`&.${iconButtonClasses.disabled}`]: { backgroundColor: 'transparent', color: theme.palette.action.disabled, - }), + }, }), ); @@ -153,6 +152,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { edge, color, disabled, + disableFocusRipple, size, }; diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js index 8d56a203a548b2..4fc13a1320155f 100644 --- a/packages/material-ui/src/IconButton/IconButton.test.js +++ b/packages/material-ui/src/IconButton/IconButton.test.js @@ -1,5 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; +import PropTypes from 'prop-types'; import { createMount, createClientRender, describeConformanceV5 } from 'test/utils'; import Icon from '../Icon'; import ButtonBase from '../ButtonBase'; @@ -102,4 +103,15 @@ describe('', () => { expect(button).to.have.class(classes.disabled); }); }); + + it('should raise a warning about onClick in children because of Firefox', () => { + expect(() => { + PropTypes.checkPropTypes( + IconButton.propTypes, + { classes: {}, children: {}} /> }, + 'prop', + 'MockedName', + ); + }).toErrorDev(['Material-UI: You are providing an onClick event listener']); + }); }); From 6005226a2dddf30f0881e3b97d6fc49f1fa3a2c2 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 08:32:45 -0800 Subject: [PATCH 06/16] Spread size$ styles --- packages/material-ui/src/IconButton/IconButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 05718ba4522bd5..913e5cfbef165c 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -16,7 +16,7 @@ const overridesResolver = (props, styles) => { return deepmerge(styles.root || {}, { ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]), - styles[`size${capitalize(styleProps.size)}`], + ...styles[`size${capitalize(styleProps.size)}`], [`& .${iconButtonClasses.label}`]: styles.label, }); }; From d78d4b9a2ca5fb747850a4729fd345a2f2c21d3e Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 08:33:06 -0800 Subject: [PATCH 07/16] Make all style overrides individual callbacks --- packages/material-ui/src/IconButton/IconButton.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 913e5cfbef165c..c0d5b0e6719237 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -66,6 +66,8 @@ const IconButtonRoot = experimentalStyled( backgroundColor: 'transparent', }, }, + }), + ({ theme, styleProps }) => ({ /* Styles applied to the root element if `edge="start"`. */ ...(styleProps.edge === 'start' && { marginLeft: styleProps.size === 'small' ? -3 : -12, @@ -74,6 +76,8 @@ const IconButtonRoot = experimentalStyled( ...(styleProps.edge === 'end' && { marginRight: styleProps.size === 'small' ? -3 : -12, }), + }), + ({ theme, styleProps }) => ({ /* Styles applied to the root element if `color="inherit"`. */ ...(styleProps.color === 'inherit' && { color: 'inherit', @@ -100,6 +104,8 @@ const IconButtonRoot = experimentalStyled( }, }, }), + }), + ({ theme, styleProps }) => ({ /* Styles applied to the root element if `size="small"`. */ ...(styleProps.size === 'small' && { padding: 3, From 98924e0c2da5e76878315ce1c5f4e8f202869f11 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 08:33:22 -0800 Subject: [PATCH 08/16] Prettier format file --- packages/material-ui/src/IconButton/IconButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index c0d5b0e6719237..574758a25498e4 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -30,7 +30,7 @@ const useUtilityClasses = (styleProps) => { disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, - `size${capitalize(size)}` + `size${capitalize(size)}`, ], label: ['label'], }; From fe7731f3997ba665a6cbfaab4bafaf57f9f5bc11 Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 08:34:42 -0800 Subject: [PATCH 09/16] Remove unused variables --- packages/material-ui/src/IconButton/IconButton.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 574758a25498e4..3eacac7258bb27 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -47,7 +47,7 @@ const IconButtonRoot = experimentalStyled( overridesResolver, }, )( - ({ theme, styleProps }) => ({ + ({ theme }) => ({ /* Styles applied to the root element. */ textAlign: 'center', flex: '0 0 auto', @@ -67,7 +67,7 @@ const IconButtonRoot = experimentalStyled( }, }, }), - ({ theme, styleProps }) => ({ + ({ styleProps }) => ({ /* Styles applied to the root element if `edge="start"`. */ ...(styleProps.edge === 'start' && { marginLeft: styleProps.size === 'small' ? -3 : -12, @@ -112,7 +112,7 @@ const IconButtonRoot = experimentalStyled( fontSize: theme.typography.pxToRem(18), }), }), - ({ theme, styleProps }) => ({ + ({ theme }) => ({ /* Styles applied to the root element if `disabled={true}`. */ [`&.${iconButtonClasses.disabled}`]: { backgroundColor: 'transparent', From f8953ddced11b2cb00e3b6899c9396b97d3801c6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 22 Jan 2021 17:55:58 +0100 Subject: [PATCH 10/16] Update packages/material-ui/src/IconButton/iconButtonClasses.d.ts --- packages/material-ui/src/IconButton/iconButtonClasses.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/IconButton/iconButtonClasses.d.ts b/packages/material-ui/src/IconButton/iconButtonClasses.d.ts index a38e6761f26aa4..6ef2e97a86af05 100644 --- a/packages/material-ui/src/IconButton/iconButtonClasses.d.ts +++ b/packages/material-ui/src/IconButton/iconButtonClasses.d.ts @@ -7,6 +7,7 @@ export interface IconButtonClasses { edgeStart: string; edgeEnd: string; sizeSmall: string; + sizeMedium: string; label: string; } From c6836ac52c3e6fa8c51092b1404c0f825a86a2c5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 22 Jan 2021 17:56:09 +0100 Subject: [PATCH 11/16] Update packages/material-ui/src/IconButton/iconButtonClasses.js --- packages/material-ui/src/IconButton/iconButtonClasses.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/IconButton/iconButtonClasses.js b/packages/material-ui/src/IconButton/iconButtonClasses.js index 982923dbcf7b80..d60651f8984fc0 100644 --- a/packages/material-ui/src/IconButton/iconButtonClasses.js +++ b/packages/material-ui/src/IconButton/iconButtonClasses.js @@ -13,6 +13,7 @@ const iconButtonClasses = generateUtilityClasses('MuiIconButton', [ 'edgeStart', 'edgeEnd', 'sizeSmall', + 'sizeMedium', 'label', ]); From 9d9f2dbdd6f3856a7c3c53c6009cab96d5c23d3c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 22 Jan 2021 17:57:31 +0100 Subject: [PATCH 12/16] Update packages/material-ui/src/IconButton/IconButton.test.js --- .../src/IconButton/IconButton.test.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js index 4fc13a1320155f..5a744fcefc2b1b 100644 --- a/packages/material-ui/src/IconButton/IconButton.test.js +++ b/packages/material-ui/src/IconButton/IconButton.test.js @@ -103,15 +103,15 @@ describe('', () => { expect(button).to.have.class(classes.disabled); }); }); - - it('should raise a warning about onClick in children because of Firefox', () => { - expect(() => { - PropTypes.checkPropTypes( - IconButton.propTypes, - { classes: {}, children: {}} /> }, - 'prop', - 'MockedName', - ); - }).toErrorDev(['Material-UI: You are providing an onClick event listener']); + + it('should raise a warning about onClick in children because of Firefox', () => { + expect(() => { + PropTypes.checkPropTypes( + IconButton.propTypes, + { classes: {}, children: {}} /> }, + 'prop', + 'MockedName', + ); + }).toErrorDev(['Material-UI: You are providing an onClick event listener']); }); }); From 4c9afa57ba755a7d4fcd50f1493fb55b0c299bfa Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 14:01:20 -0800 Subject: [PATCH 13/16] Update packages/material-ui/src/IconButton/IconButton.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/IconButton/IconButton.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 3eacac7258bb27..11fd659107a657 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -111,8 +111,6 @@ const IconButtonRoot = experimentalStyled( padding: 3, fontSize: theme.typography.pxToRem(18), }), - }), - ({ theme }) => ({ /* Styles applied to the root element if `disabled={true}`. */ [`&.${iconButtonClasses.disabled}`]: { backgroundColor: 'transparent', From f933c517b3fa862954812c9db71d8f6795a9b7ae Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 14:01:26 -0800 Subject: [PATCH 14/16] Update packages/material-ui/src/IconButton/IconButton.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/IconButton/IconButton.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 11fd659107a657..a3a669a316e8a3 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -66,8 +66,6 @@ const IconButtonRoot = experimentalStyled( backgroundColor: 'transparent', }, }, - }), - ({ styleProps }) => ({ /* Styles applied to the root element if `edge="start"`. */ ...(styleProps.edge === 'start' && { marginLeft: styleProps.size === 'small' ? -3 : -12, From d849539c4e40b6a558ed40a7c407f96784bc129b Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Fri, 22 Jan 2021 14:01:32 -0800 Subject: [PATCH 15/16] Update packages/material-ui/src/IconButton/IconButton.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/IconButton/IconButton.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index a3a669a316e8a3..17b9a9dbda6146 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -102,8 +102,6 @@ const IconButtonRoot = experimentalStyled( }, }, }), - }), - ({ theme, styleProps }) => ({ /* Styles applied to the root element if `size="small"`. */ ...(styleProps.size === 'small' && { padding: 3, From 5b76478738ce7774149964d7186b951d4a82973e Mon Sep 17 00:00:00 2001 From: Queen Vinyl Darkscratch Date: Sat, 23 Jan 2021 02:01:04 -0800 Subject: [PATCH 16/16] Add missing variable --- packages/material-ui/src/IconButton/IconButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 17b9a9dbda6146..968ea6b95c8ed2 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -47,7 +47,7 @@ const IconButtonRoot = experimentalStyled( overridesResolver, }, )( - ({ theme }) => ({ + ({ theme, styleProps }) => ({ /* Styles applied to the root element. */ textAlign: 'center', flex: '0 0 auto',