Skip to content

Commit de07013

Browse files
mnajdovamnajdova
authored
[core] Update slot components to use overridesResolver part 1 (#25853)
1 parent b061319 commit de07013

File tree

13 files changed

+118
-164
lines changed

13 files changed

+118
-164
lines changed

‎packages/material-ui/src/Accordion/Accordion.js‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { isFragment } from 'react-is';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
5-
import { deepmerge, chainPropTypes } from '@material-ui/utils';
5+
import { chainPropTypes } from '@material-ui/utils';
66
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
77
import experimentalStyled from '../styles/experimentalStyled';
88
import useThemeProps from '../styles/useThemeProps';
@@ -12,19 +12,6 @@ import AccordionContext from './AccordionContext';
1212
import useControlled from '../utils/useControlled';
1313
import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
1414

15-
const overridesResolver = (props, styles) => {
16-
const { styleProps } = props;
17-
18-
return deepmerge(
19-
{
20-
...(!styleProps.square && styles.rounded),
21-
...(!styleProps.disableGutters && styles.gutters),
22-
[`& .${accordionClasses.region}`]: styles.region,
23-
},
24-
styles.root || {},
25-
);
26-
};
27-
2815
const useUtilityClasses = (styleProps) => {
2916
const { classes, square, expanded, disabled, disableGutters } = styleProps;
3017

@@ -48,7 +35,16 @@ const AccordionRoot = experimentalStyled(
4835
{
4936
name: 'MuiAccordion',
5037
slot: 'Root',
51-
overridesResolver,
38+
overridesResolver: (props, styles) => {
39+
const { styleProps } = props;
40+
41+
return {
42+
[`& .${accordionClasses.region}`]: styles.region,
43+
...styles.root,
44+
...(!styleProps.square && styles.rounded),
45+
...(!styleProps.disableGutters && styles.gutters),
46+
};
47+
},
5248
},
5349
)(
5450
({ theme }) => {

‎packages/material-ui/src/Accordion/Accordion.test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ describe('<Accordion />', () => {
2020
refInstanceof: window.HTMLDivElement,
2121
muiName: 'MuiAccordion',
2222
testVariantProps: { variant: 'rounded' },
23-
testDeepOverrides: { slotName: 'region', slotClassName: classes.region },
2423
skip: ['componentProp', 'componentsProp'],
2524
}));
2625

‎packages/material-ui/src/AccordionActions/AccordionActions.js‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
4-
import { deepmerge } from '@material-ui/utils';
54
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
65
import experimentalStyled from '../styles/experimentalStyled';
76
import useThemeProps from '../styles/useThemeProps';
87
import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
98

10-
const overridesResolver = (props, styles) => {
11-
const { styleProps } = props;
12-
13-
return deepmerge(
14-
{
15-
...(!styleProps.disableSpacing && styles.spacing),
16-
},
17-
styles.root || {},
18-
);
19-
};
20-
219
const useUtilityClasses = (styleProps) => {
2210
const { classes, disableSpacing } = styleProps;
2311

@@ -34,7 +22,14 @@ const AccordionActionsRoot = experimentalStyled(
3422
{
3523
name: 'MuiAccordionActions',
3624
slot: 'Root',
37-
overridesResolver,
25+
overridesResolver: (props, styles) => {
26+
const { styleProps } = props;
27+
28+
return {
29+
...styles.root,
30+
...(!styleProps.disableSpacing && styles.spacing),
31+
};
32+
},
3833
},
3934
)(({ styleProps }) => ({
4035
/* Styles applied to the root element. */

‎packages/material-ui/src/AccordionDetails/AccordionDetails.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@ import experimentalStyled from '../styles/experimentalStyled';
66
import useThemeProps from '../styles/useThemeProps';
77
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
88

9-
const overridesResolver = (props, styles) => {
10-
return styles.root || {};
11-
};
12-
139
const useUtilityClasses = (styleProps) => {
1410
const { classes } = styleProps;
1511

@@ -26,7 +22,7 @@ const AccordionDetailsRoot = experimentalStyled(
2622
{
2723
name: 'MuiAccordionDetails',
2824
slot: 'Root',
29-
overridesResolver,
25+
overridesResolver: (props, styles) => styles.root,
3026
},
3127
)(({ theme }) => ({
3228
/* Styles applied to the root element. */

‎packages/material-ui/src/AccordionSummary/AccordionSummary.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
4-
import { deepmerge } from '@material-ui/utils';
54
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
65
import experimentalStyled from '../styles/experimentalStyled';
76
import useThemeProps from '../styles/useThemeProps';
@@ -11,16 +10,6 @@ import accordionSummaryClasses, {
1110
getAccordionSummaryUtilityClass,
1211
} from './accordionSummaryClasses';
1312

14-
const overridesResolver = (props, styles) => {
15-
return deepmerge(
16-
{
17-
[`& .${accordionSummaryClasses.content}`]: styles.content,
18-
[`& .${accordionSummaryClasses.expandIconWrapper}`]: styles.expandIconWrapper,
19-
},
20-
styles.root || {},
21-
);
22-
};
23-
2413
const useUtilityClasses = (styleProps) => {
2514
const { classes, expanded, disabled, disableGutters } = styleProps;
2615

@@ -40,7 +29,7 @@ const AccordionSummaryRoot = experimentalStyled(
4029
{
4130
name: 'MuiAccordionSummary',
4231
slot: 'Root',
43-
overridesResolver,
32+
overridesResolver: (props, styles) => styles.root,
4433
},
4534
)(({ theme, styleProps }) => {
4635
const transition = {
@@ -79,6 +68,7 @@ const AccordionSummaryContent = experimentalStyled(
7968
{
8069
name: 'MuiAccordionSummary',
8170
slot: 'Content',
71+
overridesResolver: (props, styles) => styles.content,
8272
},
8373
)(({ theme, styleProps }) => ({
8474
/* Styles applied to the children wrapper element. */
@@ -102,6 +92,7 @@ const AccordionSummaryExpandIconWrapper = experimentalStyled(
10292
{
10393
name: 'MuiAccordionSummary',
10494
slot: 'ExpandIconWrapper',
95+
overridesResolver: (props, styles) => styles.expandIconWrapper,
10596
},
10697
)(({ theme }) => ({
10798
/* Styles applied to the `expandIcon`'s wrapper element. */

‎packages/material-ui/src/Alert/Alert.js‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
4-
import { deepmerge } from '@material-ui/utils';
54
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
65
import experimentalStyled from '../styles/experimentalStyled';
76
import useThemeProps from '../styles/useThemeProps';
@@ -16,21 +15,6 @@ import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
1615
import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
1716
import CloseIcon from '../internal/svg-icons/Close';
1817

19-
const overridesResolver = (props, styles) => {
20-
const { styleProps } = props;
21-
22-
return deepmerge(
23-
{
24-
...styles[styleProps.variant],
25-
...styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`],
26-
[`& .${alertClasses.icon}`]: styles.icon,
27-
[`& .${alertClasses.message}`]: styles.message,
28-
[`& .${alertClasses.action}`]: styles.action,
29-
},
30-
styles.root || {},
31-
);
32-
};
33-
3418
const useUtilityClasses = (styleProps) => {
3519
const { variant, color, severity, classes } = styleProps;
3620

@@ -50,7 +34,15 @@ const AlertRoot = experimentalStyled(
5034
{
5135
name: 'MuiAlert',
5236
slot: 'Root',
53-
overridesResolver,
37+
overridesResolver: (props, styles) => {
38+
const { styleProps } = props;
39+
40+
return {
41+
...styles.root,
42+
...styles[styleProps.variant],
43+
...styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`],
44+
};
45+
},
5446
},
5547
)(({ theme, styleProps }) => {
5648
const getColor = theme.palette.mode === 'light' ? darken : lighten;
@@ -99,6 +91,7 @@ const AlertIcon = experimentalStyled(
9991
{
10092
name: 'MuiAlert',
10193
slot: 'Icon',
94+
overridesResolver: (props, styles) => styles.icon,
10295
},
10396
)({
10497
marginRight: 12,
@@ -115,6 +108,7 @@ const AlertMessage = experimentalStyled(
115108
{
116109
name: 'MuiAlert',
117110
slot: 'Message',
111+
overridesResolver: (props, styles) => styles.message,
118112
},
119113
)({
120114
padding: '8px 0',
@@ -127,6 +121,7 @@ const AlertAction = experimentalStyled(
127121
{
128122
name: 'MuiAlert',
129123
slot: 'Action',
124+
overridesResolver: (props, styles) => styles.action,
130125
},
131126
)({
132127
display: 'flex',

‎packages/material-ui/src/AlertTitle/AlertTitle.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import useThemeProps from '../styles/useThemeProps';
77
import Typography from '../Typography';
88
import { getAlertTitleUtilityClass } from './alertTitleClasses';
99

10-
const overridesResolver = (props, styles) => styles.root || {};
11-
1210
const useUtilityClasses = (styleProps) => {
1311
const { classes } = styleProps;
1412

@@ -25,7 +23,7 @@ const AlertTitleRoot = experimentalStyled(
2523
{
2624
name: 'MuiAlertTitle',
2725
slot: 'Root',
28-
overridesResolver,
26+
overridesResolver: (props, styles) => styles.root,
2927
},
3028
)(({ theme }) => {
3129
/* Styles applied to the root element. */

‎packages/material-ui/src/AppBar/AppBar.js‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
4-
import { deepmerge } from '@material-ui/utils';
54
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
65
import experimentalStyled from '../styles/experimentalStyled';
76
import useThemeProps from '../styles/useThemeProps';
87
import capitalize from '../utils/capitalize';
98
import Paper from '../Paper';
109
import { getAppBarUtilityClass } from './appBarClasses';
1110

12-
const overridesResolver = (props, styles) => {
13-
const { styleProps } = props;
14-
15-
return deepmerge(
16-
{
17-
...styles[`position${capitalize(styleProps.position)}`],
18-
...styles[`color${capitalize(styleProps.color)}`],
19-
},
20-
styles.root || {},
21-
);
22-
};
23-
2411
const useUtilityClasses = (styleProps) => {
2512
const { color, position, classes } = styleProps;
2613

@@ -37,7 +24,15 @@ const AppBarRoot = experimentalStyled(
3724
{
3825
name: 'MuiAppBar',
3926
slot: 'Root',
40-
overridesResolver,
27+
overridesResolver: (props, styles) => {
28+
const { styleProps } = props;
29+
30+
return {
31+
...styles.root,
32+
...styles[`position${capitalize(styleProps.position)}`],
33+
...styles[`color${capitalize(styleProps.color)}`],
34+
};
35+
},
4136
},
4237
)(({ theme, styleProps }) => {
4338
const backgroundColorDefault =

0 commit comments

Comments
 (0)