[core] Update slot components to use overridesResolver part 5 (#25887)

mui · Apr 22, 2021 · 4d7fb7c · 4d7fb7c
1 parent 25cda9e
commit 4d7fb7c
Show file tree

Hide file tree

Showing 15 changed files with 192 additions and 230 deletions.
diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js
@@ -1,15 +1,14 @@
 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 { keyframes, css } from '@material-ui/styled-engine';
 import capitalize from '../utils/capitalize';
 import { darken, lighten } from '../styles/colorManipulator';
 import useTheme from '../styles/useTheme';
 import experimentalStyled from '../styles/experimentalStyled';
 import useThemeProps from '../styles/useThemeProps';
-import linearProgressClasses, { getLinearProgressUtilityClass } from './linearProgressClasses';
+import { getLinearProgressUtilityClass } from './linearProgressClasses';
 
 const TRANSITION_DURATION = 4; // seconds
 const indeterminate1Keyframe = keyframes`
@@ -63,35 +62,6 @@ const bufferKeyframe = keyframes`
   }
 `;
 
-const overridesResolver = (props, styles) => {
-  const { styleProps } = props;
-
-  return deepmerge(styles.root || {}, {
-    ...styles[`color${capitalize(styleProps.color)}`],
-    ...styles[styleProps.variant],
-    [`& .${linearProgressClasses.dashed}`]: styleProps.variant === 'buffer' && {
-      ...styles.dashed,
-      ...styles[`dashedColor${capitalize(styleProps.color)}`],
-    },
-    [`& .${linearProgressClasses.bar}`]: {
-      ...styles.bar,
-      ...styles[`barColor${capitalize(styleProps.color)}`],
-    },
-    [`& .${linearProgressClasses.bar1Indeterminate}`]:
-      (styleProps.variant === 'indeterminate' || styleProps.variant === 'query') &&
-      styles.bar1Indeterminate,
-    [`& .${linearProgressClasses.bar1Determinate}`]:
-      styleProps.variant === 'determinate' && styles.bar1Determinate,
-    [`& .${linearProgressClasses.bar1Buffer}`]:
-      styleProps.variant === 'buffer' && styles.bar1Buffer,
-    [`& .${linearProgressClasses.bar2Indeterminate}`]:
-      (styleProps.variant === 'indeterminate' || styleProps.variant === 'query') &&
-      styles.bar2Indeterminate,
-    [`& .${linearProgressClasses.bar2Buffer}`]:
-      styleProps.variant === 'buffer' && styles.bar2Buffer,
-  });
-};
-
 const useUtilityClasses = (styleProps) => {
   const { classes, variant, color } = styleProps;
 
@@ -132,7 +102,15 @@ const LinearProgressRoot = experimentalStyled(
   {
     name: 'MuiLinearProgress',
     slot: 'Root',
-    overridesResolver,
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.root,
+        ...styles[`color${capitalize(styleProps.color)}`],
+        ...styles[styleProps.variant],
+      };
+    },
   },
 )(({ styleProps, theme }) => ({
   /* Styles applied to the root element. */
@@ -171,6 +149,14 @@ const LinearProgressDashed = experimentalStyled(
   {
     name: 'MuiLinearProgress',
     slot: 'Dashed',
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.dashed,
+        ...styles[`dashedColor${capitalize(styleProps.color)}`],
+      };
+    },
   },
 )(
   ({ styleProps, theme }) => {
@@ -201,6 +187,18 @@ const LinearProgressBar1 = experimentalStyled(
   {
     name: 'MuiLinearProgress',
     slot: 'Bar1',
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.bar,
+        ...styles[`barColor${capitalize(styleProps.color)}`],
+        ...((styleProps.variant === 'indeterminate' || styleProps.variant === 'query') &&
+          styles.bar1Indeterminate),
+        ...(styleProps.variant === 'determinate' && styles.bar1Determinate),
+        ...(styleProps.variant === 'buffer' && styles.bar1Buffer),
+      };
+    },
   },
 )(
   ({ styleProps, theme }) => ({
@@ -239,6 +237,17 @@ const LinearProgressBar2 = experimentalStyled(
   {
     name: 'MuiLinearProgress',
     slot: 'Bar2',
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.bar,
+        ...styles[`barColor${capitalize(styleProps.color)}`],
+        ...((styleProps.variant === 'indeterminate' || styleProps.variant === 'query') &&
+          styles.bar2Indeterminate),
+        ...(styleProps.variant === 'buffer' && styles.bar2Buffer),
+      };
+    },
   },
 )(
   ({ styleProps, theme }) => ({

diff --git a/packages/material-ui/src/Link/Link.js b/packages/material-ui/src/Link/Link.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { deepmerge, elementTypeAcceptingRef } from '@material-ui/utils';
+import { elementTypeAcceptingRef } from '@material-ui/utils';
 import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import capitalize from '../utils/capitalize';
 import experimentalStyled from '../styles/experimentalStyled';
@@ -11,18 +11,6 @@ import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
 
-const overridesResolver = (props, styles) => {
-  const { styleProps } = props;
-
-  return deepmerge(
-    {
-      ...styles[`underline${capitalize(styleProps.underline)}`],
-      ...(styleProps.component === 'button' && styles.button),
-    },
-    styles.root || {},
-  );
-};
-
 const useUtilityClasses = (styleProps) => {
   const { classes, component, focusVisible, underline } = styleProps;
 
@@ -44,7 +32,15 @@ const LinkRoot = experimentalStyled(
   {
     name: 'MuiLink',
     slot: 'Root',
-    overridesResolver,
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.root,
+        ...styles[`underline${capitalize(styleProps.underline)}`],
+        ...(styleProps.component === 'button' && styles.button),
+      };
+    },
   },
 )(({ styleProps }) => {
   return {

diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
@@ -1,26 +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 ListContext from './ListContext';
 import { getListUtilityClass } from './listClasses';
 
-const overridesResolver = (props, styles) => {
-  const { styleProps } = props;
-
-  return deepmerge(
-    {
-      ...(!styleProps.disablePadding && styles.padding),
-      ...(styleProps.dense && styles.dense),
-      ...(styleProps.subheader && styles.subheader),
-    },
-    styles.root || {},
-  );
-};
-
 const useUtilityClasses = (styleProps) => {
   const { classes, disablePadding, dense, subheader } = styleProps;
 
@@ -37,7 +23,16 @@ const ListRoot = experimentalStyled(
   {
     name: 'MuiList',
     slot: 'Root',
-    overridesResolver,
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.root,
+        ...(!styleProps.disablePadding && styles.padding),
+        ...(styleProps.dense && styles.dense),
+        ...(styleProps.subheader && styles.subheader),
+      };
+    },
   },
 )(({ styleProps }) => ({
   /* Styles applied to the root element. */

diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, isHostComponent } from '@material-ui/unstyled';
-import { deepmerge, chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils';
+import { chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils';
 import experimentalStyled from '../styles/experimentalStyled';
 import useThemeProps from '../styles/useThemeProps';
 import { alpha } from '../styles/colorManipulator';
@@ -16,17 +16,15 @@ import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 export const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
-  return deepmerge(
-    {
-      ...(styleProps.dense && styles.dense),
-      ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
-      ...(styleProps.divider && styles.divider),
-      ...(!styleProps.disableGutters && styles.gutters),
-      ...(styleProps.button && styles.button),
-      ...(styleProps.hasSecondaryAction && styles.secondaryAction),
-    },
-    styles.root || {},
-  );
+  return {
+    ...styles.root,
+    ...(styleProps.dense && styles.dense),
+    ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
+    ...(styleProps.divider && styles.divider),
+    ...(!styleProps.disableGutters && styles.gutters),
+    ...(styleProps.button && styles.button),
+    ...(styleProps.hasSecondaryAction && styles.secondaryAction),
+  };
 };
 
 const useUtilityClasses = (styleProps) => {

diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
@@ -1,24 +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 ListContext from '../List/ListContext';
 import experimentalStyled from '../styles/experimentalStyled';
 import useThemeProps from '../styles/useThemeProps';
 import { getListItemAvatarUtilityClass } from './listItemAvatarClasses';
 
-const overridesResolver = (props, styles) => {
-  const { styleProps } = props;
-
-  return deepmerge(
-    {
-      ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
-    },
-    styles.root || {},
-  );
-};
-
 const useUtilityClasses = (styleProps) => {
   const { alignItems, classes } = styleProps;
 
@@ -35,7 +23,14 @@ const ListItemAvatarRoot = experimentalStyled(
   {
     name: 'MuiListItemAvatar',
     slot: 'Root',
-    overridesResolver,
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.root,
+        ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
+      };
+    },
   },
 )(({ styleProps }) => ({
   /* Styles applied to the root element. */

diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
@@ -1,24 +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 { getListItemIconUtilityClass } from './listItemIconClasses';
 import ListContext from '../List/ListContext';
 
-const overridesResolver = (props, styles) => {
-  const { styleProps } = props;
-
-  return deepmerge(
-    {
-      ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
-    },
-    styles.root || {},
-  );
-};
-
 const useUtilityClasses = (styleProps) => {
   const { alignItems, classes } = styleProps;
 
@@ -35,7 +23,14 @@ const ListItemIconRoot = experimentalStyled(
   {
     name: 'MuiListItemIcon',
     slot: 'Root',
-    overridesResolver,
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.root,
+        ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
+      };
+    },
   },
 )(({ theme, styleProps }) => ({
   /* Styles applied to the root element. */

diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
@@ -1,24 +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 ListContext from '../List/ListContext';
 import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses';
 
-const overridesResolver = (props, styles) => {
-  const { styleProps } = props;
-
-  return deepmerge(
-    {
-      ...(styleProps.disableGutters && styles.disableGutters),
-    },
-    styles.root || {},
-  );
-};
-
 const useUtilityClasses = (styleProps) => {
   const { disableGutters, classes } = styleProps;
 
@@ -35,7 +23,14 @@ const ListItemSecondaryActionRoot = experimentalStyled(
   {
     name: 'MuiListItemSecondaryAction',
     slot: 'Root',
-    overridesResolver,
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+
+      return {
+        ...styles.root,
+        ...(styleProps.disableGutters && styles.disableGutters),
+      };
+    },
   },
 )(({ styleProps }) => ({
   position: 'absolute',