From 40580039f5a5b68e86689284c40e3193fa6a2d40 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Tue, 26 Jan 2021 09:06:51 -0300 Subject: [PATCH 1/9] feat: Migrate to emotion --- .../src/ListItemIcon/ListItemIcon.d.ts | 7 +- .../src/ListItemIcon/ListItemIcon.js | 74 +++++++++++++------ .../src/ListItemIcon/ListItemIcon.test.js | 17 ++--- .../material-ui/src/ListItemIcon/index.d.ts | 2 + .../material-ui/src/ListItemIcon/index.js | 2 + .../src/ListItemIcon/listItemIconClasses.d.ts | 10 +++ .../src/ListItemIcon/listItemIconClasses.js | 9 +++ 7 files changed, 86 insertions(+), 35 deletions(-) create mode 100644 packages/material-ui/src/ListItemIcon/listItemIconClasses.d.ts create mode 100644 packages/material-ui/src/ListItemIcon/listItemIconClasses.js diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts index 80de403db229e2..23602c6a8228c0 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts @@ -1,4 +1,5 @@ -import { InternalStandardProps as StandardProps } from '..'; +import { SxProps } from '@material-ui/system'; +import { InternalStandardProps as StandardProps, Theme } from '..'; export interface ListItemIconProps extends StandardProps> { /** @@ -15,6 +16,10 @@ export interface ListItemIconProps extends StandardProps; } export type ListItemIconClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index 381da79d92ecd2..3d962e2837f2ce 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -1,39 +1,69 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import withStyles from '../styles/withStyles'; +import { 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 { getListItemIconUtilityClass } from './listItemIconClasses'; import ListContext from '../List/ListContext'; -export const styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - minWidth: 56, - color: theme.palette.action.active, - flexShrink: 0, - display: 'inline-flex', +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...(styleProps.alignItemsFlexStart && styles.alignItemsFlexStart), + }); +}; + +const useUtilityClasses = (styleProps) => { + const { alignItemsFlexStart, classes } = styleProps; + + const slots = { + root: ['root', alignItemsFlexStart === 'flex-start'], + }; + + return composeClasses(slots, getListItemIconUtilityClass, classes); +}; + +const ListItemIconRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiListItemIcon', + slot: 'Root', + overridesResolver, }, +)(({ theme, styleProps }) => ({ + /* Styles applied to the root element. */ + minWidth: 56, + color: theme.palette.action.active, + flexShrink: 0, + display: 'inline-flex', /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */ - alignItemsFlexStart: { + ...(styleProps.alignItemsFlexStart && { marginTop: 8, - }, -}); + }), +})); /** * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`. */ -const ListItemIcon = React.forwardRef(function ListItemIcon(props, ref) { - const { classes, className, ...other } = props; +const ListItemIcon = React.forwardRef(function ListItemIcon(inProps, ref) { + const props = useThemeProps({ + props: inProps, + name: 'MuiListItemIcon', + }); + + const { className, ...other } = props; const context = React.useContext(ListContext); + const styleProps = { ...props, alignItemsFlexStart: context.alignItems }; + const classes = useUtilityClasses(styleProps); return ( -
@@ -60,4 +90,4 @@ ListItemIcon.propTypes = { className: PropTypes.string, }; -export default withStyles(styles, { name: 'MuiListItemIcon' })(ListItemIcon); +export default ListItemIcon; diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js index 1d9fba71d27c4c..5f286e07430c73 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js @@ -1,20 +1,12 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance } from 'test/utils'; +import { createMount, describeConformanceV5 } from 'test/utils'; import ListItemIcon from './ListItemIcon'; +import classes from './listItemIconClasses' describe('', () => { const mount = createMount(); - let classes; - before(() => { - classes = getClasses( - - - , - ); - }); - - describeConformance( + describeConformanceV5(
, @@ -22,8 +14,9 @@ describe('', () => { classes, inheritComponent: 'div', mount, + muiName: 'MuiListItemIcon', refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: ['componentProp', 'componentsProp', 'themeVariants'], }), ); }); diff --git a/packages/material-ui/src/ListItemIcon/index.d.ts b/packages/material-ui/src/ListItemIcon/index.d.ts index 0adcbd950b46ea..befa5c4b06fce5 100644 --- a/packages/material-ui/src/ListItemIcon/index.d.ts +++ b/packages/material-ui/src/ListItemIcon/index.d.ts @@ -1,2 +1,4 @@ export { default } from './ListItemIcon'; export * from './ListItemIcon'; +export { default as listItemIconClasses } from './listItemIconClasses'; +export * from './listItemIconClasses'; diff --git a/packages/material-ui/src/ListItemIcon/index.js b/packages/material-ui/src/ListItemIcon/index.js index 0bcbf23ba29322..01174ef3d39b49 100644 --- a/packages/material-ui/src/ListItemIcon/index.js +++ b/packages/material-ui/src/ListItemIcon/index.js @@ -1 +1,3 @@ export { default } from './ListItemIcon'; +export { default as listItemIconClasses } from './listItemIconClasses'; +export * from './listItemIconClasses'; diff --git a/packages/material-ui/src/ListItemIcon/listItemIconClasses.d.ts b/packages/material-ui/src/ListItemIcon/listItemIconClasses.d.ts new file mode 100644 index 00000000000000..7e6f52417590f5 --- /dev/null +++ b/packages/material-ui/src/ListItemIcon/listItemIconClasses.d.ts @@ -0,0 +1,10 @@ +export interface ListItemIconClasses { + root: string; + alignItemsFlexStart: string; +} + +declare const listItemIconClasses: ListItemIconClasses; + +export function getListItemIconUtilityClass(slot: string): string; + +export default listItemIconClasses; diff --git a/packages/material-ui/src/ListItemIcon/listItemIconClasses.js b/packages/material-ui/src/ListItemIcon/listItemIconClasses.js new file mode 100644 index 00000000000000..6f2a447e278e90 --- /dev/null +++ b/packages/material-ui/src/ListItemIcon/listItemIconClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getListItemIconUtilityClass(slot) { + return generateUtilityClass('MuiListItemIcon', slot); +} + +const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']); + +export default listItemIconClasses; From 2cfc35a2dfde215b8ec772de71506dc2f158cc7d Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Tue, 26 Jan 2021 09:08:30 -0300 Subject: [PATCH 2/9] docs: Update --- docs/pages/api-docs/list-item-icon.json | 5 +++-- .../translations/api-docs/list-item-icon/list-item-icon.json | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/list-item-icon.json b/docs/pages/api-docs/list-item-icon.json index a0c1d355e79fa6..dac9ee8aba40dd 100644 --- a/docs/pages/api-docs/list-item-icon.json +++ b/docs/pages/api-docs/list-item-icon.json @@ -1,7 +1,8 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } } + "classes": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } } }, "name": "ListItemIcon", "styles": { @@ -14,6 +15,6 @@ "filename": "/packages/material-ui/src/ListItemIcon/ListItemIcon.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/list-item-icon/list-item-icon.json b/docs/translations/api-docs/list-item-icon/list-item-icon.json index 9c1ef7a1b4f281..400c88d2d77e1a 100644 --- a/docs/translations/api-docs/list-item-icon/list-item-icon.json +++ b/docs/translations/api-docs/list-item-icon/list-item-icon.json @@ -2,7 +2,8 @@ "componentDescription": "A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.", "propDescriptions": { "children": "The content of the component, normally Icon, SvgIcon, or a @material-ui/icons SVG icon element.", - "classes": "Override or extend the styles applied to the component. See CSS API below for more details." + "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", + "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." }, From 101eaf940789f7d881bdcfa8ec12a8a6abb885b9 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Tue, 26 Jan 2021 11:01:26 -0300 Subject: [PATCH 3/9] style: prettier --- packages/material-ui/src/ListItemIcon/ListItemIcon.test.js | 2 +- packages/material-ui/src/ListItemIcon/listItemIconClasses.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js index 5f286e07430c73..c50852b8eb4024 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { createMount, describeConformanceV5 } from 'test/utils'; import ListItemIcon from './ListItemIcon'; -import classes from './listItemIconClasses' +import classes from './listItemIconClasses'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui/src/ListItemIcon/listItemIconClasses.js b/packages/material-ui/src/ListItemIcon/listItemIconClasses.js index 6f2a447e278e90..973b8a0403d741 100644 --- a/packages/material-ui/src/ListItemIcon/listItemIconClasses.js +++ b/packages/material-ui/src/ListItemIcon/listItemIconClasses.js @@ -4,6 +4,9 @@ export function getListItemIconUtilityClass(slot) { return generateUtilityClass('MuiListItemIcon', slot); } -const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']); +const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', [ + 'root', + 'alignItemsFlexStart', +]); export default listItemIconClasses; From ac63829565982794bc02ca3e43504d6d5cbed899 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Tue, 26 Jan 2021 19:19:06 -0300 Subject: [PATCH 4/9] fix: proptypes --- packages/material-ui/src/ListItemIcon/ListItemIcon.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index 3d962e2837f2ce..2ea9570ec03f9a 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -88,6 +88,10 @@ ListItemIcon.propTypes = { * @ignore */ className: PropTypes.string, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; export default ListItemIcon; From 16a52370f7adb9b48afbc71f3cb44bfa20bf67cc Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 27 Jan 2021 12:44:21 +0100 Subject: [PATCH 5/9] Update packages/material-ui/src/ListItemIcon/ListItemIcon.js --- packages/material-ui/src/ListItemIcon/ListItemIcon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index 2ea9570ec03f9a..49a87608dfc5bb 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -57,7 +57,7 @@ const ListItemIcon = React.forwardRef(function ListItemIcon(inProps, ref) { const { className, ...other } = props; const context = React.useContext(ListContext); - const styleProps = { ...props, alignItemsFlexStart: context.alignItems }; + const styleProps = { ...props, alignItems: context.alignItems }; const classes = useUtilityClasses(styleProps); return ( From bf75eac0c951a235746c806e67d1460159f124d3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 27 Jan 2021 12:44:29 +0100 Subject: [PATCH 6/9] Update packages/material-ui/src/ListItemIcon/ListItemIcon.js --- packages/material-ui/src/ListItemIcon/ListItemIcon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index 49a87608dfc5bb..ae0c928a943778 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -12,7 +12,7 @@ const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root || {}, { - ...(styleProps.alignItemsFlexStart && styles.alignItemsFlexStart), + ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart), }); }; From ffdd022b6c5e6f7d3a781cfdcf80ab8fd56ef16f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 27 Jan 2021 12:44:37 +0100 Subject: [PATCH 7/9] Update packages/material-ui/src/ListItemIcon/ListItemIcon.js --- packages/material-ui/src/ListItemIcon/ListItemIcon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index ae0c928a943778..d9297b6c3e49dc 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -17,7 +17,7 @@ const overridesResolver = (props, styles) => { }; const useUtilityClasses = (styleProps) => { - const { alignItemsFlexStart, classes } = styleProps; + const { alignItems, classes } = styleProps; const slots = { root: ['root', alignItemsFlexStart === 'flex-start'], From 3582f6d33421cb825c93e714751da4dc9a76c4e3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 27 Jan 2021 12:44:44 +0100 Subject: [PATCH 8/9] Update packages/material-ui/src/ListItemIcon/ListItemIcon.js --- packages/material-ui/src/ListItemIcon/ListItemIcon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index d9297b6c3e49dc..ea41aaba7f5688 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -20,7 +20,7 @@ const useUtilityClasses = (styleProps) => { const { alignItems, classes } = styleProps; const slots = { - root: ['root', alignItemsFlexStart === 'flex-start'], + root: ['root', alignItems === 'flex-start' && 'alignItemsFlexStart'], }; return composeClasses(slots, getListItemIconUtilityClass, classes); From ebcf1f99ea81635b977a8ff65298b5bad6dd046d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 27 Jan 2021 12:44:50 +0100 Subject: [PATCH 9/9] Update packages/material-ui/src/ListItemIcon/ListItemIcon.js --- packages/material-ui/src/ListItemIcon/ListItemIcon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index ea41aaba7f5688..8aa3376010b569 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -41,7 +41,7 @@ const ListItemIconRoot = experimentalStyled( flexShrink: 0, display: 'inline-flex', /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */ - ...(styleProps.alignItemsFlexStart && { + ...(styleProps.alignItems === 'flex-start' && { marginTop: 8, }), }));