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

[core] Update slot components to use overridesResolver part 1 #25853

Merged
merged 4 commits into from
Apr 21, 2021
Merged

[core] Update slot components to use overridesResolver part 1 #25853

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
279540e
init
mnajdova Apr 20, 2021
fb47d15
tests
mnajdova Apr 20, 2021
9bc041a
AvatarGroup
mnajdova Apr 20, 2021
9b94358
lint
mnajdova Apr 20, 2021
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
26 changes: 11 additions & 15 deletions packages/material-ui/src/Accordion/Accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;

Expand All @@ -48,7 +35,16 @@ const AccordionRoot = experimentalStyled(
{
name: 'MuiAccordion',
slot: 'Root',
overridesResolver,
overridesResolver: (props, styles) => {
const { styleProps } = props;

return {
[`& .${accordionClasses.region}`]: styles.region,
Copy link
Member Author

Choose a reason for hiding this comment

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

There is no component for this one.

...styles.root,
...(!styleProps.square && styles.rounded),
...(!styleProps.disableGutters && styles.gutters),
};
},
},
)(
({ theme }) => {
Expand Down
1 change: 0 additions & 1 deletion packages/material-ui/src/Accordion/Accordion.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ describe('<Accordion />', () => {
refInstanceof: window.HTMLDivElement,
muiName: 'MuiAccordion',
testVariantProps: { variant: 'rounded' },
testDeepOverrides: { slotName: 'region', slotClassName: classes.region },
skip: ['componentProp', 'componentsProp'],
}));

Expand Down
21 changes: 8 additions & 13 deletions packages/material-ui/src/AccordionActions/AccordionActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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. */
Expand Down
6 changes: 1 addition & 5 deletions packages/material-ui/src/AccordionDetails/AccordionDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -26,7 +22,7 @@ const AccordionDetailsRoot = experimentalStyled(
{
name: 'MuiAccordionDetails',
slot: 'Root',
overridesResolver,
overridesResolver: (props, styles) => styles.root,
},
)(({ theme }) => ({
/* Styles applied to the root element. */
Expand Down
15 changes: 3 additions & 12 deletions packages/material-ui/src/AccordionSummary/AccordionSummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -11,16 +10,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;

Expand All @@ -40,7 +29,7 @@ const AccordionSummaryRoot = experimentalStyled(
{
name: 'MuiAccordionSummary',
slot: 'Root',
overridesResolver,
overridesResolver: (props, styles) => styles.root,
},
)(({ theme, styleProps }) => {
const transition = {
Expand Down Expand Up @@ -79,6 +68,7 @@ const AccordionSummaryContent = experimentalStyled(
{
name: 'MuiAccordionSummary',
slot: 'Content',
overridesResolver: (props, styles) => styles.content,
},
)(({ theme, styleProps }) => ({
/* Styles applied to the children wrapper element. */
Expand All @@ -102,6 +92,7 @@ const AccordionSummaryExpandIconWrapper = experimentalStyled(
{
name: 'MuiAccordionSummary',
slot: 'ExpandIconWrapper',
overridesResolver: (props, styles) => styles.expandIconWrapper,
},
)(({ theme }) => ({
/* Styles applied to the `expandIcon`'s wrapper element. */
Expand Down
29 changes: 12 additions & 17 deletions packages/material-ui/src/Alert/Alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;

Expand All @@ -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;
Expand Down Expand Up @@ -99,6 +91,7 @@ const AlertIcon = experimentalStyled(
{
name: 'MuiAlert',
slot: 'Icon',
overridesResolver: (props, styles) => styles.icon,
},
)({
marginRight: 12,
Expand All @@ -115,6 +108,7 @@ const AlertMessage = experimentalStyled(
{
name: 'MuiAlert',
slot: 'Message',
overridesResolver: (props, styles) => styles.message,
},
)({
padding: '8px 0',
Expand All @@ -127,6 +121,7 @@ const AlertAction = experimentalStyled(
{
name: 'MuiAlert',
slot: 'Action',
overridesResolver: (props, styles) => styles.action,
},
)({
display: 'flex',
Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/AlertTitle/AlertTitle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -25,7 +23,7 @@ const AlertTitleRoot = experimentalStyled(
{
name: 'MuiAlertTitle',
slot: 'Root',
overridesResolver,
overridesResolver: (props, styles) => styles.root,
},
)(({ theme }) => {
/* Styles applied to the root element. */
Expand Down
23 changes: 9 additions & 14 deletions packages/material-ui/src/AppBar/AppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,13 @@
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 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;

Expand All @@ -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 =
Expand Down
Loading