From 279540ebce56ede34b0f83fbee2e4d9ed24e06f4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Apr 2021 16:30:37 +0200 Subject: [PATCH 1/4] init --- .../material-ui/src/Accordion/Accordion.js | 26 ++--- .../src/AccordionActions/AccordionActions.js | 21 ++-- .../src/AccordionDetails/AccordionDetails.js | 6 +- .../src/AccordionSummary/AccordionSummary.js | 14 +-- packages/material-ui/src/Alert/Alert.js | 29 ++--- .../material-ui/src/AlertTitle/AlertTitle.js | 4 +- packages/material-ui/src/AppBar/AppBar.js | 23 ++-- .../src/Autocomplete/Autocomplete.js | 106 +++++++++--------- packages/material-ui/src/Avatar/Avatar.js | 27 ++--- .../src/AvatarGroup/AvatarGroup.js | 14 +-- 10 files changed, 112 insertions(+), 158 deletions(-) diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js index 03af29f5f50be3..e13066336b4d26 100644 --- a/packages/material-ui/src/Accordion/Accordion.js +++ b/packages/material-ui/src/Accordion/Accordion.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { deepmerge, chainPropTypes } from '@material-ui/utils'; +import { chainPropTypes } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; @@ -12,19 +12,6 @@ import AccordionContext from './AccordionContext'; import useControlled from '../utils/useControlled'; import accordionClasses, { getAccordionUtilityClass } from './accordionClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.square && styles.rounded), - ...(!styleProps.disableGutters && styles.gutters), - [`& .${accordionClasses.region}`]: styles.region, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, square, expanded, disabled, disableGutters } = styleProps; @@ -48,7 +35,16 @@ const AccordionRoot = experimentalStyled( { name: 'MuiAccordion', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${accordionClasses.region}`]: styles.region, + ...styles.root, + ...(!styleProps.square && styles.rounded), + ...(!styleProps.disableGutters && styles.gutters), + }; + }, }, )( ({ theme }) => { diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.js b/packages/material-ui/src/AccordionActions/AccordionActions.js index 1413a29c0ac165..f415313e4fec5c 100644 --- a/packages/material-ui/src/AccordionActions/AccordionActions.js +++ b/packages/material-ui/src/AccordionActions/AccordionActions.js @@ -1,23 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -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 { getAccordionActionsUtilityClass } from './accordionActionsClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.disableSpacing && styles.spacing), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, disableSpacing } = styleProps; @@ -34,7 +22,14 @@ const AccordionActionsRoot = experimentalStyled( { name: 'MuiAccordionActions', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(!styleProps.disableSpacing && styles.spacing), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/AccordionDetails/AccordionDetails.js b/packages/material-ui/src/AccordionDetails/AccordionDetails.js index 5999f71d067a6a..122858ae5e306c 100644 --- a/packages/material-ui/src/AccordionDetails/AccordionDetails.js +++ b/packages/material-ui/src/AccordionDetails/AccordionDetails.js @@ -6,10 +6,6 @@ import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses'; -const overridesResolver = (props, styles) => { - return styles.root || {}; -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -26,7 +22,7 @@ const AccordionDetailsRoot = experimentalStyled( { name: 'MuiAccordionDetails', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.js index a2a3a7798d3938..1cf8a29fe632fd 100644 --- a/packages/material-ui/src/AccordionSummary/AccordionSummary.js +++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.js @@ -11,16 +11,6 @@ import accordionSummaryClasses, { getAccordionSummaryUtilityClass, } from './accordionSummaryClasses'; -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${accordionSummaryClasses.content}`]: styles.content, - [`& .${accordionSummaryClasses.expandIconWrapper}`]: styles.expandIconWrapper, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, expanded, disabled, disableGutters } = styleProps; @@ -40,7 +30,7 @@ const AccordionSummaryRoot = experimentalStyled( { name: 'MuiAccordionSummary', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme, styleProps }) => { const transition = { @@ -79,6 +69,7 @@ const AccordionSummaryContent = experimentalStyled( { name: 'MuiAccordionSummary', slot: 'Content', + overridesResolver: (props, styles) => styles.content, }, )(({ theme, styleProps }) => ({ /* Styles applied to the children wrapper element. */ @@ -102,6 +93,7 @@ const AccordionSummaryExpandIconWrapper = experimentalStyled( { name: 'MuiAccordionSummary', slot: 'ExpandIconWrapper', + overridesResolver: (props, styles) => styles.expandIconWrapper, }, )(({ theme }) => ({ /* Styles applied to the `expandIcon`'s wrapper element. */ diff --git a/packages/material-ui/src/Alert/Alert.js b/packages/material-ui/src/Alert/Alert.js index ee91b937dbaf4e..0442ff007fafc8 100644 --- a/packages/material-ui/src/Alert/Alert.js +++ b/packages/material-ui/src/Alert/Alert.js @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -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'; @@ -16,21 +15,6 @@ import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline'; import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; import CloseIcon from '../internal/svg-icons/Close'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`], - [`& .${alertClasses.icon}`]: styles.icon, - [`& .${alertClasses.message}`]: styles.message, - [`& .${alertClasses.action}`]: styles.action, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { variant, color, severity, classes } = styleProps; @@ -50,7 +34,15 @@ const AlertRoot = experimentalStyled( { name: 'MuiAlert', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`], + }; + }, }, )(({ theme, styleProps }) => { const getColor = theme.palette.mode === 'light' ? darken : lighten; @@ -99,6 +91,7 @@ const AlertIcon = experimentalStyled( { name: 'MuiAlert', slot: 'Icon', + overridesResolver: (props, styles) => styles.icon, }, )({ marginRight: 12, @@ -115,6 +108,7 @@ const AlertMessage = experimentalStyled( { name: 'MuiAlert', slot: 'Message', + overridesResolver: (props, styles) => styles.message, }, )({ padding: '8px 0', @@ -127,6 +121,7 @@ const AlertAction = experimentalStyled( { name: 'MuiAlert', slot: 'Action', + overridesResolver: (props, styles) => styles.action, }, )({ display: 'flex', diff --git a/packages/material-ui/src/AlertTitle/AlertTitle.js b/packages/material-ui/src/AlertTitle/AlertTitle.js index eee5516820194e..ef0f4ce66f8fff 100644 --- a/packages/material-ui/src/AlertTitle/AlertTitle.js +++ b/packages/material-ui/src/AlertTitle/AlertTitle.js @@ -7,8 +7,6 @@ import useThemeProps from '../styles/useThemeProps'; import Typography from '../Typography'; import { getAlertTitleUtilityClass } from './alertTitleClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -25,7 +23,7 @@ const AlertTitleRoot = experimentalStyled( { name: 'MuiAlertTitle', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => { /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js index cecea181bb8624..bfa0842993e4ee 100644 --- a/packages/material-ui/src/AppBar/AppBar.js +++ b/packages/material-ui/src/AppBar/AppBar.js @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -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'; @@ -9,18 +8,6 @@ import capitalize from '../utils/capitalize'; import Paper from '../Paper'; import { getAppBarUtilityClass } from './appBarClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`position${capitalize(styleProps.position)}`], - ...styles[`color${capitalize(styleProps.color)}`], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { color, position, classes } = styleProps; @@ -37,7 +24,15 @@ const AppBarRoot = experimentalStyled( { name: 'MuiAppBar', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`position${capitalize(styleProps.position)}`], + ...styles[`color${capitalize(styleProps.color)}`], + }; + }, }, )(({ theme, styleProps }) => { const backgroundColorDefault = diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js index 3d92ca3fb90e3a..85846e1d66b292 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.js @@ -17,53 +17,6 @@ import experimentalStyled from '../styles/experimentalStyled'; import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses'; import capitalize from '../utils/capitalize'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - const { fullWidth, hasClearIcon, hasPopupIcon, inputFocused, popupOpen, size } = styleProps; - - return deepmerge( - { - ...(fullWidth && styles.fullWidth), - ...(hasPopupIcon && styles.hasPopupIcon), - ...(hasClearIcon && styles.hasClearIcon), - [`& .${autocompleteClasses.tag}`]: { - ...styles.tag, - ...styles[`tagSize${capitalize(size)}`], - }, - [`& .${autocompleteClasses.inputRoot}`]: styles.inputRoot, - [`& .${autocompleteClasses.input}`]: { - ...styles.input, - ...(inputFocused && styles.inputFocused), - }, - [`& .${autocompleteClasses.endAdornment}`]: styles.endAdornment, - [`& .${autocompleteClasses.clearIndicator}`]: styles.clearIndicator, - [`& .${autocompleteClasses.popupIndicator}`]: { - ...styles.popupIndicator, - ...(popupOpen && styles.popupIndicatorOpen), - }, - }, - styles.root || {}, - ); -}; - -const overridesResolverPortal = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.disablePortal && styles.popperDisablePortal), - [`& .${autocompleteClasses.paper}`]: styles.paper, - [`& .${autocompleteClasses.listbox}`]: styles.listbox, - [`& .${autocompleteClasses.loading}`]: styles.loading, - [`& .${autocompleteClasses.noOptions}`]: styles.noOptions, - [`& .${autocompleteClasses.option}`]: styles.option, - [`& .${autocompleteClasses.groupLabel}`]: styles.groupLabel, - [`& .${autocompleteClasses.groupUl}`]: styles.groupUl, - }, - styles.popper || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, @@ -110,7 +63,26 @@ const AutocompleteRoot = experimentalStyled( { name: 'MuiAutocomplete', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + const { fullWidth, hasClearIcon, hasPopupIcon, inputFocused, size } = styleProps; + + return { + [`& .${autocompleteClasses.tag}`]: { + ...styles.tag, + ...styles[`tagSize${capitalize(size)}`], + }, + [`& .${autocompleteClasses.inputRoot}`]: styles.inputRoot, + [`& .${autocompleteClasses.input}`]: { + ...styles.input, + ...(inputFocused && styles.inputFocused), + }, + ...styles.root, + ...(fullWidth && styles.fullWidth), + ...(hasPopupIcon && styles.hasPopupIcon), + ...(hasClearIcon && styles.hasClearIcon), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ @@ -223,6 +195,7 @@ const AutocompleteEndAdornment = experimentalStyled( { name: 'MuiAutocomplete', slot: 'EndAdornment', + overridesResolver: (props, styles) => styles.endAdornment, }, )({ /* Styles applied to the endAdornment element. */ @@ -238,6 +211,7 @@ const AutocompleteClearIndicator = experimentalStyled( { name: 'MuiAutocomplete', slot: 'ClearIndicator', + overridesResolver: (props, styles) => styles.clearIndicator, }, )({ /* Styles applied to the clear indicator. */ @@ -252,6 +226,10 @@ const AutocompletePopupIndicator = experimentalStyled( { name: 'MuiAutocomplete', slot: 'PopupIndicator', + overridesResolver: ({ styleProps }, styles) => ({ + ...styles.popupIndicator, + ...(styleProps.popupOpen && styles.popupIndicatorOpen), + }), }, )(({ styleProps }) => ({ /* Styles applied to the popup indicator. */ @@ -269,7 +247,15 @@ const AutocompletePopper = experimentalStyled( { name: 'MuiAutocomplete', slot: 'Popper', - overridesResolver: overridesResolverPortal, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${autocompleteClasses.option}`]: styles.option, + ...styles.popper, + ...(styleProps.disablePortal && styles.popperDisablePortal), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the popper element. */ @@ -283,7 +269,7 @@ const AutocompletePopper = experimentalStyled( const AutocompletePaper = experimentalStyled( Paper, {}, - { name: 'MuiAutocomplete', slot: 'Paper' }, + { name: 'MuiAutocomplete', slot: 'Paper', overridesResolver: (props, styles) => styles.paper }, )(({ theme }) => ({ /* Styles applied to the Paper component. */ ...theme.typography.body1, @@ -294,7 +280,11 @@ const AutocompletePaper = experimentalStyled( const AutocompleteLoading = experimentalStyled( 'div', {}, - { name: 'MuiAutocomplete', slot: 'Loading' }, + { + name: 'MuiAutocomplete', + slot: 'Loading', + overridesResolver: (props, styles) => styles.loading, + }, )(({ theme }) => ({ /* Styles applied to the loading wrapper. */ color: theme.palette.text.secondary, @@ -304,7 +294,11 @@ const AutocompleteLoading = experimentalStyled( const AutocompleteNoOptions = experimentalStyled( 'div', {}, - { name: 'MuiAutocomplete', slot: 'NoOptions' }, + { + name: 'MuiAutocomplete', + slot: 'NoOptions', + overridesResolver: (props, styles) => styles.noOptions, + }, )(({ theme }) => ({ /* Styles applied to the no option wrapper. */ color: theme.palette.text.secondary, @@ -314,7 +308,11 @@ const AutocompleteNoOptions = experimentalStyled( const AutocompleteListbox = experimentalStyled( 'div', {}, - { name: 'MuiAutocomplete', slot: 'Listbox' }, + { + name: 'MuiAutocomplete', + slot: 'Listbox', + overridesResolver: (props, styles) => styles.listbox, + }, )(({ theme }) => ({ /* Styles applied to the listbox component. */ listStyle: 'none', @@ -382,6 +380,7 @@ const AutocompleteGroupLabel = experimentalStyled( { name: 'MuiAutocomplete', slot: 'GroupLabel', + overridesResolver: (props, styles) => styles.groupLabel, }, )(({ theme }) => ({ /* Styles applied to the group's label elements. */ @@ -395,6 +394,7 @@ const AutocompleteGroupUl = experimentalStyled( { name: 'MuiAutocomplete', slot: 'GroupUl', + overridesResolver: (props, styles) => styles.groupUl, }, )({ /* Styles applied to the group's ul elements. */ diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js index 629d2ac88c3403..55b25cd50d34f3 100644 --- a/packages/material-ui/src/Avatar/Avatar.js +++ b/packages/material-ui/src/Avatar/Avatar.js @@ -1,27 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -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 Person from '../internal/svg-icons/Person'; import avatarClasses, { getAvatarUtilityClass } from './avatarClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...(styleProps.colorDefault && styles.colorDefault), - [`& .${avatarClasses.img}`]: styles.img, - [`& .${avatarClasses.fallback}`]: styles.fallback, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant, colorDefault } = styleProps; @@ -40,7 +25,15 @@ const AvatarRoot = experimentalStyled( { name: 'MuiAvatar', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...(styleProps.colorDefault && styles.colorDefault), + }; + }, }, )(({ theme, styleProps }) => ({ position: 'relative', @@ -75,6 +68,7 @@ const AvatarImg = experimentalStyled( { name: 'MuiAvatar', slot: 'Img', + overridesResolver: (props, styles) => styles.img, }, )({ width: '100%', @@ -94,6 +88,7 @@ const AvatarFallback = experimentalStyled( { name: 'MuiAvatar', slot: 'Fallback', + overridesResolver: (props, styles) => styles.fallback, }, )({ width: '75%', diff --git a/packages/material-ui/src/AvatarGroup/AvatarGroup.js b/packages/material-ui/src/AvatarGroup/AvatarGroup.js index e5a58efe68354f..bf0dedea7f83ed 100644 --- a/packages/material-ui/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui/src/AvatarGroup/AvatarGroup.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { isFragment } from 'react-is'; import clsx from 'clsx'; -import { chainPropTypes, deepmerge } from '@material-ui/utils'; +import { chainPropTypes } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; @@ -14,15 +14,6 @@ const SPACINGS = { medium: null, }; -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${avatarGroupClasses.avatar}`]: styles.avatar, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -40,7 +31,7 @@ const AvatarGroupRoot = experimentalStyled( { name: 'MuiAvatarGroup', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => ({ [`& .MuiAvatar-root`]: { @@ -62,6 +53,7 @@ const AvatarGroupAvatar = experimentalStyled( { name: 'MuiAvatarGroup', slot: 'Avatar', + overridesResolver: (props, styles) => styles.avatar, }, )(({ theme }) => ({ border: `2px solid ${theme.palette.background.default}`, From fb47d15d38f91ffd845528752f194fd03252c2b0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Apr 2021 17:05:20 +0200 Subject: [PATCH 2/4] tests --- packages/material-ui/src/Accordion/Accordion.test.js | 1 - packages/material-ui/src/Autocomplete/Autocomplete.test.js | 2 +- packages/material-ui/src/AvatarGroup/AvatarGroup.test.js | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/material-ui/src/Accordion/Accordion.test.js b/packages/material-ui/src/Accordion/Accordion.test.js index ebb328e97beb5d..253c196f30ec71 100644 --- a/packages/material-ui/src/Accordion/Accordion.test.js +++ b/packages/material-ui/src/Accordion/Accordion.test.js @@ -20,7 +20,6 @@ describe('', () => { refInstanceof: window.HTMLDivElement, muiName: 'MuiAccordion', testVariantProps: { variant: 'rounded' }, - testDeepOverrides: { slotName: 'region', slotClassName: classes.region }, skip: ['componentProp', 'componentsProp'], })); diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.test.js b/packages/material-ui/src/Autocomplete/Autocomplete.test.js index 66b73a5d70fac9..2ea7c9c272b6bb 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.test.js @@ -46,7 +46,7 @@ describe('', () => { mount, muiName: 'MuiAutocomplete', testVariantProps: { variant: 'foo' }, - testDeepOverrides: { slotName: 'inputRoot', slotClassName: classes.inputRoot }, + testDeepOverrides: { slotName: 'endAdornment', slotClassName: classes.endAdornment }, testStateOverrides: { prop: 'fullWidth', value: true, styleKey: 'fullWidth' }, refInstanceof: window.HTMLDivElement, testComponentPropWith: 'div', diff --git a/packages/material-ui/src/AvatarGroup/AvatarGroup.test.js b/packages/material-ui/src/AvatarGroup/AvatarGroup.test.js index bc2b6c1fb7271e..98a7fb2e9fb47d 100644 --- a/packages/material-ui/src/AvatarGroup/AvatarGroup.test.js +++ b/packages/material-ui/src/AvatarGroup/AvatarGroup.test.js @@ -19,7 +19,6 @@ describe('', () => { mount, muiName: 'MuiAvatarGroup', refInstanceof: window.HTMLDivElement, - testDeepOverrides: { slotName: 'avatar', slotClassName: classes.avatar }, testVariantProps: { max: 10, spacing: 'small', variant: 'square' }, skip: ['componentProp', 'componentsProp'], }), From 9bc041a58392fe362033c23e24707f45963a197f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Apr 2021 17:13:50 +0200 Subject: [PATCH 3/4] AvatarGroup --- packages/material-ui/src/AvatarGroup/AvatarGroup.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/AvatarGroup/AvatarGroup.js b/packages/material-ui/src/AvatarGroup/AvatarGroup.js index bf0dedea7f83ed..589fdf7bf30276 100644 --- a/packages/material-ui/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui/src/AvatarGroup/AvatarGroup.js @@ -31,7 +31,10 @@ const AvatarGroupRoot = experimentalStyled( { name: 'MuiAvatarGroup', slot: 'Root', - overridesResolver: (props, styles) => styles.root, + overridesResolver: (props, styles) => ({ + [`& .${avatarGroupClasses.avatar}`]: styles.avatar, + ...styles.root, + }), }, )(({ theme }) => ({ [`& .MuiAvatar-root`]: { From 9b943588730d5681fc1a8522f59fd8ebf3fdaf64 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Apr 2021 17:25:56 +0200 Subject: [PATCH 4/4] lint --- packages/material-ui/src/AccordionSummary/AccordionSummary.js | 1 - packages/material-ui/src/Autocomplete/Autocomplete.js | 2 +- packages/material-ui/src/Avatar/Avatar.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.js index 1cf8a29fe632fd..67894e13bedfe1 100644 --- a/packages/material-ui/src/AccordionSummary/AccordionSummary.js +++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.js @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -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'; diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js index 85846e1d66b292..227782dfa29b63 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { chainPropTypes, integerPropType, deepmerge } from '@material-ui/utils'; +import { chainPropTypes, integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { alpha } from '../styles/colorManipulator'; import Popper from '../Popper'; diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js index 55b25cd50d34f3..9cf3b594d67bc8 100644 --- a/packages/material-ui/src/Avatar/Avatar.js +++ b/packages/material-ui/src/Avatar/Avatar.js @@ -5,7 +5,7 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import Person from '../internal/svg-icons/Person'; -import avatarClasses, { getAvatarUtilityClass } from './avatarClasses'; +import { getAvatarUtilityClass } from './avatarClasses'; const useUtilityClasses = (styleProps) => { const { classes, variant, colorDefault } = styleProps;