From dec603b2714b44fe30e94247a7804b684dd37100 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 21 Apr 2021 19:32:20 +0200 Subject: [PATCH 01/39] [styled-engine] Skip variants resolver for non root slots by default (#25865) --- .../src/SpeedDialAction/SpeedDialAction.js | 1 + .../src/styles/experimentalStyled.js | 7 ++- .../src/styles/experimentalStyled.test.js | 53 +++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js index d403827f82ec84..1dadcecc64737e 100644 --- a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js @@ -59,6 +59,7 @@ const SpeedDialActionFab = experimentalStyled( { name: 'MuiSpeedDialAction', slot: 'Fab', + skipVariantsResolver: false, overridesResolver: overridesResolverFab, }, )(({ theme, styleProps }) => ({ diff --git a/packages/material-ui/src/styles/experimentalStyled.js b/packages/material-ui/src/styles/experimentalStyled.js index 601cb773ced7c1..3a4bb9897d1c44 100644 --- a/packages/material-ui/src/styles/experimentalStyled.js +++ b/packages/material-ui/src/styles/experimentalStyled.js @@ -72,7 +72,12 @@ const experimentalStyled = (tag, options, muiOptions = {}) => { const componentSlot = muiOptions.slot; const overridesResolver = muiOptions.overridesResolver; - const skipVariantsResolver = muiOptions.skipVariantsResolver || false; + // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots + const skipVariantsResolver = + muiOptions.skipVariantsResolver !== undefined + ? muiOptions.skipVariantsResolver + : (componentSlot && componentSlot !== 'Root') || false; + const skipSx = muiOptions.skipSx || false; let displayName; diff --git a/packages/material-ui/src/styles/experimentalStyled.test.js b/packages/material-ui/src/styles/experimentalStyled.test.js index 5f2345cd56eba6..4aeb865a36370d 100644 --- a/packages/material-ui/src/styles/experimentalStyled.test.js +++ b/packages/material-ui/src/styles/experimentalStyled.test.js @@ -284,6 +284,59 @@ describe('experimentalStyled', () => { }); }); + it('variants should be skipped for non root slots', () => { + const TestSlot = styled( + 'div', + { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' }, + { name: 'MuiTest', slot: 'Slot', overridesResolver: (props, styles) => styles.slot }, + )` + width: 200px; + height: 300px; + `; + + const { container } = render( + + + Test + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + width: '200px', + height: '300px', + }); + }); + + it('variants should respect skipVariantsResolver if defined', () => { + const TestSlot = styled( + 'div', + { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' }, + { + name: 'MuiTest', + slot: 'Slot', + overridesResolver: (props, styles) => styles.slot, + skipVariantsResolver: false, + }, + )` + width: 200px; + height: 300px; + `; + + const { container } = render( + + + Test + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + width: '400px', + height: '400px', + }); + }); + it('variants should win over overrides', () => { const { container } = render( From a4d8c4ffadca14ebb941003082e607a96eacb409 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 21 Apr 2021 19:32:36 +0200 Subject: [PATCH 02/39] [Container] Fix maxWidth="false" resulting in incorrect css (#25869) --- packages/material-ui/src/Container/Container.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js index e2e7328da25305..85b6338d366cc5 100644 --- a/packages/material-ui/src/Container/Container.js +++ b/packages/material-ui/src/Container/Container.js @@ -78,11 +78,12 @@ const ContainerRoot = experimentalStyled( maxWidth: Math.max(theme.breakpoints.values.xs, 444), }, }), - ...(styleProps.maxWidth !== 'xs' && { - [theme.breakpoints.up(styleProps.maxWidth)]: { - maxWidth: `${theme.breakpoints.values[styleProps.maxWidth]}${theme.breakpoints.unit}`, - }, - }), + ...(styleProps.maxWidth && + styleProps.maxWidth !== 'xs' && { + [theme.breakpoints.up(styleProps.maxWidth)]: { + maxWidth: `${theme.breakpoints.values[styleProps.maxWidth]}${theme.breakpoints.unit}`, + }, + }), }), ); From 018118626718d2f4c86212699912700682d80956 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 22 Apr 2021 10:53:30 +0200 Subject: [PATCH 03/39] [docs] Expose heading links in a11y tree (#25861) --- docs/src/modules/components/ApiPage.js | 8 ++++---- docs/src/modules/utils/parseMarkdown.js | 7 ++++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index d1edc3f35c53ff..3a3a44185fa9a0 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -141,13 +141,13 @@ function getTranslatedHeader(t, header) { function Heading(props) { const { hash, level: Level = 'h2' } = props; const t = useTranslate(); + const headingId = `heading-${hash}`; return ( - - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content */} - + + {getTranslatedHeader(t, hash)} - diff --git a/docs/src/modules/utils/parseMarkdown.js b/docs/src/modules/utils/parseMarkdown.js index a2cb3c22cebd28..e169f8d2b8f9a8 100644 --- a/docs/src/modules/utils/parseMarkdown.js +++ b/docs/src/modules/utils/parseMarkdown.js @@ -187,12 +187,13 @@ export function createRender(context) { hash, }); } + const headingId = `heading-${hash}`; return [ - ``, - ``, + ``, + ``, headingHtml, - ``, '', '', ``, From 2ea9dfddfa0641e9adad7300509c20553e7fad02 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Apr 2021 11:48:22 +0200 Subject: [PATCH 04/39] [Drawer] Fix classes forwarded to DOM node for docked drawer (#25870) --- packages/material-ui/src/Button/Button.js | 4 ++-- packages/material-ui/src/Checkbox/Checkbox.js | 4 ++-- .../material-ui/src/DialogContentText/DialogContentText.js | 4 ++-- packages/material-ui/src/Drawer/Drawer.js | 6 ++++-- packages/material-ui/src/FilledInput/FilledInput.js | 4 ++-- packages/material-ui/src/Input/Input.js | 4 ++-- packages/material-ui/src/InputLabel/InputLabel.js | 4 ++-- packages/material-ui/src/Menu/Menu.js | 4 ++-- packages/material-ui/src/MenuItem/MenuItem.js | 4 ++-- packages/material-ui/src/OutlinedInput/OutlinedInput.js | 4 ++-- packages/material-ui/src/Radio/Radio.js | 4 ++-- packages/material-ui/src/styles/experimentalStyled.js | 4 ++-- 12 files changed, 26 insertions(+), 24 deletions(-) diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index cf52016d61dfa0..d66f0df2e1e6de 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -3,7 +3,7 @@ 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, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; @@ -83,7 +83,7 @@ const commonIconStyles = (styleProps) => ({ const ButtonRoot = experimentalStyled( ButtonBase, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiButton', slot: 'Root', diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 05c46bb0db3423..b0f365b168f06c 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -9,7 +9,7 @@ import { alpha } from '../styles/colorManipulator'; import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox'; import capitalize from '../utils/capitalize'; import useThemeProps from '../styles/useThemeProps'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; const overridesResolver = (props, styles) => { @@ -41,7 +41,7 @@ const useUtilityClasses = (styleProps) => { const CheckboxRoot = experimentalStyled( SwitchBase, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiCheckbox', slot: 'Root', diff --git a/packages/material-ui/src/DialogContentText/DialogContentText.js b/packages/material-ui/src/DialogContentText/DialogContentText.js index 94e92e1e6b2ee0..be126f8c370c11 100644 --- a/packages/material-ui/src/DialogContentText/DialogContentText.js +++ b/packages/material-ui/src/DialogContentText/DialogContentText.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { deepmerge } from '@material-ui/utils'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import Typography from '../Typography'; import { getDialogContentTextUtilityClass } from './dialogContentTextClasses'; @@ -28,7 +28,7 @@ const useUtilityClasses = (styleProps) => { const DialogContentTextRoot = experimentalStyled( Typography, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiDialogContentText', slot: 'Root', diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index 21a337ff49148b..0683de27407f86 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -10,7 +10,7 @@ import capitalize from '../utils/capitalize'; import { duration } from '../styles/transitions'; import useTheme from '../styles/useTheme'; import useThemeProps from '../styles/useThemeProps'; -import experimentalStyled from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import drawerClasses, { getDrawerUtilityClass } from './drawerClasses'; const overridesResolver = (props, styles) => { @@ -61,7 +61,9 @@ const DrawerRoot = experimentalStyled( const DrawerDockedRoot = experimentalStyled( 'div', - {}, + { + shouldForwardProp: rootShouldForwardProp, + }, { name: 'MuiDrawer', slot: 'Docked', diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index 32bbd01551e59f..8d110186de6d3a 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -3,7 +3,7 @@ import { deepmerge, refType } from '@material-ui/utils'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import InputBase from '../InputBase'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { @@ -32,7 +32,7 @@ const useUtilityClasses = (styleProps) => { const FilledInputRoot = experimentalStyled( InputBaseRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiFilledInput', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => { const light = theme.palette.mode === 'light'; diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index 26969cba2f8148..493410a9ebf1dd 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { deepmerge, refType } from '@material-ui/utils'; import InputBase from '../InputBase'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { @@ -36,7 +36,7 @@ const useUtilityClasses = (styleProps) => { const InputRoot = experimentalStyled( InputBaseRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiInput', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => { const light = theme.palette.mode === 'light'; diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index cc234b6fabce41..937681914fe944 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -6,7 +6,7 @@ import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import FormLabel, { formLabelClasses } from '../FormLabel'; import useThemeProps from '../styles/useThemeProps'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import { getInputLabelUtilityClasses } from './inputLabelClasses'; const overridesResolver = (props, styles) => { @@ -47,7 +47,7 @@ const useUtilityClasses = (styleProps) => { const InputLabelRoot = experimentalStyled( FormLabel, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiInputLabel', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => ({ display: 'block', diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 578d3889a4e2e2..ad263652a59bd1 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -7,7 +7,7 @@ import { deepmerge, HTMLElementType } from '@material-ui/utils'; import MenuList from '../MenuList'; import Paper from '../Paper'; import Popover from '../Popover'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import menuClasses, { getMenuUtilityClass } from './menuClasses'; @@ -45,7 +45,7 @@ const useUtilityClasses = (styleProps) => { const MenuRoot = experimentalStyled( Popover, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiMenu', slot: 'Root', diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js index b1eec46ba0920d..c666a2df99fdb8 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.js +++ b/packages/material-ui/src/MenuItem/MenuItem.js @@ -3,7 +3,7 @@ import { deepmerge } from '@material-ui/utils'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { getMenuItemUtilityClass } from './menuItemClasses'; import ListItem from '../ListItem'; @@ -27,7 +27,7 @@ const useUtilityClasses = (styleProps) => { const MenuItemRoot = experimentalStyled( ListItemRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiMenuItem', slot: 'Root', diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index e24e327abe2ac4..2ed8239cd6edcf 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { deepmerge, refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import NotchedOutline from './NotchedOutline'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; import InputBase, { overridesResolver as inputBaseOverridesResolver, @@ -37,7 +37,7 @@ const useUtilityClasses = (styleProps) => { const OutlinedInputRoot = experimentalStyled( InputBaseRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiOutlinedInput', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => { const borderColor = diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 708b08f6cb7552..29c6b827fc8736 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -10,7 +10,7 @@ import capitalize from '../utils/capitalize'; import createChainedFunction from '../utils/createChainedFunction'; import useRadioGroup from '../RadioGroup/useRadioGroup'; import radioClasses, { getRadioUtilityClass } from './radioClasses'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; const overridesResolver = (props, styles) => { const { styleProps } = props; @@ -33,7 +33,7 @@ const useUtilityClasses = (styleProps) => { const RadioRoot = experimentalStyled( SwitchBase, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiRadio', slot: 'Root', diff --git a/packages/material-ui/src/styles/experimentalStyled.js b/packages/material-ui/src/styles/experimentalStyled.js index 3a4bb9897d1c44..8566dd64cb81be 100644 --- a/packages/material-ui/src/styles/experimentalStyled.js +++ b/packages/material-ui/src/styles/experimentalStyled.js @@ -52,7 +52,7 @@ const variantsResolver = (props, styles, theme, name) => { return variantsStyles; }; -export const shouldForwardProp = (prop) => +export const rootShouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && @@ -90,7 +90,7 @@ const experimentalStyled = (tag, options, muiOptions = {}) => { const defaultStyledResolver = styled(tag, { ...(!componentSlot || componentSlot === 'Root' - ? { shouldForwardProp } + ? { shouldForwardProp: rootShouldForwardProp } : { shouldForwardProp: slotShouldForwardProp }), label: className || componentName || '', ...options, From 997bab3f0e9c8e412f9882c4580c2724e9172898 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Thu, 22 Apr 2021 10:38:56 +0000 Subject: [PATCH 05/39] Bump @typescript-eslint/eslint-plugin from 4.20.0 to 4.21.0 (#25721) --- yarn.lock | 112 +++++++++++++++++++----------------------------------- 1 file changed, 39 insertions(+), 73 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4733205cc160b9..6aeba0113092fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3250,12 +3250,12 @@ "@types/node" "*" "@typescript-eslint/eslint-plugin@^4.11.1": - version "4.20.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.20.0.tgz#9d8794bd99aad9153092ad13c96164e3082e9a92" - integrity sha512-sw+3HO5aehYqn5w177z2D82ZQlqHCwcKSMboueo7oE4KU9QiC0SAgfS/D4z9xXvpTc8Bt41Raa9fBR8T2tIhoQ== + version "4.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.21.0.tgz#3fce2bfa76d95c00ac4f33dff369cb593aab8878" + integrity sha512-FPUyCPKZbVGexmbCFI3EQHzCZdy2/5f+jv6k2EDljGdXSRc0cKvbndd2nHZkSLqCNOPk0jB6lGzwIkglXcYVsQ== dependencies: - "@typescript-eslint/experimental-utils" "4.20.0" - "@typescript-eslint/scope-manager" "4.20.0" + "@typescript-eslint/experimental-utils" "4.21.0" + "@typescript-eslint/scope-manager" "4.21.0" debug "^4.1.1" functional-red-black-tree "^1.0.1" lodash "^4.17.15" @@ -3263,94 +3263,60 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@4.20.0": - version "4.20.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.20.0.tgz#a8ab2d7b61924f99042b7d77372996d5f41dc44b" - integrity sha512-sQNlf6rjLq2yB5lELl3gOE7OuoA/6IVXJUJ+Vs7emrQMva14CkOwyQwD7CW+TkmOJ4Q/YGmoDLmbfFrpGmbKng== +"@typescript-eslint/experimental-utils@4.21.0": + version "4.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.21.0.tgz#0b0bb7c15d379140a660c003bdbafa71ae9134b6" + integrity sha512-cEbgosW/tUFvKmkg3cU7LBoZhvUs+ZPVM9alb25XvR0dal4qHL3SiUqHNrzoWSxaXA9gsifrYrS1xdDV6w/gIA== dependencies: "@types/json-schema" "^7.0.3" - "@typescript-eslint/scope-manager" "4.20.0" - "@typescript-eslint/types" "4.20.0" - "@typescript-eslint/typescript-estree" "4.20.0" + "@typescript-eslint/scope-manager" "4.21.0" + "@typescript-eslint/types" "4.21.0" + "@typescript-eslint/typescript-estree" "4.21.0" eslint-scope "^5.0.0" eslint-utils "^2.0.0" "@typescript-eslint/parser@^4.11.1", "@typescript-eslint/parser@^4.4.1": - version "4.18.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.18.0.tgz#a211edb14a69fc5177054bec04c95b185b4dde21" - integrity sha512-W3z5S0ZbecwX3PhJEAnq4mnjK5JJXvXUDBYIYGoweCyWyuvAKfGHvzmpUzgB5L4cRBb+cTu9U/ro66dx7dIimA== + version "4.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.21.0.tgz#a227fc2af4001668c3e3f7415d4feee5093894c1" + integrity sha512-eyNf7QmE5O/l1smaQgN0Lj2M/1jOuNg2NrBm1dqqQN0sVngTLyw8tdCbih96ixlhbF1oINoN8fDCyEH9SjLeIA== dependencies: - "@typescript-eslint/scope-manager" "4.18.0" - "@typescript-eslint/types" "4.18.0" - "@typescript-eslint/typescript-estree" "4.18.0" + "@typescript-eslint/scope-manager" "4.21.0" + "@typescript-eslint/types" "4.21.0" + "@typescript-eslint/typescript-estree" "4.21.0" debug "^4.1.1" -"@typescript-eslint/scope-manager@4.18.0": - version "4.18.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.18.0.tgz#d75b55234c35d2ff6ac945758d6d9e53be84a427" - integrity sha512-olX4yN6rvHR2eyFOcb6E4vmhDPsfdMyfQ3qR+oQNkAv8emKKlfxTWUXU5Mqxs2Fwe3Pf1BoPvrwZtwngxDzYzQ== +"@typescript-eslint/scope-manager@4.21.0": + version "4.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.21.0.tgz#c81b661c4b8af1ec0c010d847a8f9ab76ab95b4d" + integrity sha512-kfOjF0w1Ix7+a5T1knOw00f7uAP9Gx44+OEsNQi0PvvTPLYeXJlsCJ4tYnDj5PQEYfpcgOH5yBlw7K+UEI9Agw== dependencies: - "@typescript-eslint/types" "4.18.0" - "@typescript-eslint/visitor-keys" "4.18.0" + "@typescript-eslint/types" "4.21.0" + "@typescript-eslint/visitor-keys" "4.21.0" -"@typescript-eslint/scope-manager@4.20.0": - version "4.20.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.20.0.tgz#953ecbf3b00845ece7be66246608be9d126d05ca" - integrity sha512-/zm6WR6iclD5HhGpcwl/GOYDTzrTHmvf8LLLkwKqqPKG6+KZt/CfSgPCiybshmck66M2L5fWSF/MKNuCwtKQSQ== - dependencies: - "@typescript-eslint/types" "4.20.0" - "@typescript-eslint/visitor-keys" "4.20.0" - -"@typescript-eslint/types@4.18.0": - version "4.18.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.18.0.tgz#bebe323f81f2a7e2e320fac9415e60856267584a" - integrity sha512-/BRociARpj5E+9yQ7cwCF/SNOWwXJ3qhjurMuK2hIFUbr9vTuDeu476Zpu+ptxY2kSxUHDGLLKy+qGq2sOg37A== +"@typescript-eslint/types@4.21.0": + version "4.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.21.0.tgz#abdc3463bda5d31156984fa5bc316789c960edef" + integrity sha512-+OQaupjGVVc8iXbt6M1oZMwyKQNehAfLYJJ3SdvnofK2qcjfor9pEM62rVjBknhowTkh+2HF+/KdRAc/wGBN2w== -"@typescript-eslint/types@4.20.0": - version "4.20.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.20.0.tgz#c6cf5ef3c9b1c8f699a9bbdafb7a1da1ca781225" - integrity sha512-cYY+1PIjei1nk49JAPnH1VEnu7OYdWRdJhYI5wiKOUMhLTG1qsx5cQxCUTuwWCmQoyriadz3Ni8HZmGSofeC+w== - -"@typescript-eslint/typescript-estree@4.18.0": - version "4.18.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.18.0.tgz#756d3e61da8c16ab99185532c44872f4cd5538cb" - integrity sha512-wt4xvF6vvJI7epz+rEqxmoNQ4ZADArGQO9gDU+cM0U5fdVv7N+IAuVoVAoZSOZxzGHBfvE3XQMLdy+scsqFfeg== +"@typescript-eslint/typescript-estree@4.21.0": + version "4.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.21.0.tgz#3817bd91857beeaeff90f69f1f112ea58d350b0a" + integrity sha512-ZD3M7yLaVGVYLw4nkkoGKumb7Rog7QID9YOWobFDMQKNl+vPxqVIW/uDk+MDeGc+OHcoG2nJ2HphwiPNajKw3w== dependencies: - "@typescript-eslint/types" "4.18.0" - "@typescript-eslint/visitor-keys" "4.18.0" + "@typescript-eslint/types" "4.21.0" + "@typescript-eslint/visitor-keys" "4.21.0" debug "^4.1.1" globby "^11.0.1" is-glob "^4.0.1" semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/typescript-estree@4.20.0": - version "4.20.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.20.0.tgz#8b3b08f85f18a8da5d88f65cb400f013e88ab7be" - integrity sha512-Knpp0reOd4ZsyoEJdW8i/sK3mtZ47Ls7ZHvD8WVABNx5Xnn7KhenMTRGegoyMTx6TiXlOVgMz9r0pDgXTEEIHA== - dependencies: - "@typescript-eslint/types" "4.20.0" - "@typescript-eslint/visitor-keys" "4.20.0" - debug "^4.1.1" - globby "^11.0.1" - is-glob "^4.0.1" - semver "^7.3.2" - tsutils "^3.17.1" - -"@typescript-eslint/visitor-keys@4.18.0": - version "4.18.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.18.0.tgz#4e6fe2a175ee33418318a029610845a81e2ff7b6" - integrity sha512-Q9t90JCvfYaN0OfFUgaLqByOfz8yPeTAdotn/XYNm5q9eHax90gzdb+RJ6E9T5s97Kv/UHWKERTmqA0jTKAEHw== - dependencies: - "@typescript-eslint/types" "4.18.0" - eslint-visitor-keys "^2.0.0" - -"@typescript-eslint/visitor-keys@4.20.0": - version "4.20.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.20.0.tgz#1e84db034da13f208325e6bfc995c3b75f7dbd62" - integrity sha512-NXKRM3oOVQL8yNFDNCZuieRIwZ5UtjNLYtmMx2PacEAGmbaEYtGgVHUHVyZvU/0rYZcizdrWjDo+WBtRPSgq+A== +"@typescript-eslint/visitor-keys@4.21.0": + version "4.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.21.0.tgz#990a9acdc124331f5863c2cf21c88ba65233cd8d" + integrity sha512-dH22dROWGi5Z6p+Igc8bLVLmwy7vEe8r+8c+raPQU0LxgogPUrRAtRGtvBWmlr9waTu3n+QLt/qrS/hWzk1x5w== dependencies: - "@typescript-eslint/types" "4.20.0" + "@typescript-eslint/types" "4.21.0" eslint-visitor-keys "^2.0.0" "@ungap/promise-all-settled@1.1.2": From 15ecbf82c7fca7eff0f7a3ba65fc3497bd75e9ac Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Thu, 22 Apr 2021 17:45:58 +0700 Subject: [PATCH 06/39] [Timeline] Migrate Timeline to emotion (#25838) --- docs/pages/api-docs/timeline.json | 6 +- .../api-docs/timeline/timeline.json | 4 +- .../src/Timeline/Timeline.test.tsx | 18 ++-- .../material-ui-lab/src/Timeline/Timeline.tsx | 101 +++++++++++++----- .../material-ui-lab/src/Timeline/index.tsx | 3 + .../src/Timeline/timelineClasses.ts | 14 +++ .../src/composeClasses/composeClasses.ts | 2 +- .../src/styles/experimentalStyled.d.ts | 2 +- 8 files changed, 108 insertions(+), 42 deletions(-) create mode 100644 packages/material-ui-lab/src/Timeline/timelineClasses.ts diff --git a/docs/pages/api-docs/timeline.json b/docs/pages/api-docs/timeline.json index daaca956a69cb3..dc10741c52a05b 100644 --- a/docs/pages/api-docs/timeline.json +++ b/docs/pages/api-docs/timeline.json @@ -8,7 +8,9 @@ "default": "'left'" }, "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } } + "classes": { "type": { "name": "object" } }, + "className": { "type": { "name": "string" } }, + "sx": { "type": { "name": "object" } } }, "name": "Timeline", "styles": { @@ -21,6 +23,6 @@ "filename": "/packages/material-ui-lab/src/Timeline/Timeline.tsx", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/timeline/timeline.json b/docs/translations/api-docs/timeline/timeline.json index 070387d9764fe2..4fcc146321e6ed 100644 --- a/docs/translations/api-docs/timeline/timeline.json +++ b/docs/translations/api-docs/timeline/timeline.json @@ -3,7 +3,9 @@ "propDescriptions": { "align": "The position where the timeline's content should appear.", "children": "The content of the component.", - "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.", + "className": "className applied to the root element.", + "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." }, diff --git a/packages/material-ui-lab/src/Timeline/Timeline.test.tsx b/packages/material-ui-lab/src/Timeline/Timeline.test.tsx index ffdbc7dd48d813..b6144abed6e2a1 100644 --- a/packages/material-ui-lab/src/Timeline/Timeline.test.tsx +++ b/packages/material-ui-lab/src/Timeline/Timeline.test.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance } from 'test/utils'; -import Timeline from './Timeline'; +import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; +import Timeline, { timelineClasses as classes } from '@material-ui/lab/Timeline'; describe('', () => { const mount = createMount(); - let classes: Record; + const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'ul', mount, + render, + muiName: 'MuiTimeline', refInstanceof: window.HTMLUListElement, - skip: ['componentProp'], + testVariantProps: { align: 'right' }, + testStateOverrides: { prop: 'align', value: 'right', styleKey: 'alignRight' }, + skip: ['componentProp', 'componentsProp'], })); }); diff --git a/packages/material-ui-lab/src/Timeline/Timeline.tsx b/packages/material-ui-lab/src/Timeline/Timeline.tsx index 5ab7360950a6c4..f64427aa74e389 100644 --- a/packages/material-ui-lab/src/Timeline/Timeline.tsx +++ b/packages/material-ui-lab/src/Timeline/Timeline.tsx @@ -1,30 +1,21 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import { SxProps } from '@material-ui/system'; // eslint-disable-next-line no-restricted-imports -- importing types import { InternalStandardProps as StandardProps } from '@material-ui/core'; import { capitalize } from '@material-ui/core/utils'; -import { MuiStyles, withStyles } from '@material-ui/core/styles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { + experimentalStyled, + unstable_useThemeProps as useThemeProps, + Theme, +} from '@material-ui/core/styles'; import TimelineContext from './TimelineContext'; +import { getTimelineUtilityClass } from './timelineClasses'; export type TimelineClassKey = 'root' | 'alignLeft' | 'alignRight' | 'alignAlternate'; -export const styles: MuiStyles = { - /* Styles applied to the root element. */ - root: { - display: 'flex', - flexDirection: 'column', - padding: '6px 16px', - flexGrow: 1, - }, - /* Styles applied to the root element if `align="left"`. */ - alignLeft: {}, - /* Styles applied to the root element if `align="right"`. */ - alignRight: {}, - /* Styles applied to the root element if `align="alternate"`. */ - alignAlternate: {}, -}; - export interface TimelineProps extends StandardProps> { /** * The position where the timeline's content should appear. @@ -48,20 +39,70 @@ export interface TimelineProps extends StandardProps; } -const Timeline = React.forwardRef(function Timeline(props, ref) { - const { align = 'left', classes, className, ...other } = props; +type StyleProps = TimelineProps; + +const useUtilityClasses = (styleProps: StyleProps) => { + const { align, classes } = styleProps; + + const slots = { + root: ['root', align && `align${capitalize(align)}`], + }; + + return composeClasses(slots, getTimelineUtilityClass, classes); +}; + +const TimelineRoot = experimentalStyled( + 'ul' as const, + {}, + { + name: 'MuiTimeline' as const, + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.root, + ...(styleProps.align && styles[`align${capitalize(styleProps.align)}` as TimelineClassKey]), + }; + }, + }, +)({ + display: 'flex', + flexDirection: 'column', + padding: '6px 16px', + flexGrow: 1, +}); +/** + * + * Demos: + * + * - [Timeline](https://material-ui.com/components/timeline/) + * + * API: + * + * - [Timeline API](https://material-ui.com/api/timeline/) + */ +const Timeline = React.forwardRef(function Timeline(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTimeline' }); + const { align = 'left', className, ...other } = props; + const styleProps = { ...props, align }; + const classes = useUtilityClasses(styleProps); return ( -
    ( - slots: Record>, + slots: Record>, getUtilityClass: (slot: string) => string, classes: Record | undefined, ): Record { diff --git a/packages/material-ui/src/styles/experimentalStyled.d.ts b/packages/material-ui/src/styles/experimentalStyled.d.ts index 8e4993269555e7..5ce6eeb620b898 100644 --- a/packages/material-ui/src/styles/experimentalStyled.d.ts +++ b/packages/material-ui/src/styles/experimentalStyled.d.ts @@ -101,7 +101,7 @@ export interface StyledOptions { interface MuiStyledOptions { name?: string; slot?: string; - overridesResolver?: (props: any, styles: string | object) => string | object; + overridesResolver?: (props: any, styles: Record) => Record; skipVariantsResolver?: boolean; skipSx?: boolean; } From 818e7449490e202e56e645f4a0aa5e6827ff6212 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Apr 2021 13:24:37 +0200 Subject: [PATCH 07/39] [core] Update slot components to use overridesResolver part 2 (#25864) --- packages/material-ui/src/Backdrop/Backdrop.js | 21 +++---- packages/material-ui/src/Badge/Badge.js | 49 +++++++-------- packages/material-ui/src/Badge/Badge.test.js | 1 - .../src/BottomNavigation/BottomNavigation.js | 4 +- .../BottomNavigationAction.js | 25 ++++---- .../src/Breadcrumbs/Breadcrumbs.js | 22 +++---- packages/material-ui/src/Button/Button.js | 59 ++++++++++--------- .../material-ui/src/ButtonBase/ButtonBase.js | 4 +- .../src/ButtonGroup/ButtonGroup.js | 29 ++++----- .../src/ButtonGroup/ButtonGroup.test.js | 1 - 10 files changed, 98 insertions(+), 117 deletions(-) diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js index f4698c16c14ea0..1568a69b3534c6 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.js +++ b/packages/material-ui/src/Backdrop/Backdrop.js @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { deepmerge } from '@material-ui/utils'; import { isHostComponent } from '@material-ui/unstyled'; import BackdropUnstyled, { backdropUnstyledClasses } from '@material-ui/unstyled/BackdropUnstyled'; import experimentalStyled from '../styles/experimentalStyled'; @@ -9,17 +8,6 @@ import Fade from '../Fade'; export const backdropClasses = backdropUnstyledClasses; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.invisible && styles.invisible), - }, - styles.root || {}, - ); -}; - const extendUtilityClasses = (styleProps) => { const { classes } = styleProps; return classes; @@ -31,7 +19,14 @@ const BackdropRoot = experimentalStyled( { name: 'MuiBackdrop', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.invisible && styles.invisible), + }; + }, }, )(({ styleProps }) => ({ position: 'fixed', diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 660aa481667c42..44340818736a25 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { usePreviousProps, deepmerge } from '@material-ui/utils'; +import { usePreviousProps } from '@material-ui/utils'; import { generateUtilityClasses, isHostComponent } from '@material-ui/unstyled'; import BadgeUnstyled, { badgeUnstyledClasses, @@ -19,27 +19,6 @@ export const badgeClasses = { const RADIUS_STANDARD = 10; const RADIUS_DOT = 4; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - [`& .${badgeClasses.badge}`]: { - ...styles.badge, - ...styles[styleProps.variant], - ...styles[ - `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize( - styleProps.anchorOrigin.horizontal, - )}${capitalize(styleProps.overlap)}` - ], - ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), - ...(styleProps.invisible && styles.invisible), - }, - }, - styles.root || {}, - ); -}; - const extendUtilityClasses = (styleProps) => { const { color, classes = {} } = styleProps; @@ -55,7 +34,11 @@ const extendUtilityClasses = (styleProps) => { const BadgeRoot = styled( 'span', {}, - { name: 'MuiBadge', slot: 'Root', overridesResolver }, + { + name: 'MuiBadge', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, + }, )({ position: 'relative', display: 'inline-flex', @@ -67,7 +50,25 @@ const BadgeRoot = styled( const BadgeBadge = styled( 'span', {}, - { name: 'MuiBadge', slot: 'Badge', overridesResolver }, + { + name: 'MuiBadge', + slot: 'Badge', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.badge, + ...styles[styleProps.variant], + ...styles[ + `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize( + styleProps.anchorOrigin.horizontal, + )}${capitalize(styleProps.overlap)}` + ], + ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), + ...(styleProps.invisible && styles.invisible), + }; + }, + }, )(({ theme, styleProps }) => ({ display: 'flex', flexDirection: 'row', diff --git a/packages/material-ui/src/Badge/Badge.test.js b/packages/material-ui/src/Badge/Badge.test.js index 441637e8c0ed9e..54d1a111fc9b08 100644 --- a/packages/material-ui/src/Badge/Badge.test.js +++ b/packages/material-ui/src/Badge/Badge.test.js @@ -31,7 +31,6 @@ describe('', () => { mount, refInstanceof: window.HTMLSpanElement, muiName: 'MuiBadge', - testDeepOverrides: { slotName: 'badge', slotClassName: classes.badge }, testVariantProps: { color: 'secondary', variant: 'dot' }, }), ); diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.js index f2e8179b55fb2c..7fb4434fa20215 100755 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.js +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.js @@ -7,8 +7,6 @@ import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { getBottomNavigationUtilityClass } from './bottomNavigationClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -25,7 +23,7 @@ const BottomNavigationRoot = experimentalStyled( { name: 'MuiBottomNavigation', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index e089751f705ef9..5783160ce74ed3 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.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'; @@ -11,19 +10,6 @@ import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass, } from './bottomNavigationActionClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.showLabel && !styleProps.selected && styles.iconOnly), - [`& .${bottomNavigationActionClasses.wrapper}`]: styles.wrapper, - [`& .${bottomNavigationActionClasses.label}`]: styles.label, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, showLabel, selected } = styleProps; @@ -42,7 +28,14 @@ const BottomNavigationActionRoot = experimentalStyled( { name: 'MuiBottomNavigationAction', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(!styleProps.showLabel && !styleProps.selected && styles.iconOnly), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ @@ -70,6 +63,7 @@ const BottomNavigationActionWrapper = experimentalStyled( { name: 'MuiBottomNavigationAction', slot: 'Wrapper', + overridesResolver: (props, styles) => styles.wrapper, }, )({ /* Styles applied to the span element that wraps the icon and label. */ @@ -86,6 +80,7 @@ const BottomNavigationActionLabel = experimentalStyled( { name: 'MuiBottomNavigationAction', slot: 'Label', + overridesResolver: (props, styles) => styles.label, }, )(({ theme, styleProps }) => ({ /* Styles applied to the label's span element. */ diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js index 17364e2934cbd7..47efe30dc00936 100644 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.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, integerPropType } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; @@ -10,17 +10,6 @@ import Typography from '../Typography'; import BreadcrumbCollapsed from './BreadcrumbCollapsed'; import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses'; -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${breadcrumbsClasses.ol}`]: styles.ol, - [`& .${breadcrumbsClasses.li}`]: styles.li, - [`& .${breadcrumbsClasses.separator}`]: styles.separator, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -40,7 +29,12 @@ const BreadcrumbsRoot = experimentalStyled( { name: 'MuiBreadcrumbs', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + return { + [`& .${breadcrumbsClasses.li}`]: styles.li, + ...styles.root, + }; + }, }, )({}); @@ -50,6 +44,7 @@ const BreadcrumbsOl = experimentalStyled( { name: 'MuiBreadcrumbs', slot: 'Ol', + overridesResolver: (props, styles) => styles.ol, }, )({ display: 'flex', @@ -66,6 +61,7 @@ const BreadcrumbsSeparator = experimentalStyled( { name: 'MuiBreadcrumbs', slot: 'Separator', + overridesResolver: (props, styles) => styles.separator, }, )({ display: 'flex', diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index d66f0df2e1e6de..deb16e9580b33a 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.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, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; @@ -10,32 +9,6 @@ import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`], - ...styles[`size${capitalize(styleProps.size)}`], - ...styles[`${styleProps.variant}Size${capitalize(styleProps.size)}`], - ...(styleProps.color === 'inherit' && styles.colorInherit), - ...(styleProps.disableElevation && styles.disableElevation), - ...(styleProps.fullWidth && styles.fullWidth), - [`& .${buttonClasses.label}`]: styles.label, - [`& .${buttonClasses.startIcon}`]: { - ...styles.startIcon, - ...styles[`iconSize${capitalize(styleProps.size)}`], - }, - [`& .${buttonClasses.endIcon}`]: { - ...styles.endIcon, - ...styles[`iconSize${capitalize(styleProps.size)}`], - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { color, disableElevation, fullWidth, size, variant, classes } = styleProps; @@ -87,7 +60,20 @@ const ButtonRoot = experimentalStyled( { name: 'MuiButton', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`], + ...styles[`size${capitalize(styleProps.size)}`], + ...styles[`${styleProps.variant}Size${capitalize(styleProps.size)}`], + ...(styleProps.color === 'inherit' && styles.colorInherit), + ...(styleProps.disableElevation && styles.disableElevation), + ...(styleProps.fullWidth && styles.fullWidth), + }; + }, }, )( ({ theme, styleProps }) => ({ @@ -264,6 +250,7 @@ const ButtonLabel = experimentalStyled( { name: 'MuiButton', slot: 'Label', + overridesResolver: (props, styles) => styles.label, }, )({ width: '100%', // Ensure the correct width for iOS Safari @@ -278,6 +265,14 @@ const ButtonStartIcon = experimentalStyled( { name: 'MuiButton', slot: 'StartIcon', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.startIcon, + ...styles[`iconSize${capitalize(styleProps.size)}`], + }; + }, }, )(({ styleProps }) => ({ display: 'inherit', @@ -295,6 +290,14 @@ const ButtonEndIcon = experimentalStyled( { name: 'MuiButton', slot: 'EndIcon', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.endIcon, + ...styles[`iconSize${capitalize(styleProps.size)}`], + }; + }, }, )(({ styleProps }) => ({ display: 'inherit', diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js index a8e68d058f54e9..a5f7f7ec0eed1f 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.js @@ -11,8 +11,6 @@ import useIsFocusVisible from '../utils/useIsFocusVisible'; import TouchRipple from './TouchRipple'; import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { disabled, focusVisible, focusVisibleClassName, classes } = styleProps; @@ -32,7 +30,7 @@ const useUtilityClasses = (styleProps) => { export const ButtonBaseRoot = experimentalStyled( 'button', {}, - { name: 'MuiButtonBase', slot: 'Root', overridesResolver }, + { name: 'MuiButtonBase', slot: 'Root', overridesResolver: (props, styles) => styles.root }, )({ display: 'inline-flex', alignItems: 'center', diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js index e9a8bb59989d8f..15fc27046a61c7 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js @@ -2,7 +2,6 @@ import * as React from 'react'; import { isFragment } from 'react-is'; 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 capitalize from '../utils/capitalize'; import { alpha } from '../styles/colorManipulator'; @@ -13,22 +12,20 @@ import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupCla const overridesResolver = (props, styles) => { const { styleProps } = props; - return deepmerge( - { - ...styles[styleProps.variant], - ...(styleProps.disableElevation === true && styles.disableElevation), - ...(styleProps.fullWidth && styles.fullWidth), - ...(styleProps.orientation === 'vertical' && styles.vertical), - [`& .${buttonGroupClasses.grouped}`]: { - ...styles.grouped, - ...styles[`grouped${capitalize(styleProps.orientation)}`], - ...styles[`grouped${capitalize(styleProps.variant)}`], - ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.orientation)}`], - ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.color)}`], - }, + return { + [`& .${buttonGroupClasses.grouped}`]: { + ...styles.grouped, + ...styles[`grouped${capitalize(styleProps.orientation)}`], + ...styles[`grouped${capitalize(styleProps.variant)}`], + ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.orientation)}`], + ...styles[`grouped${capitalize(styleProps.variant)}${capitalize(styleProps.color)}`], }, - styles.root || {}, - ); + ...styles.root, + ...styles[styleProps.variant], + ...(styleProps.disableElevation === true && styles.disableElevation), + ...(styleProps.fullWidth && styles.fullWidth), + ...(styleProps.orientation === 'vertical' && styles.vertical), + }; }; const useUtilityClasses = (styleProps) => { diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.test.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.test.js index 69fd7cd788fd37..71f959b39e61b5 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.test.js @@ -21,7 +21,6 @@ describe('', () => { testComponentPropWith: 'span', muiName: 'MuiButtonGroup', testVariantProps: { variant: 'contained' }, - testDeepOverrides: { slotName: 'grouped', slotClassName: classes.grouped }, skip: ['componentsProp'], }), ); From 0bdbe1d7c30476158c93ecff2929aa8e34549f33 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Apr 2021 13:25:31 +0200 Subject: [PATCH 08/39] [core] Update slot components to use overridesResolver part 3 (#25881) [core] Update slot components to use overridesResolver part 3 (#25881) --- packages/material-ui/src/Card/Card.js | 4 +- .../src/CardActionArea/CardActionArea.js | 13 +-- .../src/CardActions/CardActions.js | 21 ++--- .../src/CardContent/CardContent.js | 4 +- .../material-ui/src/CardHeader/CardHeader.js | 23 ++---- .../material-ui/src/CardMedia/CardMedia.js | 26 +++--- packages/material-ui/src/Checkbox/Checkbox.js | 24 +++--- packages/material-ui/src/Chip/Chip.js | 82 +++++++++---------- .../src/CircularProgress/CircularProgress.js | 44 +++++----- packages/material-ui/src/Collapse/Collapse.js | 38 ++++----- .../material-ui/src/Container/Container.js | 25 +++--- packages/material-ui/src/Dialog/Dialog.js | 44 +++++----- .../src/DialogActions/DialogActions.js | 21 ++--- .../src/DialogContent/DialogContent.js | 21 ++--- .../DialogContentText/DialogContentText.js | 7 +- .../src/DialogTitle/DialogTitle.js | 4 +- packages/material-ui/src/Divider/Divider.js | 63 +++++++------- packages/material-ui/src/Drawer/Drawer.js | 35 ++++---- 18 files changed, 219 insertions(+), 280 deletions(-) diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js index becfe0e421676e..1ff2ba3b408db6 100644 --- a/packages/material-ui/src/Card/Card.js +++ b/packages/material-ui/src/Card/Card.js @@ -8,8 +8,6 @@ import useThemeProps from '../styles/useThemeProps'; import Paper from '../Paper'; import { getCardUtilityClass } from './cardClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -26,7 +24,7 @@ const CardRoot = experimentalStyled( { name: 'MuiCard', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(() => { /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/CardActionArea/CardActionArea.js b/packages/material-ui/src/CardActionArea/CardActionArea.js index c832cec8e76fef..9f9dd23b184b86 100644 --- a/packages/material-ui/src/CardActionArea/CardActionArea.js +++ b/packages/material-ui/src/CardActionArea/CardActionArea.js @@ -1,22 +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 useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses'; import ButtonBase from '../ButtonBase'; -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${cardActionAreaClasses.focusHighlight}`]: styles.focusHighlight, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -34,7 +24,7 @@ const CardActionAreaRoot = experimentalStyled( { name: 'MuiCardActionArea', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => ({ /* Styles applied to the root element. */ @@ -58,6 +48,7 @@ const CardActionAreaFocusHighlight = experimentalStyled( { name: 'MuiCardActionArea', slot: 'FocusHighlight', + overridesResolver: (props, styles) => styles.focusHighlight, }, )(({ theme }) => ({ /* Styles applied to the overlay that covers the action area when it is keyboard focused. */ diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js index 6cb26331f6d88b..b9ac19644cfb4c 100644 --- a/packages/material-ui/src/CardActions/CardActions.js +++ b/packages/material-ui/src/CardActions/CardActions.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 { getCardActionsUtilityClass } from './cardActionsClasses'; -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 CardActionsRoot = experimentalStyled( { name: 'MuiCardActions', 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/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js index aaa18177fd7e01..7d77eda645fff8 100644 --- a/packages/material-ui/src/CardContent/CardContent.js +++ b/packages/material-ui/src/CardContent/CardContent.js @@ -6,8 +6,6 @@ import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { getCardContentUtilityClass } from './cardContentClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -24,7 +22,7 @@ const CardContentRoot = experimentalStyled( { name: 'MuiCardContent', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(() => { /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js index 215c8612d917a2..304e0ee5bb5b7e 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.js +++ b/packages/material-ui/src/CardHeader/CardHeader.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 Typography from '../Typography'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses'; -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${cardHeaderClasses.avatar}`]: styles.avatar, - [`& .${cardHeaderClasses.action}`]: styles.action, - [`& .${cardHeaderClasses.content}`]: styles.content, - [`& .${cardHeaderClasses.title}`]: styles.title, - [`& .${cardHeaderClasses.subheader}`]: styles.subheader, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -42,7 +28,11 @@ const CardHeaderRoot = experimentalStyled( { name: 'MuiCardHeader', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => ({ + [`& .${cardHeaderClasses.title}`]: styles.title, + [`& .${cardHeaderClasses.subheader}`]: styles.subheader, + ...styles.root, + }), }, )({ /* Styles applied to the root element. */ @@ -57,6 +47,7 @@ const CardHeaderAvatar = experimentalStyled( { name: 'MuiCardHeader', slot: 'Avatar', + overridesResolver: (props, styles) => styles.avatar, }, )({ /* Styles applied to the avatar element. */ @@ -71,6 +62,7 @@ const CardHeaderAction = experimentalStyled( { name: 'MuiCardHeader', slot: 'Action', + overridesResolver: (props, styles) => styles.action, }, )({ /* Styles applied to the action element. */ @@ -87,6 +79,7 @@ const CardHeaderContent = experimentalStyled( { name: 'MuiCardHeader', slot: 'Content', + overridesResolver: (props, styles) => styles.content, }, )({ /* Styles applied to the content wrapper element. */ diff --git a/packages/material-ui/src/CardMedia/CardMedia.js b/packages/material-ui/src/CardMedia/CardMedia.js index 2ffdcf8139ba02..9b1a45a25789f4 100644 --- a/packages/material-ui/src/CardMedia/CardMedia.js +++ b/packages/material-ui/src/CardMedia/CardMedia.js @@ -1,25 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; 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 useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getCardMediaUtilityClass } from './cardMediaClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - const { isMediaComponent, isImageComponent } = styleProps; - - return deepmerge( - { - ...(isMediaComponent && styles.media), - ...(isImageComponent && styles.img), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, isMediaComponent, isImageComponent } = styleProps; @@ -36,7 +23,16 @@ const CardMediaRoot = experimentalStyled( { name: 'MuiCardMedia', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + const { isMediaComponent, isImageComponent } = styleProps; + + return { + ...styles.root, + ...(isMediaComponent && styles.media), + ...(isImageComponent && styles.img), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index b0f365b168f06c..7afee605df5039 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { refType, deepmerge } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import SwitchBase from '../internal/SwitchBase'; import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank'; @@ -12,18 +12,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.indeterminate && styles.indeterminate), - ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, indeterminate, color } = styleProps; @@ -45,7 +33,15 @@ const CheckboxRoot = experimentalStyled( { name: 'MuiCheckbox', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.indeterminate && styles.indeterminate), + ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 0c36846b331875..18fb6084ae0ab1 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.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 CancelIcon from '../internal/svg-icons/Cancel'; import { alpha } from '../styles/colorManipulator'; @@ -13,45 +12,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import chipClasses, { getChipUtilityClass } from './chipClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - const { color, clickable, onDelete, size, variant } = styleProps; - - return deepmerge( - { - ...styles[`size${capitalize(size)}`], - ...styles[`color${capitalize(color)}`], - ...(clickable && styles.clickable), - ...(clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`]), - ...(onDelete && styles.deletable), - ...(onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`]), - ...styles[variant], - ...(variant === 'outlined' && styles[`outlined${capitalize(color)}`]), - [`& .${chipClasses.avatar}`]: { - ...styles.avatar, - ...styles[`avatar${capitalize(size)}`], - ...styles[`avatarColor${capitalize(color)}`], - }, - [`& .${chipClasses.icon}`]: { - ...styles.icon, - ...styles[`icon${capitalize(size)}`], - ...styles[`iconColor${capitalize(color)}`], - }, - [`& .${chipClasses.label}`]: { - ...styles.label, - ...styles[`label${capitalize(size)}`], - }, - [`& .${chipClasses.deleteIcon}`]: { - ...styles.deleteIcon, - ...styles[`deleteIcon${capitalize(size)}`], - ...styles[`deleteIconColor${capitalize(color)}`], - ...styles[`deleteIconOutlinedColor${capitalize(color)}`], - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, disabled, size, color, onDelete, clickable, variant } = styleProps; @@ -88,7 +48,38 @@ const ChipRoot = experimentalStyled( { name: 'MuiChip', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + const { color, clickable, onDelete, size, variant } = styleProps; + + return { + [`& .${chipClasses.avatar}`]: { + ...styles.avatar, + ...styles[`avatar${capitalize(size)}`], + ...styles[`avatarColor${capitalize(color)}`], + }, + [`& .${chipClasses.icon}`]: { + ...styles.icon, + ...styles[`icon${capitalize(size)}`], + ...styles[`iconColor${capitalize(color)}`], + }, + [`& .${chipClasses.deleteIcon}`]: { + ...styles.deleteIcon, + ...styles[`deleteIcon${capitalize(size)}`], + ...styles[`deleteIconColor${capitalize(color)}`], + ...styles[`deleteIconOutlinedColor${capitalize(color)}`], + }, + ...styles.root, + ...styles[`size${capitalize(size)}`], + ...styles[`color${capitalize(color)}`], + ...(clickable && styles.clickable), + ...(clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`]), + ...(onDelete && styles.deletable), + ...(onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`]), + ...styles[variant], + ...(variant === 'outlined' && styles[`outlined${capitalize(color)}`]), + }; + }, }, )( ({ theme, styleProps }) => { @@ -306,6 +297,15 @@ const ChipLabel = experimentalStyled( { name: 'MuiChip', slot: 'Label', + overridesResolver: (props, styles) => { + const { styleProps } = props; + const { size } = styleProps; + + return { + ...styles.label, + ...styles[`label${capitalize(size)}`], + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the label `span` element. */ diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index 1083b19c97a448..1fcdf2fbb3e50d 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -1,15 +1,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; 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 { keyframes, css } from '@material-ui/styled-engine'; import capitalize from '../utils/capitalize'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; -import circularProgressClasses, { - getCircularProgressUtilityClass, -} from './circularProgressClasses'; +import { getCircularProgressUtilityClass } from './circularProgressClasses'; const SIZE = 44; @@ -40,24 +38,6 @@ const circularDashKeyframe = keyframes` } `; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...styles[`color${capitalize(styleProps.color)}`], - [`& .${circularProgressClasses.svg}`]: styles.svg, - [`& .${circularProgressClasses.circle}`]: { - ...styles.circle, - ...styles[`circle${capitalize(styleProps.variant)}`], - ...(styleProps.disableShrink && styles.circleDisableShrink), - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant, color, disableShrink } = styleProps; @@ -76,7 +56,15 @@ const CircularProgressRoot = experimentalStyled( { name: 'MuiCircularProgress', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...styles[`color${capitalize(styleProps.color)}`], + }; + }, }, )( ({ styleProps, theme }) => ({ @@ -105,6 +93,7 @@ const CircularProgressSVG = experimentalStyled( { name: 'MuiCircularProgress', slot: 'Svg', + overridesResolver: (props, styles) => styles.svg, }, )({ /* Styles applied to the svg element. */ @@ -117,6 +106,15 @@ const CircularProgressCircle = experimentalStyled( { name: 'MuiCircularProgress', slot: 'Circle', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.circle, + ...styles[`circle${capitalize(styleProps.variant)}`], + ...(styleProps.disableShrink && styles.circleDisableShrink), + }; + }, }, )( ({ styleProps, theme }) => ({ diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index ef970391bb8614..9b5cda50d07057 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -2,7 +2,7 @@ import * as React from 'react'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; -import { deepmerge, elementTypeAcceptingRef } from '@material-ui/utils'; +import { elementTypeAcceptingRef } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; @@ -10,25 +10,7 @@ import { duration } from '../styles/transitions'; import { getTransitionProps } from '../transitions/utils'; import useTheme from '../styles/useTheme'; import { useForkRef } from '../utils'; -import collapseClasses, { getCollapseUtilityClass } from './collapseClasses'; - -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.orientation], - ...(styleProps.state === 'entered' && styles.entered), - ...(styleProps.state === 'exited' && - !styleProps.in && - styleProps.collapsedSize === '0px' && - styles.hidden), - [`& .${collapseClasses.wrapper}`]: styles.wrapper, - [`& .${collapseClasses.wrapperInner}`]: styles.wrapperInner, - }, - styles.root || {}, - ); -}; +import { getCollapseUtilityClass } from './collapseClasses'; const useUtilityClasses = (styleProps) => { const { orientation, classes } = styleProps; @@ -50,7 +32,19 @@ const CollapseRoot = experimentalStyled( { name: 'MuiCollapse', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.orientation], + ...(styleProps.state === 'entered' && styles.entered), + ...(styleProps.state === 'exited' && + !styleProps.in && + styleProps.collapsedSize === '0px' && + styles.hidden), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ @@ -85,6 +79,7 @@ const CollapseWrapper = experimentalStyled( { name: 'MuiCollapse', slot: 'Wrapper', + overridesResolver: (props, styles) => styles.wrapper, }, )(({ styleProps }) => ({ // Hack to get children with a negative margin to not falsify the height computation. @@ -103,6 +98,7 @@ const CollapseWrapperInner = experimentalStyled( { name: 'MuiCollapse', slot: 'WrapperInner', + overridesResolver: (props, styles) => styles.wrapperInner, }, )(({ styleProps }) => ({ width: '100%', diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js index 85b6338d366cc5..74dce02f098f51 100644 --- a/packages/material-ui/src/Container/Container.js +++ b/packages/material-ui/src/Container/Container.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 useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getContainerUtilityClass } from './containerClasses'; import capitalize from '../utils/capitalize'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`maxWidth${capitalize(String(styleProps.maxWidth))}`], - ...(styleProps.fixed && styles.fixed), - ...(styleProps.disableGutters && styles.disableGutters), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, fixed, disableGutters, maxWidth } = styleProps; @@ -42,7 +28,16 @@ const ContainerRoot = experimentalStyled( { name: 'MuiContainer', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`maxWidth${capitalize(String(styleProps.maxWidth))}`], + ...(styleProps.fixed && styles.fixed), + ...(styleProps.disableGutters && styles.disableGutters), + }; + }, }, )( ({ theme, styleProps }) => ({ diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index 9699dbd9742ece..23e0055ed71798 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.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 capitalize from '../utils/capitalize'; import Modal from '../Modal'; @@ -13,33 +12,13 @@ import experimentalStyled from '../styles/experimentalStyled'; import dialogClasses, { getDialogUtilityClass } from './dialogClasses'; import Backdrop from '../Backdrop'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - [`& .${dialogClasses.container}`]: { - ...styles.container, - ...styles[`scroll${capitalize(styleProps.scroll)}`], - }, - [`& .${dialogClasses.paper}`]: { - ...styles.paper, - ...styles[`scrollPaper${capitalize(styleProps.scroll)}`], - ...styles[`paperWidth${capitalize(String(styleProps.maxWidth))})`], - ...(styleProps.fullWidth && styles.paperFullWidth), - ...(styleProps.fullScreen && styles.paperFullScreen), - }, - }, - styles.root || {}, - ); -}; - const DialogBackdrop = experimentalStyled( Backdrop, {}, { name: 'MuiDialog', slot: 'Backdrop', + overrides: (props, styles) => styles.backdrop, }, )({ // Improve scrollable dialog support. @@ -70,7 +49,7 @@ const DialogRoot = experimentalStyled( { name: 'MuiDialog', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ /* Styles applied to the root element. */ @@ -86,6 +65,14 @@ const DialogContainer = experimentalStyled( { name: 'MuiDialog', slot: 'Container', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.container, + ...styles[`scroll${capitalize(styleProps.scroll)}`], + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the container element. */ @@ -122,6 +109,17 @@ const DialogPaper = experimentalStyled( { name: 'MuiDialog', slot: 'Paper', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.paper, + ...styles[`scrollPaper${capitalize(styleProps.scroll)}`], + ...styles[`paperWidth${capitalize(String(styleProps.maxWidth))})`], + ...(styleProps.fullWidth && styles.paperFullWidth), + ...(styleProps.fullScreen && styles.paperFullScreen), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the Paper component. */ diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js index f029fb14d637bf..889d60eae3b76a 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.js +++ b/packages/material-ui/src/DialogActions/DialogActions.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 { getDialogActionsUtilityClass } from './dialogActionsClasses'; -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 DialogActionsRoot = experimentalStyled( { name: 'MuiDialogActions', 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/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js index 757ded8c531314..1c85090f3c2258 100644 --- a/packages/material-ui/src/DialogContent/DialogContent.js +++ b/packages/material-ui/src/DialogContent/DialogContent.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 { getDialogContentUtilityClass } from './dialogContentClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.dividers && styles.dividers), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, dividers } = styleProps; @@ -34,7 +22,14 @@ const DialogContentRoot = experimentalStyled( { name: 'MuiDialogContent', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.dividers && styles.dividers), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/DialogContentText/DialogContentText.js b/packages/material-ui/src/DialogContentText/DialogContentText.js index be126f8c370c11..261db2b6498029 100644 --- a/packages/material-ui/src/DialogContentText/DialogContentText.js +++ b/packages/material-ui/src/DialogContentText/DialogContentText.js @@ -1,16 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge } from '@material-ui/utils'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import Typography from '../Typography'; import { getDialogContentTextUtilityClass } from './dialogContentTextClasses'; -const overridesResolver = (props, styles) => { - return deepmerge(styles.root || {}, {}); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -32,7 +27,7 @@ const DialogContentTextRoot = experimentalStyled( { name: 'MuiDialogContentText', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ marginBottom: 12 }); diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js index f42aa10a57c9a3..910d45f710b2ff 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.js @@ -7,8 +7,6 @@ import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { getDialogTitleUtilityClass } from './dialogTitleClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -25,7 +23,7 @@ const DialogTitleRoot = experimentalStyled( { name: 'MuiDialogTitle', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(() => { return { diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index 120889b3c50f2e..b603b64da97143 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -1,41 +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 { alpha } from '../styles/colorManipulator'; -import dividerClasses, { getDividerUtilityClass } from './dividerClasses'; - -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.absolute && styles.absolute), - ...styles[styleProps.variant], - ...(styleProps.light && styles.light), - ...(styleProps.orientation === 'vertical' && styles.vertical), - ...(styleProps.flexItem && styles.flexItem), - ...(styleProps.children && styles.withChildren), - ...(styleProps.children && - styleProps.orientation === 'vertical' && - styles.withChildrenVertical), - ...(styleProps.textAlign === 'right' && - styleProps.orientation !== 'vertical' && - styles.textAlignRight), - ...(styleProps.textAlign === 'left' && - styleProps.orientation !== 'vertical' && - styles.textAlignLeft), - [`& .${dividerClasses.wrapper}`]: { - ...styles.wrapper, - ...(styleProps.orientation === 'vertical' && styles.wrapperVertical), - }, - }, - styles.root || {}, - ); -}; +import { getDividerUtilityClass } from './dividerClasses'; const useUtilityClasses = (styleProps) => { const { @@ -74,7 +44,28 @@ const DividerRoot = experimentalStyled( { name: 'MuiDivider', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.absolute && styles.absolute), + ...styles[styleProps.variant], + ...(styleProps.light && styles.light), + ...(styleProps.orientation === 'vertical' && styles.vertical), + ...(styleProps.flexItem && styles.flexItem), + ...(styleProps.children && styles.withChildren), + ...(styleProps.children && + styleProps.orientation === 'vertical' && + styles.withChildrenVertical), + ...(styleProps.textAlign === 'right' && + styleProps.orientation !== 'vertical' && + styles.textAlignRight), + ...(styleProps.textAlign === 'left' && + styleProps.orientation !== 'vertical' && + styles.textAlignLeft), + }; + }, }, )( ({ theme, styleProps }) => ({ @@ -186,6 +177,14 @@ const DividerWrapper = experimentalStyled( { name: 'MuiDivider', slot: 'Wrapper', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.wrapper, + ...(styleProps.orientation === 'vertical' && styles.wrapperVertical), + }; + }, }, )(({ theme, styleProps }) => ({ display: 'inline-block', diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index 0683de27407f86..7343636106adc3 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { deepmerge, integerPropType } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import Modal from '../Modal'; import Slide from '../Slide'; @@ -11,25 +11,17 @@ import { duration } from '../styles/transitions'; import useTheme from '../styles/useTheme'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; -import drawerClasses, { getDrawerUtilityClass } from './drawerClasses'; +import { getDrawerUtilityClass } from './drawerClasses'; const overridesResolver = (props, styles) => { const { styleProps } = props; - return deepmerge( - { - ...((styleProps.variant === 'permanent' || styleProps.variant === 'persistent') && - styles.docked), - ...styles.modal, - [`& .${drawerClasses.paper}`]: { - ...styles.paper, - ...styles[`paperAnchor${capitalize(styleProps.anchor)}`], - ...(styleProps.variant !== 'temporary' && - styles[`paperAnchorDocked${capitalize(styleProps.anchor)}`]), - }, - }, - styles.root || {}, - ); + return { + ...styles.root, + ...((styleProps.variant === 'permanent' || styleProps.variant === 'persistent') && + styles.docked), + ...styles.modal, + }; }; const useUtilityClasses = (styleProps) => { @@ -67,6 +59,7 @@ const DrawerDockedRoot = experimentalStyled( { name: 'MuiDrawer', slot: 'Docked', + skipVariantsResolver: false, overridesResolver, }, )({ @@ -80,6 +73,16 @@ const DrawerPaper = experimentalStyled( { name: 'MuiDrawer', slot: 'Paper', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.paper, + ...styles[`paperAnchor${capitalize(styleProps.anchor)}`], + ...(styleProps.variant !== 'temporary' && + styles[`paperAnchorDocked${capitalize(styleProps.anchor)}`]), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the Paper component. */ From 47f36ca7f8cdf92d32758c4eecde2fc958f09c68 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Apr 2021 15:53:57 +0200 Subject: [PATCH 09/39] [docs] Fix global styles leaking on different pages (#25855) --- docs/pages/_app.js | 4 +--- docs/pages/_document.js | 19 +++++++++++++++++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/pages/_app.js b/docs/pages/_app.js index f86c107986bf1c..8415c960cba640 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -21,9 +21,7 @@ import { ThemeProvider } from 'docs/src/modules/components/ThemeContext'; import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers'; import { ACTION_TYPES, CODE_VARIANTS, LANGUAGES } from 'docs/src/modules/constants'; import { useUserLanguage } from 'docs/src/modules/utils/i18n'; -import DocsStyledEngineProvider, { cacheLtr } from 'docs/src/modules/utils/StyledEngineProvider'; - -export { cacheLtr }; +import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider'; // Configure JSS const jss = create({ diff --git a/docs/pages/_document.js b/docs/pages/_document.js index be2b8aef18025f..7d30b2e1185f22 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -2,13 +2,19 @@ import * as React from 'react'; import { ServerStyleSheets } from '@material-ui/styles'; import { ServerStyleSheet } from 'styled-components'; import createEmotionServer from '@emotion/server/create-instance'; +import { CacheProvider } from '@emotion/react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { LANGUAGES_SSR } from 'docs/src/modules/constants'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import { themeColor } from 'docs/src/modules/components/ThemeContext'; -import { cacheLtr } from 'docs/pages/_app'; +import createCache from '@emotion/cache'; -const { extractCritical } = createEmotionServer(cacheLtr); +const getCache = () => { + const cache = createCache({ key: 'css', prepend: true }); + cache.compat = true; + + return cache; +}; // You can find a benchmark of the available CSS minifiers under // https://github.com/GoalSmashers/css-minification-benchmark @@ -122,11 +128,20 @@ MyDocument.getInitialProps = async (ctx) => { const styledComponentsSheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; + const cache = getCache(); + const { extractCritical } = createEmotionServer(cache); + try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => styledComponentsSheet.collectStyles(materialSheets.collect()), + // Take precedence over the CacheProvider in our custom _app.js + enhanceComponent: (Component) => (props) => ( + + + + ), }); const initialProps = await Document.getInitialProps(ctx); From 25cda9e8f49f5ce8f7721a76fb03a290fc546f4e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Apr 2021 18:50:05 +0200 Subject: [PATCH 10/39] [core] Update slot components to use overridesResolver part 4 (#25884) --- packages/material-ui/src/Fab/Fab.js | 31 ++++----- .../src/FilledInput/FilledInput.js | 26 ++++--- .../src/FormControl/FormControl.js | 19 ++--- .../src/FormControlLabel/FormControlLabel.js | 28 ++++---- .../material-ui/src/FormGroup/FormGroup.js | 21 +++--- .../src/FormHelperText/FormHelperText.js | 29 ++++---- .../material-ui/src/FormLabel/FormLabel.js | 28 ++++---- packages/material-ui/src/Grid/Grid.js | 69 +++++++++---------- packages/material-ui/src/Icon/Icon.js | 23 +++---- .../material-ui/src/IconButton/IconButton.js | 28 ++++---- .../material-ui/src/ImageList/ImageList.js | 22 +++--- .../src/ImageListItem/ImageListItem.js | 24 +++---- .../src/ImageListItemBar/ImageListItemBar.js | 57 +++++++-------- packages/material-ui/src/Input/Input.js | 34 ++++++--- .../material-ui/src/InputBase/InputBase.js | 56 ++++++++------- .../material-ui/src/InputLabel/InputLabel.js | 33 +++++---- .../src/OutlinedInput/OutlinedInput.js | 25 ++++--- 17 files changed, 269 insertions(+), 284 deletions(-) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 09e2d56e69a1ce..70b08108724946 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.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 ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -9,22 +8,6 @@ import useThemeProps from '../styles/useThemeProps'; import fabClasses, { getFabUtilityClass } from './fabClasses'; import experimentalStyled from '../styles/experimentalStyled'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...styles[`size${capitalize(styleProps.size)}`], - ...(styleProps.color === 'inherit' && styles.colorInherit), - ...(styleProps.color === 'primary' && styles.primary), - ...(styleProps.color === 'secondary' && styles.secondary), - [`& .${fabClasses.label}`]: styles.label, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { color, variant, classes, size } = styleProps; @@ -49,7 +32,18 @@ const FabRoot = experimentalStyled( { name: 'MuiFab', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...styles[`size${capitalize(styleProps.size)}`], + ...(styleProps.color === 'inherit' && styles.colorInherit), + ...(styleProps.color === 'primary' && styles.primary), + ...(styleProps.color === 'secondary' && styles.secondary), + }; + }, }, )( ({ theme, styleProps }) => ({ @@ -160,6 +154,7 @@ const FabLabel = experimentalStyled( { name: 'MuiFab', slot: 'Label', + overridesResolver: (props, styles) => styles.label, }, )({ /* Styles applied to the span element that wraps the children. */ diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index 8d110186de6d3a..eb8fd3fd1f65b8 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { deepmerge, refType } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import InputBase from '../InputBase'; @@ -7,18 +7,12 @@ import experimentalStyled, { rootShouldForwardProp } from '../styles/experimenta import useThemeProps from '../styles/useThemeProps'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { - overridesResolver as inputBaseOverridesResolver, + rootOverridesResolver as inputBaseRootOverridesResolver, + inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput, } from '../InputBase/InputBase'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge(inputBaseOverridesResolver(props, styles), { - ...(!styleProps.disableUnderline && styles.underline), - }); -}; - const useUtilityClasses = (styleProps) => { const { classes, disableUnderline } = styleProps; @@ -33,7 +27,17 @@ const useUtilityClasses = (styleProps) => { const FilledInputRoot = experimentalStyled( InputBaseRoot, { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, - { name: 'MuiFilledInput', slot: 'Root', overridesResolver }, + { + name: 'MuiFilledInput', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...inputBaseRootOverridesResolver(props, styles), + ...(!styleProps.disableUnderline && styles.underline), + }; + }, + }, )(({ theme, styleProps }) => { const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; @@ -127,7 +131,7 @@ const FilledInputRoot = experimentalStyled( const FilledInputInput = experimentalStyled( InputBaseInput, {}, - { name: 'MuiFilledInput', slot: 'Input' }, + { name: 'MuiFilledInput', slot: 'Input', overridesResolver: inputBaseInputOverridesResolver }, )(({ theme, styleProps }) => ({ paddingTop: 25, paddingRight: 12, diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index 1aadd6ec9016c3..ef4c676350492e 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.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 useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; @@ -11,16 +10,6 @@ import isMuiElement from '../utils/isMuiElement'; import FormControlContext from './FormControlContext'; import { getFormControlUtilityClasses } from './formControlClasses'; -const overridesResolver = ({ styleProps }, styles) => { - return deepmerge( - { - ...styles[`margin${capitalize(styleProps.margin)}`], - ...(styleProps.fullWidth && styles.fullWidth), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, margin, fullWidth } = styleProps; const slots = { @@ -36,7 +25,13 @@ const FormControlRoot = experimentalStyled( { name: 'MuiFormControl', slot: 'Root', - overridesResolver, + overridesResolver: ({ styleProps }, styles) => { + return { + ...styles.root, + ...styles[`margin${capitalize(styleProps.margin)}`], + ...(styleProps.fullWidth && styles.fullWidth), + }; + }, }, )(({ styleProps }) => ({ display: 'inline-flex', diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index db84cb721db925..bf7e1e5fbc88f6 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { refType, deepmerge } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { useFormControl } from '../FormControl'; import Typography from '../Typography'; @@ -12,18 +12,6 @@ import formControlLabelClasses, { getFormControlLabelUtilityClasses, } from './formControlLabelClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`labelPlacement${capitalize(styleProps.labelPlacement)}`], - [`& .${formControlLabelClasses.label}`]: styles.label, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, disabled, labelPlacement } = styleProps; const slots = { @@ -37,7 +25,19 @@ const useUtilityClasses = (styleProps) => { export const FormControlLabelRoot = experimentalStyled( 'label', {}, - { name: 'MuiFormControlLabel', slot: 'Root', overridesResolver }, + { + name: 'MuiFormControlLabel', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${formControlLabelClasses.label}`]: styles.label, + ...styles.root, + ...styles[`labelPlacement${capitalize(styleProps.labelPlacement)}`], + }; + }, + }, )(({ theme, styleProps }) => ({ display: 'inline-flex', alignItems: 'center', diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js index d5bd65f9b35f74..09758ba7c440c4 100644 --- a/packages/material-ui/src/FormGroup/FormGroup.js +++ b/packages/material-ui/src/FormGroup/FormGroup.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 { getFormGroupUtilityClass } from './formGroupClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.row && styles.row), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, row } = styleProps; @@ -34,7 +22,14 @@ const FormGroupRoot = experimentalStyled( { name: 'MuiFormGroup', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.row && styles.row), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js index d06c4543c8a80c..aa3d6219c7dc38 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.js +++ b/packages/material-ui/src/FormHelperText/FormHelperText.js @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge } from '@material-ui/utils'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import experimentalStyled from '../styles/experimentalStyled'; @@ -10,19 +9,6 @@ import capitalize from '../utils/capitalize'; import formHelperTextClasses, { getFormHelperTextUtilityClasses } from './formHelperTextClasses'; import useThemeProps from '../styles/useThemeProps'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.size && styles[`size${capitalize(styleProps.size)}`]), - ...(styleProps.contained && styles.contained), - ...(styleProps.filled && styles.filled), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, contained, size, disabled, error, filled, focused, required } = styleProps; const slots = { @@ -44,7 +30,20 @@ const useUtilityClasses = (styleProps) => { const FormHelperTextRoot = experimentalStyled( 'p', {}, - { name: 'MuiFormHelperText', slot: 'Root', overridesResolver }, + { + name: 'MuiFormHelperText', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.size && styles[`size${capitalize(styleProps.size)}`]), + ...(styleProps.contained && styles.contained), + ...(styleProps.filled && styles.filled), + }; + }, + }, )(({ theme, styleProps }) => ({ color: theme.palette.text.secondary, ...theme.typography.caption, diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js index 61a4b6d77e1bed..93fc5f4794cef4 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.js +++ b/packages/material-ui/src/FormLabel/FormLabel.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 formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; @@ -10,19 +9,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses'; -export const overridesResolver = ({ styleProps }, styles) => { - return deepmerge( - { - ...(styleProps.color === 'secondary' && styles.colorSecondary), - ...(styleProps.filled && styles.filled), - [`& .${formLabelClasses.asterisk}`]: { - ...styles.asterisk, - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, color, focused, disabled, error, filled, required } = styleProps; const slots = { @@ -44,7 +30,17 @@ const useUtilityClasses = (styleProps) => { export const FormLabelRoot = experimentalStyled( 'label', {}, - { name: 'MuiFormLabel', slot: 'Root', overridesResolver }, + { + name: 'MuiFormLabel', + slot: 'Root', + overridesResolver: ({ styleProps }, styles) => { + return { + ...styles.root, + ...(styleProps.color === 'secondary' && styles.colorSecondary), + ...(styleProps.filled && styles.filled), + }; + }, + }, )(({ theme, styleProps }) => ({ color: theme.palette.text.secondary, ...theme.typography.body1, @@ -64,7 +60,7 @@ export const FormLabelRoot = experimentalStyled( const AsteriskComponent = experimentalStyled( 'span', {}, - { name: 'MuiFormLabel', slot: 'Asterisk' }, + { name: 'MuiFormLabel', slot: 'Asterisk', overridesResolver: (props, styles) => styles.asterisk }, )(({ theme }) => ({ [`&.${formLabelClasses.error}`]: { color: theme.palette.error.main, diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js index 18eee39199e041..90c0b1c2e0f563 100644 --- a/packages/material-ui/src/Grid/Grid.js +++ b/packages/material-ui/src/Grid/Grid.js @@ -12,7 +12,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { deepmerge } from '@material-ui/utils'; import { unstable_extendSxProp as extendSxProp } from '@material-ui/system'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import requirePropFactory from '../utils/requirePropFactory'; @@ -103,39 +102,6 @@ function generateGap({ theme, styleProps }) { return styles; } -const overridesResolver = (props, styles) => { - const { - container, - direction, - item, - lg, - md, - sm, - spacing, - wrap, - xl, - xs, - zeroMinWidth, - } = props.styleProps; - - return deepmerge( - { - ...(container && styles.container), - ...(item && styles.item), - ...(zeroMinWidth && styles.zeroMinWidth), - ...(container && spacing !== 0 && styles[`spacing-xs-${String(spacing)}`]), - ...(direction !== 'row' && styles[`direction-xs-${String(direction)}`]), - ...(wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`]), - ...(xs !== false && styles[`grid-xs-${String(xs)}`]), - ...(sm !== false && styles[`grid-sm-${String(sm)}`]), - ...(md !== false && styles[`grid-md-${String(md)}`]), - ...(lg !== false && styles[`grid-lg-${String(lg)}`]), - ...(xl !== false && styles[`grid-xl-${String(xl)}`]), - }, - styles.root || {}, - ); -}; - // Default CSS values // flex: '0 1 auto', // flexDirection: 'row', @@ -145,7 +111,40 @@ const overridesResolver = (props, styles) => { const GridRoot = experimentalStyled( 'div', {}, - { name: 'MuiGrid', slot: 'Root', overridesResolver }, + { + name: 'MuiGrid', + slot: 'Root', + overridesResolver: (props, styles) => { + const { + container, + direction, + item, + lg, + md, + sm, + spacing, + wrap, + xl, + xs, + zeroMinWidth, + } = props.styleProps; + + return { + ...styles.root, + ...(container && styles.container), + ...(item && styles.item), + ...(zeroMinWidth && styles.zeroMinWidth), + ...(container && spacing !== 0 && styles[`spacing-xs-${String(spacing)}`]), + ...(direction !== 'row' && styles[`direction-xs-${String(direction)}`]), + ...(wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`]), + ...(xs !== false && styles[`grid-xs-${String(xs)}`]), + ...(sm !== false && styles[`grid-sm-${String(sm)}`]), + ...(md !== false && styles[`grid-md-${String(md)}`]), + ...(lg !== false && styles[`grid-lg-${String(lg)}`]), + ...(xl !== false && styles[`grid-xl-${String(xl)}`]), + }; + }, + }, )( ({ styleProps }) => ({ boxSizing: 'border-box', diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js index 569231f5664f62..a638a558c35b4a 100644 --- a/packages/material-ui/src/Icon/Icon.js +++ b/packages/material-ui/src/Icon/Icon.js @@ -2,24 +2,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge } from '@material-ui/utils'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import capitalize from '../utils/capitalize'; import { getIconUtilityClass } from './iconClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.color !== 'inherit' && styles[`color${capitalize(styleProps.color)}`]), - ...styles[`fontSize${capitalize(styleProps.fontSize)}`], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { color, fontSize, classes } = styleProps; @@ -40,7 +27,15 @@ const IconRoot = experimentalStyled( { name: 'MuiIcon', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.color !== 'inherit' && styles[`color${capitalize(styleProps.color)}`]), + ...styles[`fontSize${capitalize(styleProps.fontSize)}`], + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 7a3167671f835c..4b5cf0a4dfb6ae 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; 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'; @@ -10,20 +10,6 @@ import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), - ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]), - ...styles[`size${capitalize(styleProps.size)}`], - [`& .${iconButtonClasses.label}`]: styles.label, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, disabled, color, edge, size } = styleProps; @@ -47,7 +33,16 @@ const IconButtonRoot = experimentalStyled( { name: 'MuiIconButton', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), + ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]), + ...styles[`size${capitalize(styleProps.size)}`], + }; + }, }, )( ({ theme, styleProps }) => ({ @@ -124,6 +119,7 @@ const IconButtonLabel = experimentalStyled( { name: 'MuiIconButton', slot: 'Label', + overridesResolver: (props, styles) => styles.label, }, )({ /* Styles applied to the children container element. */ diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index b7e66f2c0491f2..569e71ad133877 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -1,5 +1,5 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge, integerPropType } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; @@ -8,17 +8,6 @@ import useThemeProps from '../styles/useThemeProps'; import { getImageListUtilityClass } from './imageListClasses'; import ImageListContext from './ImageListContext'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant } = styleProps; @@ -35,7 +24,14 @@ const ImageListRoot = experimentalStyled( { name: 'MuiImageList', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + }; + }, }, )(({ styleProps }) => { /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.js b/packages/material-ui/src/ImageListItem/ImageListItem.js index 730a5e2be5c21f..518e6af94a09ae 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.js +++ b/packages/material-ui/src/ImageListItem/ImageListItem.js @@ -1,5 +1,5 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge, integerPropType } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; @@ -10,18 +10,6 @@ import useThemeProps from '../styles/useThemeProps'; import isMuiElement from '../utils/isMuiElement'; import imageListItemClasses, { getImageListItemUtilityClass } from './imageListItemClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - [`& .${imageListItemClasses.img}`]: styles.img, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant } = styleProps; @@ -39,7 +27,15 @@ const ImageListItemRoot = experimentalStyled( { name: 'MuiImageListItem', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${imageListItemClasses.img}`]: styles.img, + ...styles.root, + ...styles[styleProps.variant], + }; + }, }, )(({ styleProps }) => ({ display: 'inline-block', diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js index 6babcfba090fab..0bc5d4c7a2f483 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js @@ -1,37 +1,11 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge } from '@material-ui/utils'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import capitalize from '../utils/capitalize'; -import imageListItemBarClasses, { - getImageListItemBarUtilityClass, -} from './imageListItemBarClasses'; - -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`position${capitalize(styleProps.position)}`], - [`& .${imageListItemBarClasses.titleWrap}`]: { - ...styles.titleWrap, - ...styles[`titleWrap${capitalize(styleProps.position)}`], - ...(styleProps.actionIcon && - styles[`titleWrapActionPos${capitalize(styleProps.actionPosition)}`]), - }, - [`& .${imageListItemBarClasses.title}`]: styles.title, - [`& .${imageListItemBarClasses.subtitle}`]: styles.subtitle, - [`& .${imageListItemBarClasses.actionIcon}`]: { - ...styles.actionIcon, - ...styles[`actionIconActionPos${capitalize(styleProps.actionPosition)}`], - }, - }, - styles.root || {}, - ); -}; +import { getImageListItemBarUtilityClass } from './imageListItemBarClasses'; const useUtilityClasses = (styleProps) => { const { classes, position, actionIcon, actionPosition } = styleProps; @@ -57,7 +31,14 @@ const ImageListItemBarRoot = experimentalStyled( { name: 'MuiImageListItemBar', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`position${capitalize(styleProps.position)}`], + }; + }, }, )(({ theme, styleProps }) => { return { @@ -92,6 +73,16 @@ const ImageListItemBarTitleWrap = experimentalStyled( { name: 'MuiImageListItemBar', slot: 'TitleWrap', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.titleWrap, + ...styles[`titleWrap${capitalize(styleProps.position)}`], + ...(styleProps.actionIcon && + styles[`titleWrapActionPos${capitalize(styleProps.actionPosition)}`]), + }; + }, }, )(({ theme, styleProps }) => { return { @@ -124,6 +115,7 @@ const ImageListItemBarTitle = experimentalStyled( { name: 'MuiImageListItemBar', slot: 'Title', + overridesResolver: (props, styles) => styles.title, }, )(({ theme }) => { return { @@ -142,6 +134,7 @@ const ImageListItemBarSubtitle = experimentalStyled( { name: 'MuiImageListItemBar', slot: 'Subtitle', + overridesResolver: (props, styles) => styles.subtitle, }, )(({ theme }) => { return { @@ -160,6 +153,14 @@ const ImageListItemBarActionIcon = experimentalStyled( { name: 'MuiImageListItemBar', slot: 'ActionIcon', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.actionIcon, + ...styles[`actionIconActionPos${capitalize(styleProps.actionPosition)}`], + }; + }, }, )(({ styleProps }) => { return { diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index 493410a9ebf1dd..a7b26966dd4c19 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -1,23 +1,18 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge, refType } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import InputBase from '../InputBase'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { - overridesResolver as inputBaseOverridesResolver, + rootOverridesResolver as inputBaseRootOverridesResolver, + inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, + InputBaseComponent as InputBaseInput, } from '../InputBase/InputBase'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge(inputBaseOverridesResolver(props, styles), { - ...(!styleProps.disableUnderline && styles.underline), - }); -}; - const useUtilityClasses = (styleProps) => { const { classes, disableUnderline } = styleProps; @@ -37,7 +32,18 @@ const useUtilityClasses = (styleProps) => { const InputRoot = experimentalStyled( InputBaseRoot, { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, - { name: 'MuiInput', slot: 'Root', overridesResolver }, + { + name: 'MuiInput', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...inputBaseRootOverridesResolver(props, styles), + ...(!styleProps.disableUnderline && styles.underline), + }; + }, + }, )(({ theme, styleProps }) => { const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; @@ -98,6 +104,12 @@ const InputRoot = experimentalStyled( }; }); +const InputInput = experimentalStyled( + InputBaseInput, + {}, + { name: 'MuiInput', slot: 'Input', overridesResolver: inputBaseInputOverridesResolver }, +)({}); + const Input = React.forwardRef(function Input(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiInput' }); const { @@ -115,7 +127,7 @@ const Input = React.forwardRef(function Input(inProps, ref) { return ( { +export const rootOverridesResolver = (props, styles) => { const { styleProps } = props; - return deepmerge( - { - ...(styleProps.formControl && styles.formControl), - ...(styleProps.startAdornment && styles.adornedStart), - ...(styleProps.endAdornment && styles.adornedEnd), - ...(styleProps.error && styles.error), - ...(styleProps.size === 'small' && styles.sizeSmall), - ...(styleProps.multiline && styles.multiline), - ...(styleProps.color && styles[`color${capitalize(styleProps.color)}`]), - ...(styleProps.fullWidth && styles.fullWidth), - ...(styleProps.hiddenLabel && styles.hiddenLabel), - [`& .${inputBaseClasses.input}`]: { - ...styles.input, - ...(styleProps.size === 'small' && styles.inputSizeSmall), - ...(styleProps.multiline && styles.inputMultiline), - ...(styleProps.type === 'search' && styles.inputTypeSearch), - ...(styleProps.startAdornment && styles.inputAdornedStart), - ...(styleProps.endAdornment && styles.inputAdornedEnd), - ...(styleProps.hiddenLabel && styles.inputHiddenLabel), - }, - }, - styles.root || {}, - ); + return { + ...styles.root, + ...(styleProps.formControl && styles.formControl), + ...(styleProps.startAdornment && styles.adornedStart), + ...(styleProps.endAdornment && styles.adornedEnd), + ...(styleProps.error && styles.error), + ...(styleProps.size === 'small' && styles.sizeSmall), + ...(styleProps.multiline && styles.multiline), + ...(styleProps.color && styles[`color${capitalize(styleProps.color)}`]), + ...(styleProps.fullWidth && styles.fullWidth), + ...(styleProps.hiddenLabel && styles.hiddenLabel), + }; +}; + +export const inputOverridesResolver = (props, styles) => { + const { styleProps } = props; + + return { + ...styles.input, + ...(styleProps.size === 'small' && styles.inputSizeSmall), + ...(styleProps.multiline && styles.inputMultiline), + ...(styleProps.type === 'search' && styles.inputTypeSearch), + ...(styleProps.startAdornment && styles.inputAdornedStart), + ...(styleProps.endAdornment && styles.inputAdornedEnd), + ...(styleProps.hiddenLabel && styles.inputHiddenLabel), + }; }; const useUtilityClasses = (styleProps) => { @@ -96,7 +99,7 @@ export const InputBaseRoot = experimentalStyled( { name: 'MuiInputBase', slot: 'Root', - overridesResolver, + overridesResolver: rootOverridesResolver, }, )(({ theme, styleProps }) => ({ ...theme.typography.body1, @@ -128,6 +131,7 @@ export const InputBaseComponent = experimentalStyled( { name: 'MuiInputBase', slot: 'Input', + overridesResolver: inputOverridesResolver, }, )(({ theme, styleProps }) => { const light = theme.palette.mode === 'light'; diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index 937681914fe944..8a3462d148b50c 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { deepmerge } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; @@ -9,21 +8,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import { getInputLabelUtilityClasses } from './inputLabelClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge( - { - ...(!styleProps.formControl && styles.formControl), - ...(styleProps.size === 'small' && styles.sizeSmall), - ...(styleProps.shrink && styles.shrink), - ...(!styleProps.disableAnimation && styles.animated), - ...styles[styleProps.variant], - [`& .${formLabelClasses.asterisk}`]: styles.asterisk, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, formControl, size, shrink, disableAnimation, variant } = styleProps; const slots = { @@ -48,7 +32,22 @@ const useUtilityClasses = (styleProps) => { const InputLabelRoot = experimentalStyled( FormLabel, { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, - { name: 'MuiInputLabel', slot: 'Root', overridesResolver }, + { + name: 'MuiInputLabel', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + [`& .${formLabelClasses.asterisk}`]: styles.asterisk, + ...styles.root, + ...(!styleProps.formControl && styles.formControl), + ...(styleProps.size === 'small' && styles.sizeSmall), + ...(styleProps.shrink && styles.shrink), + ...(!styleProps.disableAnimation && styles.animated), + ...styles[styleProps.variant], + }; + }, + }, )(({ theme, styleProps }) => ({ display: 'block', transformOrigin: 'top left', diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 2ed8239cd6edcf..0bf95ad47c63a4 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -1,23 +1,18 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { deepmerge, refType } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import NotchedOutline from './NotchedOutline'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; import InputBase, { - overridesResolver as inputBaseOverridesResolver, + rootOverridesResolver as inputBaseRootOverridesResolver, + inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput, } from '../InputBase/InputBase'; import useThemeProps from '../styles/useThemeProps'; -const overridesResolver = (props, styles) => { - return deepmerge(inputBaseOverridesResolver(props, styles), { - ...styles.notchedOutline, - }); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -38,7 +33,11 @@ const useUtilityClasses = (styleProps) => { const OutlinedInputRoot = experimentalStyled( InputBaseRoot, { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, - { name: 'MuiOutlinedInput', slot: 'Root', overridesResolver }, + { + name: 'MuiOutlinedInput', + slot: 'Root', + overridesResolver: inputBaseRootOverridesResolver, + }, )(({ theme, styleProps }) => { const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; @@ -82,7 +81,11 @@ const OutlinedInputRoot = experimentalStyled( const NotchedOutlineRoot = experimentalStyled( NotchedOutline, {}, - { name: 'MuiOutlinedInput', slot: 'NotchedOutline' }, + { + name: 'MuiOutlinedInput', + slot: 'NotchedOutline', + overridesResolver: (props, styles) => styles.notchedOutline, + }, )(({ theme }) => ({ borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)', })); @@ -90,7 +93,7 @@ const NotchedOutlineRoot = experimentalStyled( const OutlinedInputInput = experimentalStyled( InputBaseInput, {}, - { name: 'MuiOutlinedInput', slot: 'Input' }, + { name: 'MuiOutlinedInput', slot: 'Input', overridesResolver: inputBaseInputOverridesResolver }, )(({ theme, styleProps }) => ({ padding: '16.5px 14px', '&:-webkit-autofill': { From 4d7fb7c197f6bc345e9705d45dfb5e03bef70075 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Apr 2021 18:50:38 +0200 Subject: [PATCH 11/39] [core] Update slot components to use overridesResolver part 5 (#25887) --- .../src/LinearProgress/LinearProgress.js | 73 +++++++++++-------- packages/material-ui/src/Link/Link.js | 24 +++--- packages/material-ui/src/List/List.js | 25 +++---- packages/material-ui/src/ListItem/ListItem.js | 22 +++--- .../src/ListItemAvatar/ListItemAvatar.js | 21 ++---- .../src/ListItemIcon/ListItemIcon.js | 21 ++---- .../ListItemSecondaryAction.js | 21 ++---- .../src/ListItemText/ListItemText.js | 29 +++----- .../src/ListItemText/ListItemText.test.js | 1 - .../src/ListSubheader/ListSubheader.js | 27 +++---- packages/material-ui/src/Menu/Menu.js | 18 ++--- packages/material-ui/src/MenuItem/MenuItem.js | 16 ++-- .../src/MobileStepper/MobileStepper.js | 52 +++++++------ packages/material-ui/src/Modal/Modal.js | 22 +++--- .../src/NativeSelect/NativeSelectInput.js | 50 ++++++------- 15 files changed, 192 insertions(+), 230 deletions(-) diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js index a73874a4ce5613..089ea51d10b07c 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.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 { keyframes, css } from '@material-ui/styled-engine'; import capitalize from '../utils/capitalize'; @@ -9,7 +8,7 @@ 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 index 0718756df386ec..fac0b104b3aac8 100644 --- 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 index fe05c4ccd8e95c..cfed1df247e17c 100644 --- 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 index b561e12c41643c..8f95fb4660dc21 100644 --- 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 index d4245e024a16af..5ac07dbc1e2323 100644 --- 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 index 89cde147f5c1d1..b6ebf9bf2847bd 100644 --- 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 index 05d64dd8894702..41da6be5378199 100644 --- 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', diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js index 880c767ce15c51..e874dc4c264970 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.js +++ b/packages/material-ui/src/ListItemText/ListItemText.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 Typography from '../Typography'; import ListContext from '../List/ListContext'; @@ -9,21 +8,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.inset && styles.inset), - ...(styleProps.primary && styleProps.secondary && styles.multiline), - ...(styleProps.dense && styles.dense), - [`& .${listItemTextClasses.primary}`]: styles.primary, - [`& .${listItemTextClasses.secondary}`]: styles.secondary, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, inset, primary, secondary, dense } = styleProps; @@ -42,7 +26,18 @@ const ListItemTextRoot = experimentalStyled( { name: 'MuiListItemText', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${listItemTextClasses.primary}`]: styles.primary, + [`& .${listItemTextClasses.secondary}`]: styles.secondary, + ...styles.root, + ...(styleProps.inset && styles.inset), + ...(styleProps.primary && styleProps.secondary && styles.multiline), + ...(styleProps.dense && styles.dense), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/ListItemText/ListItemText.test.js b/packages/material-ui/src/ListItemText/ListItemText.test.js index d465543d0c2e5d..8f25221a3f9d7b 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.test.js +++ b/packages/material-ui/src/ListItemText/ListItemText.test.js @@ -15,7 +15,6 @@ describe('', () => { render, muiName: 'MuiListItemText', testVariantProps: { inset: true }, - testDeepOverrides: { slotName: 'primary', slotClassName: classes.primary }, refInstanceof: window.HTMLDivElement, skip: ['componentProp', 'componentsProp'], })); diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js index fb1280f4ace863..6e4f650c5bc8a9 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.js +++ b/packages/material-ui/src/ListSubheader/ListSubheader.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 capitalize from '../utils/capitalize'; import { getListSubheaderUtilityClass } from './listSubheaderClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), - ...(!styleProps.disableGutters && styles.gutters), - ...(styleProps.inset && styles.inset), - ...(!styleProps.disableSticky && styles.sticky), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, color, disableGutters, inset, disableSticky } = styleProps; @@ -44,7 +29,17 @@ const ListSubheaderRoot = experimentalStyled( { name: 'MuiListSubheader', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), + ...(!styleProps.disableGutters && styles.gutters), + ...(styleProps.inset && styles.inset), + ...(!styleProps.disableSticky && styles.sticky), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index ad263652a59bd1..3035c14b1f9b8e 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -3,13 +3,13 @@ import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge, HTMLElementType } from '@material-ui/utils'; +import { HTMLElementType } from '@material-ui/utils'; import MenuList from '../MenuList'; import Paper from '../Paper'; import Popover from '../Popover'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; -import menuClasses, { getMenuUtilityClass } from './menuClasses'; +import { getMenuUtilityClass } from './menuClasses'; const RTL_ORIGIN = { vertical: 'top', @@ -21,16 +21,6 @@ const LTR_ORIGIN = { horizontal: 'left', }; -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${menuClasses.paper}`]: styles.paper, - [`& .${menuClasses.list}`]: styles.list, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -49,7 +39,7 @@ const MenuRoot = experimentalStyled( { name: 'MuiMenu', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({}); @@ -59,6 +49,7 @@ const MenuPaper = experimentalStyled( { name: 'MuiMenu', slot: 'Paper', + overridesResolver: (props, styles) => styles.paper, }, )({ // specZ: The maximum height of a simple menu should be one or more rows less than the view @@ -75,6 +66,7 @@ const MenuMenuList = experimentalStyled( { name: 'MuiMenu', slot: 'List', + overridesResolver: (props, styles) => styles.list, }, )({ // We disable the focus ring for mouse, touch and keyboard users. diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js index c666a2df99fdb8..613e4350621e8d 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.js +++ b/packages/material-ui/src/MenuItem/MenuItem.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import { deepmerge } from '@material-ui/utils'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; @@ -9,13 +8,6 @@ import { getMenuItemUtilityClass } from './menuItemClasses'; import ListItem from '../ListItem'; import { overridesResolver as listItemOverridesResolver, ListItemRoot } from '../ListItem/ListItem'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge(listItemOverridesResolver(props, styles), { - ...(styleProps.dense && styles.dense), - }); -}; - const useUtilityClasses = (styleProps) => { const { selected, dense, classes } = styleProps; const slots = { @@ -31,7 +23,13 @@ const MenuItemRoot = experimentalStyled( { name: 'MuiMenuItem', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...listItemOverridesResolver(props, styles), + ...(styleProps.dense && styles.dense), + }; + }, }, )(({ theme, styleProps }) => ({ ...theme.typography.body1, diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js index 6659cf563deb7f..c1e19b5678ee5d 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.js +++ b/packages/material-ui/src/MobileStepper/MobileStepper.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { integerPropType, deepmerge } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; @@ -9,25 +9,7 @@ import LinearProgress from '../LinearProgress'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; -import mobileStepperClasses, { getMobileStepperUtilityClass } from './mobileStepperClasses'; - -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`position${capitalize(styleProps.position)}`], - [`& .${mobileStepperClasses.dots}`]: styles.dots, - [`& .${mobileStepperClasses.dot}`]: { - ...styles.dot, - ...(styleProps.dotActive && styles.dotActive), - }, - [`& .${mobileStepperClasses.dotActive}`]: styles.dotActive, - [`& .${mobileStepperClasses.progress}`]: styles.progress, - }, - styles.root || {}, - ); -}; +import { getMobileStepperUtilityClass } from './mobileStepperClasses'; const useUtilityClasses = (styleProps) => { const { classes, position } = styleProps; @@ -49,7 +31,14 @@ const MobileStepperRoot = experimentalStyled( { name: 'MuiMobileStepper', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`position${capitalize(styleProps.position)}`], + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ @@ -80,7 +69,7 @@ const MobileStepperRoot = experimentalStyled( const MobileStepperDots = experimentalStyled( 'div', {}, - { name: 'MuiMobileStepper', slot: 'Dots' }, + { name: 'MuiMobileStepper', slot: 'Dots', overridesResolver: (props, styles) => styles.dots }, )(({ styleProps }) => ({ /* Styles applied to the dots container if `variant="dots"`. */ ...(styleProps.variant === 'dots' && { @@ -92,7 +81,18 @@ const MobileStepperDots = experimentalStyled( const MobileStepperDot = experimentalStyled( 'div', {}, - { name: 'MuiMobileStepper', slot: 'Dot' }, + { + name: 'MuiMobileStepper', + slot: 'Dot', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.dot, + ...(styleProps.dotActive && styles.dotActive), + }; + }, + }, )(({ theme, styleProps }) => ({ /* Styles applied to each dot if `variant="dots"`. */ ...(styleProps.variant === 'dots' && { @@ -114,7 +114,11 @@ const MobileStepperDot = experimentalStyled( const MobileStepperProgress = experimentalStyled( LinearProgress, {}, - { name: 'MuiMobileStepper', slot: 'Progress' }, + { + name: 'MuiMobileStepper', + slot: 'Progress', + overridesResolver: (props, styles) => styles.progress, + }, )(({ styleProps }) => ({ /* Styles applied to the Linear Progress component if `variant="progress"`. */ ...(styleProps.variant === 'progress' && { diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index 260dfcd1a277bb..476e122d46dc61 100644 --- a/packages/material-ui/src/Modal/Modal.js +++ b/packages/material-ui/src/Modal/Modal.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { isHostComponent } from '@material-ui/unstyled'; -import { deepmerge, elementAcceptingRef, HTMLElementType } from '@material-ui/utils'; +import { elementAcceptingRef, HTMLElementType } from '@material-ui/utils'; import ModalUnstyled, { modalUnstyledClasses } from '@material-ui/unstyled/ModalUnstyled'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; @@ -9,17 +9,6 @@ import Backdrop from '../Backdrop'; export const modalClasses = modalUnstyledClasses; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.open && styleProps.exited && styles.hidden), - }, - styles.root || {}, - ); -}; - const extendUtilityClasses = (styleProps) => { return styleProps.classes; }; @@ -30,7 +19,14 @@ const ModalRoot = experimentalStyled( { name: 'MuiModal', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(!styleProps.open && styleProps.exited && styles.hidden), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js index fabbc9bfdd71b9..340c537fbf964c 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js @@ -1,24 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { refType, deepmerge } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import capitalize from '../utils/capitalize'; import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses'; import experimentalStyled from '../styles/experimentalStyled'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles.select, - ...styles[styleProps.variant], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant, disabled, open } = styleProps; @@ -81,19 +69,20 @@ export const nativeSelectRootStyles = ({ styleProps, theme }) => ({ const NativeSelectRoot = experimentalStyled( 'select', {}, - { name: 'MuiNativeSelect', slot: 'Root', overridesResolver }, -)(nativeSelectRootStyles); + { + name: 'MuiNativeSelect', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; -const iconOverridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge( - { - ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), - ...(styleProps.open && styles.iconOpen), + return { + ...styles.root, + ...styles.select, + ...styles[styleProps.variant], + }; }, - styles.icon || {}, - ); -}; + }, +)(nativeSelectRootStyles); export const nativeSelectIconStyles = ({ styleProps, theme }) => ({ // We use a position absolute over a flexbox in order to forward the pointer events @@ -120,7 +109,18 @@ export const nativeSelectIconStyles = ({ styleProps, theme }) => ({ const NativeSelectIcon = experimentalStyled( 'svg', {}, - { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver }, + { + name: 'MuiNativeSelect', + slot: 'Icon', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.icon, + ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), + ...(styleProps.open && styles.iconOpen), + }; + }, + }, )(nativeSelectIconStyles); /** From b8bb45119ce0a2f97b70e361a4ac7179f6f8ad1a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 23 Apr 2021 09:31:17 +0200 Subject: [PATCH 12/39] [system] Add missing `main` entry for styleFunctionSx (#25885) --- scripts/build.js | 6 +++--- scripts/copy-files.js | 42 +++++++++++++++++++++++++++++++----------- 2 files changed, 34 insertions(+), 14 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 1ce2aed2e8016a..f881ea4a477bd5 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -48,7 +48,7 @@ async function run(argv) { .filter((file) => { return path.basename(file, path.extname(file)) !== 'index'; }); - const topLevelPathImportsArePackages = topLevelNonIndexFiles.length === 0; + const topLevelPathImportsCanBePackages = topLevelNonIndexFiles.length === 0; const outDir = path.resolve( relativeOutDir, @@ -60,9 +60,9 @@ async function run(argv) { // Different extensions are not viable yet since they require additional bundler config for users and additional transpilation steps in our repo. // Switch to `exports` field in v6. { - node: topLevelPathImportsArePackages ? './node' : './', + node: topLevelPathImportsCanBePackages ? './node' : './', modern: './modern', - stable: topLevelPathImportsArePackages ? './' : './esm', + stable: topLevelPathImportsCanBePackages ? './' : './esm', legacy: './legacy', }[bundle], ); diff --git a/scripts/copy-files.js b/scripts/copy-files.js index 7d5ec0ed223218..2836194e76f2ec 100644 --- a/scripts/copy-files.js +++ b/scripts/copy-files.js @@ -21,31 +21,51 @@ async function includeFileInBuild(file) { * * It also tests that an this import can be used in TypeScript by checking * if an index.d.ts is present at that path. - * @param {string} rootDir + * @param {object} param0 + * @param {string} param0.from + * @param {string} param0.to */ async function createModulePackages({ from, to }) { const directoryPackages = glob.sync('*/index.{js,ts,tsx}', { cwd: from }).map(path.dirname); await Promise.all( directoryPackages.map(async (directoryPackage) => { + const packageJsonPath = path.join(to, directoryPackage, 'package.json'); + const topLevelPathImportsAreCommonJSModules = await fse.pathExists( + path.resolve(path.dirname(packageJsonPath), '../esm'), + ); + const packageJson = { sideEffects: false, - module: './index.js', - main: path.posix.join('../node', directoryPackage, 'index.js'), + module: topLevelPathImportsAreCommonJSModules + ? path.posix.join('../esm', directoryPackage, 'index.js') + : './index.js', + main: topLevelPathImportsAreCommonJSModules + ? './index.js' + : path.posix.join('../node', directoryPackage, 'index.js'), types: './index.d.ts', }; - const packageJsonPath = path.join(to, directoryPackage, 'package.json'); - - const typingsPath = path.join(to, directoryPackage, 'index.d.ts'); - - const [typingsExist] = await Promise.all([ - fse.pathExists(typingsPath), + const [typingsEntryExist, moduleEntryExists, mainEntryExists] = await Promise.all([ + fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.types)), + fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.module)), + fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.main)), fse.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2)), ]); - if (!typingsExist) { - throw new Error(`index.d.ts for ${directoryPackage} is missing. Path: '${typingsPath}'`); + const manifestErrorMessages = []; + if (!typingsEntryExist) { + manifestErrorMessages.push(`'types' entry '${packageJson.types}' does not exist`); + } + if (!moduleEntryExists) { + manifestErrorMessages.push(`'module' entry '${packageJson.module}' does not exist`); + } + if (!mainEntryExists) { + manifestErrorMessages.push(`'main' entry '${packageJson.main}' does not exist`); + } + if (manifestErrorMessages.length > 0) { + // TODO: AggregateError + throw new Error(`${packageJsonPath}:\n${manifestErrorMessages.join('\n')}`); } return packageJsonPath; From 7344dc5dc31f200db9a47280f1cc2784c34a9844 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 23 Apr 2021 10:05:51 +0200 Subject: [PATCH 13/39] [docs] Explicitly list demos of unstyled components (#25900) --- docs/scripts/buildApi.ts | 8 +------- .../src/BadgeUnstyled/BadgeUnstyled.d.ts | 1 - 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 0da68f19c486fe..dfe0d800dd1b2e 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -492,13 +492,7 @@ async function annotateComponentDefinition(context: { const demos = uniqBy( api.pagesMarkdown.filter((page) => { - // Testing for Unstyled avoids the need to mention the unstyled components in the - // `components` key of the markdown header YAML. - return ( - page.components.includes(api.name) || - (api.name.endsWith('Unstyled') && - page.components.includes(api.name.replace('Unstyled', ''))) - ); + return page.components.includes(api.name); }, []), (page) => page.pathname, ); diff --git a/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.d.ts b/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.d.ts index e43160cabceafb..1e24a9a8a1fa7b 100644 --- a/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.d.ts @@ -124,7 +124,6 @@ export type BadgeUnstyledClassKey = keyof NonNullable Date: Fri, 23 Apr 2021 11:11:41 +0200 Subject: [PATCH 14/39] [core] Update slot components to use overridesResolver part 6 (#25892) --- .../material-ui/src/Pagination/Pagination.js | 26 +++--- .../src/PaginationItem/PaginationItem.js | 36 ++++--- packages/material-ui/src/Paper/Paper.js | 26 +++--- packages/material-ui/src/Popover/Popover.js | 12 +-- packages/material-ui/src/Radio/Radio.js | 17 ++-- packages/material-ui/src/Rating/Rating.js | 66 +++++++------ .../ScopedCssBaseline/ScopedCssBaseline.js | 6 +- .../material-ui/src/Select/SelectInput.js | 52 ++++++----- packages/material-ui/src/Skeleton/Skeleton.js | 33 ++++--- packages/material-ui/src/Slider/Slider.js | 93 ++++++++++--------- packages/material-ui/src/Snackbar/Snackbar.js | 29 +++--- .../src/SnackbarContent/SnackbarContent.js | 17 +--- .../material-ui/src/SpeedDial/SpeedDial.js | 41 ++++---- .../src/SpeedDialAction/SpeedDialAction.js | 45 ++++----- .../src/SpeedDialIcon/SpeedDialIcon.js | 37 ++++---- packages/material-ui/src/Step/Step.js | 26 +++--- .../material-ui/src/StepButton/StepButton.js | 23 ++--- .../src/StepConnector/StepConnector.js | 39 ++++---- .../src/StepContent/StepContent.js | 25 ++--- packages/material-ui/src/StepIcon/StepIcon.js | 13 +-- .../material-ui/src/StepLabel/StepLabel.js | 27 +++--- packages/material-ui/src/Stepper/Stepper.js | 22 ++--- packages/material-ui/src/SvgIcon/SvgIcon.js | 23 ++--- packages/material-ui/src/Switch/Switch.js | 42 ++++----- 24 files changed, 356 insertions(+), 420 deletions(-) diff --git a/packages/material-ui/src/Pagination/Pagination.js b/packages/material-ui/src/Pagination/Pagination.js index 322b03215f0680..611b5299000385 100644 --- a/packages/material-ui/src/Pagination/Pagination.js +++ b/packages/material-ui/src/Pagination/Pagination.js @@ -2,25 +2,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge, integerPropType } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import useThemeProps from '../styles/useThemeProps'; -import paginationClasses, { getPaginationUtilityClass } from './paginationClasses'; +import { getPaginationUtilityClass } from './paginationClasses'; import usePagination from '../usePagination'; import PaginationItem from '../PaginationItem'; import experimentalStyled from '../styles/experimentalStyled'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - [`& .${paginationClasses.ul}`]: styles.ul, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant } = styleProps; @@ -38,7 +26,14 @@ const PaginationRoot = experimentalStyled( { name: 'MuiPagination', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + }; + }, }, )({}); @@ -48,6 +43,7 @@ const PaginationUl = experimentalStyled( { name: 'MuiPagination', slot: 'Ul', + overridesResolver: (props, styles) => styles.ul, }, )({ display: 'flex', diff --git a/packages/material-ui/src/PaginationItem/PaginationItem.js b/packages/material-ui/src/PaginationItem/PaginationItem.js index c543ff3a7fec53..a42c8e06f1a15e 100644 --- a/packages/material-ui/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui/src/PaginationItem/PaginationItem.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 useThemeProps from '../styles/useThemeProps'; import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses'; @@ -15,24 +14,22 @@ import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; import experimentalStyled from '../styles/experimentalStyled'; -const overridesResolver = (props, styles) => { +const rootOverridesResolver = (props, styles) => { const { styleProps } = props; - return deepmerge( - { - ...styles[styleProps.variant], - ...styles[`size${capitalize(styleProps.size)}`], - ...(styleProps.variant === 'text' && styles[`text${capitalize(styleProps.color)}`]), - ...(styleProps.variant === 'outlined' && styles[`outlined${capitalize(styleProps.color)}`]), - ...(styleProps.shape === 'rounded' && styles.rounded), - [`&.${paginationItemClasses.ellipsis}`]: styles.ellipsis, - [`&.${paginationItemClasses.previousLast}`]: styles.previousLast, - [`&.${paginationItemClasses.firstLast}`]: styles.firstLast, - [`&.${paginationItemClasses.page}`]: styles.page, - [`& .${paginationItemClasses.icon}`]: styles.icon, - }, - styles.root || {}, - ); + return { + ...styles.root, + ...styles[styleProps.variant], + ...styles[`size${capitalize(styleProps.size)}`], + ...(styleProps.variant === 'text' && styles[`text${capitalize(styleProps.color)}`]), + ...(styleProps.variant === 'outlined' && styles[`outlined${capitalize(styleProps.color)}`]), + ...(styleProps.shape === 'rounded' && styles.rounded), + ...(styleProps.type === 'page' && styles.page), + ...((styleProps.type === 'start-ellipsis' || styleProps.type === 'end-ellipsis') && + styles.ellipsis), + ...((styleProps.type === 'previous' || styleProps.type === 'next') && styles.previousNext), + ...((styleProps.type === 'first' || styleProps.type === 'last') && styles.firstLast), + }; }; const useUtilityClasses = (styleProps) => { @@ -69,7 +66,7 @@ const PaginationItemEllipsis = experimentalStyled( { name: 'MuiPaginationItem', slot: 'Root', - overridesResolver, + overridesResolver: rootOverridesResolver, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ @@ -108,7 +105,7 @@ const PaginationItemPage = experimentalStyled( { name: 'MuiPaginationItem', slot: 'Root', - overridesResolver, + overridesResolver: rootOverridesResolver, }, )( ({ theme, styleProps }) => ({ @@ -255,6 +252,7 @@ const PaginationItemPageIcon = experimentalStyled( { name: 'MuiPaginationItem', slot: 'Icon', + overridesResolver: (props, styles) => styles.icon, }, )(({ theme, styleProps }) => ({ fontSize: theme.typography.pxToRem(20), diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index 42e24310a33956..45703fd1204ac5 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.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 experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; @@ -20,19 +20,6 @@ const getOverlayAlpha = (elevation) => { return (alphaValue / 100).toFixed(2); }; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...(!styleProps.square && styles.rounded), - ...(styleProps.variant === 'elevation' && styles[`elevation${styleProps.elevation}`]), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { square, elevation, variant, classes } = styleProps; @@ -54,7 +41,16 @@ const PaperRoot = experimentalStyled( { name: 'MuiPaper', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...(!styleProps.square && styles.rounded), + ...(styleProps.variant === 'elevation' && styles[`elevation${styleProps.elevation}`]), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 9f79c12522a182..056aedb07bd5fa 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -5,7 +5,6 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled import { chainPropTypes, integerPropType, - deepmerge, elementTypeAcceptingRef, refType, HTMLElementType, @@ -18,7 +17,7 @@ import ownerWindow from '../utils/ownerWindow'; import Grow from '../Grow'; import Modal from '../Modal'; import Paper from '../Paper'; -import popoverClasses, { getPopoverUtilityClass } from './popoverClasses'; +import { getPopoverUtilityClass } from './popoverClasses'; export function getOffsetTop(rect, vertical) { let offset = 0; @@ -58,12 +57,6 @@ function getAnchorEl(anchorEl) { return typeof anchorEl === 'function' ? anchorEl() : anchorEl; } -const overridesResolver = (props, styles) => { - return deepmerge(styles.root || {}, { - [`& .${popoverClasses.paper}`]: styles.paper, - }); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -81,7 +74,7 @@ const PopoverRoot = experimentalStyled( { name: 'MuiPopover', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({}); @@ -91,6 +84,7 @@ const PopoverPaper = experimentalStyled( { name: 'MuiPopover', slot: 'Paper', + overridesResolver: (props, styles) => styles.paper, }, )({ position: 'absolute', diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 29c6b827fc8736..23e69e631cec87 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { deepmerge, refType } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import SwitchBase from '../internal/SwitchBase'; import useThemeProps from '../styles/useThemeProps'; @@ -12,12 +12,6 @@ import useRadioGroup from '../RadioGroup/useRadioGroup'; import radioClasses, { getRadioUtilityClass } from './radioClasses'; import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge(styles.root || {}, styles[`color${capitalize(styleProps.color)}`]); -}; - const useUtilityClasses = (styleProps) => { const { classes, color } = styleProps; @@ -37,7 +31,14 @@ const RadioRoot = experimentalStyled( { name: 'MuiRadio', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`color${capitalize(styleProps.color)}`], + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Rating/Rating.js b/packages/material-ui/src/Rating/Rating.js index 14366c3ea50ef1..115db51cd4cc0b 100644 --- a/packages/material-ui/src/Rating/Rating.js +++ b/packages/material-ui/src/Rating/Rating.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { chainPropTypes, visuallyHidden, deepmerge } from '@material-ui/utils'; +import { chainPropTypes, visuallyHidden } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { useTheme } from '../styles'; import { @@ -41,27 +41,6 @@ function roundValueToPrecision(value, precision) { return Number(nearest.toFixed(getDecimalPrecision(precision))); } -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`size${capitalize(styleProps.size)}`], - ...(styleProps.readOnly && styles.readOnly), - [`& .${ratingClasses.label}`]: styles.label, - [`& .${ratingClasses.icon}`]: styles.icon, - [`& .${ratingClasses.iconEmpty}`]: styles.iconEmpty, - [`& .${ratingClasses.iconFilled}`]: styles.iconFilled, - [`& .${ratingClasses.iconHover}`]: styles.iconHover, - [`& .${ratingClasses.iconFocus}`]: styles.iconFocus, - [`& .${ratingClasses.iconActive}`]: styles.iconActive, - [`& .${ratingClasses.decimal}`]: styles.decimal, - [`& .${ratingClasses.visuallyHidden}`]: styles.visuallyHidden, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, size, readOnly, disabled, emptyValueFocused, focusVisible } = styleProps; @@ -94,7 +73,16 @@ const RatingRoot = experimentalStyled( { name: 'MuiRating', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${ratingClasses.visuallyHidden}`]: styles.visuallyHidden, + ...styles.root, + ...styles[`size${capitalize(styleProps.size)}`], + ...(styleProps.readOnly && styles.readOnly), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ @@ -131,7 +119,7 @@ const RatingRoot = experimentalStyled( const RatingLabel = experimentalStyled( 'label', {}, - { name: 'MuiRating', slot: 'Label' }, + { name: 'MuiRating', slot: 'Label', overridesResolver: (props, styles) => styles.label }, )(({ styleProps }) => ({ /* Styles applied to the label elements. */ cursor: 'inherit', @@ -148,7 +136,22 @@ const RatingLabel = experimentalStyled( const RatingIcon = experimentalStyled( 'span', {}, - { name: 'MuiRating', slot: 'Icon' }, + { + name: 'MuiRating', + slot: 'Icon', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.icon, + ...(styleProps.iconEmpty && styles.iconEmpty), + ...(styleProps.iconFilled && styles.iconFilled), + ...(styleProps.iconHover && styles.iconHover), + ...(styleProps.iconFocus && styles.iconFocus), + ...(styleProps.iconActive && styles.iconActive), + }; + }, + }, )(({ theme, styleProps }) => ({ /* Styles applied to the icon wrapping elements. */ // Fit wrapper to actual icon size. @@ -172,7 +175,18 @@ const RatingIcon = experimentalStyled( const RatingDecimal = experimentalStyled( 'span', {}, - { name: 'MuiRating', slot: 'Decimal' }, + { + name: 'MuiRating', + slot: 'Decimal', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.decimal, + ...(styleProps.iconActive && styles.iconActive), + }; + }, + }, )(({ styleProps }) => ({ /* Styles applied to the icon wrapping elements when decimals are necessary. */ position: 'relative', diff --git a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js index 2b2c30be5a0de1..6a3fa4c0adbeeb 100644 --- a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -7,10 +7,6 @@ import experimentalStyled from '../styles/experimentalStyled'; import { html, body } from '../CssBaseline/CssBaseline'; import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses'; -const overridesResolver = (props, styles) => { - return styles.root || {}; -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -27,7 +23,7 @@ const ScopedCssBaselineRoot = experimentalStyled( { name: 'MuiScopedCssBaseline', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js index e1f4ccce2ba7de..512373bf4509da 100644 --- a/packages/material-ui/src/Select/SelectInput.js +++ b/packages/material-ui/src/Select/SelectInput.js @@ -15,23 +15,25 @@ import useForkRef from '../utils/useForkRef'; import useControlled from '../utils/useControlled'; import selectClasses, { getSelectUtilityClasses } from './selectClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return { - [`&.${selectClasses.select}`]: { - // TODO v5: remove `root` and `selectMenu` - ...styles.root, - ...styles.select, - ...styles.selectMenu, - ...styles[styleProps.variant], - }, - }; -}; - const SelectRoot = experimentalStyled( 'div', {}, - { name: 'MuiSelect', slot: 'Root', overridesResolver }, + { + name: 'MuiSelect', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + [`&.${selectClasses.select}`]: { + // TODO v5: remove `root` and `selectMenu` + ...styles.root, + ...styles.select, + ...styles.selectMenu, + ...styles[styleProps.variant], + }, + }; + }, + }, )(nativeSelectRootStyles, { // Win specificity over the input base [`&.${selectClasses.selectMenu}`]: { @@ -43,19 +45,21 @@ const SelectRoot = experimentalStyled( }, }); -const iconOverridesResolver = (props, styles) => { - const { styleProps } = props; - return { - ...styles.icon, - ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), - ...(styleProps.open && styles.iconOpen), - }; -}; - const SelectIcon = experimentalStyled( 'svg', {}, - { name: 'MuiSelect', slot: 'Icon', overridesResolver: iconOverridesResolver }, + { + name: 'MuiSelect', + slot: 'Icon', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.icon, + ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), + ...(styleProps.open && styles.iconOpen), + }; + }, + }, )(nativeSelectIconStyles); const SelectNativeInput = experimentalStyled( diff --git a/packages/material-ui/src/Skeleton/Skeleton.js b/packages/material-ui/src/Skeleton/Skeleton.js index 5b80ba1b3d6932..55185c0157c7df 100644 --- a/packages/material-ui/src/Skeleton/Skeleton.js +++ b/packages/material-ui/src/Skeleton/Skeleton.js @@ -3,27 +3,11 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import { keyframes, css } from '@material-ui/styled-engine'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge } from '@material-ui/utils'; import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { getSkeletonUtilityClass } from './skeletonClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...(styleProps.animation !== false && styles[styleProps.animation]), - ...(styleProps.hasChildren && styles.withChildren), - ...(styleProps.hasChildren && !styleProps.width && styles.fitContent), - ...(styleProps.hasChildren && !styleProps.height && styles.heightAuto), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant, animation, hasChildren, width, height } = styleProps; @@ -73,7 +57,22 @@ const waveKeyframe = keyframes` const SkeletonRoot = experimentalStyled( 'span', {}, - { name: 'MuiSkeleton', slot: 'Root', overridesResolver }, + { + name: 'MuiSkeleton', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...(styleProps.animation !== false && styles[styleProps.animation]), + ...(styleProps.hasChildren && styles.withChildren), + ...(styleProps.hasChildren && !styleProps.width && styles.fitContent), + ...(styleProps.hasChildren && !styleProps.height && styles.heightAuto), + }; + }, + }, )( ({ theme, styleProps }) => { const radiusUnit = getUnit(theme.shape.borderRadius) || 'px'; diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index f2fd1ff9425e31..c5e23bd3bf43f3 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { chainPropTypes, deepmerge } from '@material-ui/utils'; +import { chainPropTypes } from '@material-ui/utils'; import { generateUtilityClasses, isHostComponent } from '@material-ui/unstyled'; import SliderUnstyled, { SliderValueLabelUnstyled, @@ -23,50 +23,35 @@ export const sliderClasses = { ]), }; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - const marks = - styleProps.marksProp === true && styleProps.step !== null - ? [...Array(Math.floor((styleProps.max - styleProps.min) / styleProps.step) + 1)].map( - (_, index) => ({ - value: styleProps.min + styleProps.step * index, - }), - ) - : styleProps.marksProp || []; - - const marked = marks.length > 0 && marks.some((mark) => mark.label); - - return deepmerge( - { - ...styles[`color${capitalize(styleProps.color)}`], - [`&.${sliderClasses.disabled}`]: styles.disabled, - ...(marked && styles.marked), - ...(styleProps.orientation === 'vertical' && styles.vertical), - ...(styleProps.track === 'inverted' && styles.trackInverted), - ...(styleProps.track === false && styles.trackFalse), - [`& .${sliderClasses.rail}`]: styles.rail, - [`& .${sliderClasses.track}`]: styles.track, - [`& .${sliderClasses.mark}`]: styles.mark, - [`& .${sliderClasses.markLabel}`]: styles.markLabel, - [`& .${sliderClasses.valueLabel}`]: styles.valueLabel, - [`& .${sliderClasses.thumb}`]: { - ...styles.thumb, - ...styles[`thumbColor${capitalize(styleProps.color)}`], - [`&.${sliderClasses.disabled}`]: styles.disabled, - }, - }, - styles.root || {}, - ); -}; - export const SliderRoot = experimentalStyled( 'span', {}, { name: 'MuiSlider', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + const marks = + styleProps.marksProp === true && styleProps.step !== null + ? [...Array(Math.floor((styleProps.max - styleProps.min) / styleProps.step) + 1)].map( + (_, index) => ({ + value: styleProps.min + styleProps.step * index, + }), + ) + : styleProps.marksProp || []; + + const marked = marks.length > 0 && marks.some((mark) => mark.label); + + return { + ...styles.root, + ...styles[`color${capitalize(styleProps.color)}`], + ...(marked && styles.marked), + ...(styleProps.orientation === 'vertical' && styles.vertical), + ...(styleProps.track === 'inverted' && styles.trackInverted), + ...(styleProps.track === false && styles.trackFalse), + }; + }, }, )(({ theme, styleProps }) => ({ height: 2, @@ -135,7 +120,7 @@ export const SliderRoot = experimentalStyled( export const SliderRail = experimentalStyled( 'span', {}, - { name: 'MuiSlider', slot: 'Rail' }, + { name: 'MuiSlider', slot: 'Rail', overridesResolver: (props, styles) => styles.rail }, )(({ styleProps }) => ({ display: 'block', position: 'absolute', @@ -156,7 +141,11 @@ export const SliderRail = experimentalStyled( export const SliderTrack = experimentalStyled( 'span', {}, - { name: 'MuiSlider', slot: 'Track' }, + { + name: 'MuiSlider', + slot: 'Track', + overridesResolver: (props, styles) => styles.track, + }, )(({ theme, styleProps }) => ({ display: 'block', position: 'absolute', @@ -184,7 +173,17 @@ export const SliderTrack = experimentalStyled( export const SliderThumb = experimentalStyled( 'span', {}, - { name: 'MuiSlider', slot: 'Thumb' }, + { + name: 'MuiSlider', + slot: 'Thumb', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.thumb, + ...styles[`thumbColor${capitalize(styleProps.color)}`], + }; + }, + }, )(({ theme, styleProps }) => ({ position: 'absolute', width: 12, @@ -250,7 +249,11 @@ export const SliderThumb = experimentalStyled( export const SliderValueLabel = experimentalStyled( SliderValueLabelUnstyled, {}, - { name: 'MuiSlider', slot: 'ValueLabel' }, + { + name: 'MuiSlider', + slot: 'ValueLabel', + overridesResolver: (props, styles) => styles.valueLabel, + }, )(({ theme }) => ({ // IE 11 centering bug, to remove from the customization demos once no longer supported left: 'calc(-50% - 4px)', @@ -273,7 +276,7 @@ export const SliderValueLabel = experimentalStyled( export const SliderMark = experimentalStyled( 'span', {}, - { name: 'MuiSlider', slot: 'Mark' }, + { name: 'MuiSlider', slot: 'Mark', overridesResolver: (props, styles) => styles.mark }, )(({ theme, styleProps }) => ({ position: 'absolute', width: 2, @@ -289,7 +292,7 @@ export const SliderMark = experimentalStyled( export const SliderMarkLabel = experimentalStyled( 'span', {}, - { name: 'MuiSlider', slot: 'MarkLabel' }, + { name: 'MuiSlider', slot: 'MarkLabel', overridesResolver: (props, styles) => styles.markLabel }, )(({ theme, styleProps }) => ({ ...theme.typography.body2, color: theme.palette.text.secondary, diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 25ba683a1e0237..813877af6ec581 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.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'; @@ -26,28 +25,24 @@ const useUtilityClasses = (styleProps) => { return composeClasses(slots, getSnackbarUtilityClass, classes); }; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[ - `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize( - styleProps.anchorOrigin.horizontal, - )}` - ], - }, - styles.root || {}, - ); -}; - const SnackbarRoot = experimentalStyled( 'div', {}, { name: 'MuiSnackbar', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[ + `anchorOrigin${capitalize(styleProps.anchorOrigin.vertical)}${capitalize( + styleProps.anchorOrigin.horizontal, + )}` + ], + }; + }, }, )(({ theme, styleProps }) => { const center = { diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 8f76212243a40e..97b21f09cf1617 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -1,23 +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 { emphasize } from '../styles/colorManipulator'; import Paper from '../Paper'; -import snackbarContentClasses, { getSnackbarContentUtilityClass } from './snackbarContentClasses'; - -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${snackbarContentClasses.action}`]: styles.action, - [`& .${snackbarContentClasses.message}`]: styles.message, - }, - styles.root || {}, - ); -}; +import { getSnackbarContentUtilityClass } from './snackbarContentClasses'; const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -37,7 +26,7 @@ const SnackbarContentRoot = experimentalStyled( { name: 'MuiSnackbarContent', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => { const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98; @@ -66,6 +55,7 @@ const SnackbarContentMessage = experimentalStyled( { name: 'MuiSnackbarContent', slot: 'Message', + overridesResolver: (props, styles) => styles.message, }, )({ padding: '8px 0', @@ -77,6 +67,7 @@ const SnackbarContentAction = experimentalStyled( { name: 'MuiSnackbarContent', slot: 'Action', + overridesResolver: (props, styles) => styles.action, }, )({ display: 'flex', diff --git a/packages/material-ui/src/SpeedDial/SpeedDial.js b/packages/material-ui/src/SpeedDial/SpeedDial.js index 9601f4fbe0fd2d..6751449d8ce724 100644 --- a/packages/material-ui/src/SpeedDial/SpeedDial.js +++ b/packages/material-ui/src/SpeedDial/SpeedDial.js @@ -2,7 +2,6 @@ import * as React from 'react'; import { isFragment } from 'react-is'; 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'; @@ -15,22 +14,6 @@ import useForkRef from '../utils/useForkRef'; import useControlled from '../utils/useControlled'; import speedDialClasses, { getSpeedDialUtilityClass } from './speedDialClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`direction${capitalize(styleProps.direction)}`], - [`& .${speedDialClasses.fab}`]: styles.fab, - [`& .${speedDialClasses.actions}`]: { - ...styles.actions, - ...(!styleProps.open && styles.actionsClosed), - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, open, direction } = styleProps; @@ -72,7 +55,14 @@ const SpeedDialRoot = experimentalStyled( { name: 'MuiSpeedDial', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`direction${capitalize(styleProps.direction)}`], + }; + }, }, )(({ theme, styleProps }) => ({ zIndex: theme.zIndex.speedDial, @@ -116,7 +106,7 @@ const SpeedDialRoot = experimentalStyled( const SpeedDialFab = experimentalStyled( Fab, {}, - { name: 'MuiSpeedDial', slot: 'Fab' }, + { name: 'MuiSpeedDial', slot: 'Fab', overridesResolver: (props, styles) => styles.fab }, )(() => ({ pointerEvents: 'auto', })); @@ -124,7 +114,18 @@ const SpeedDialFab = experimentalStyled( const SpeedDialActions = experimentalStyled( 'div', {}, - { name: 'MuiSpeedDial', slot: 'Actions' }, + { + name: 'MuiSpeedDial', + slot: 'Actions', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.actions, + ...(!styleProps.open && styles.actionsClosed), + }; + }, + }, )(({ styleProps }) => ({ display: 'flex', pointerEvents: 'auto', diff --git a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js index 1dadcecc64737e..84de91f026225d 100644 --- a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js @@ -3,7 +3,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'; @@ -13,30 +12,6 @@ import Tooltip from '../Tooltip'; import capitalize from '../utils/capitalize'; import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses'; -const overridesResolverFab = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.open && styles.fabClosed), - }, - styles.fab || {}, - ); -}; - -const overridesResolverStatic = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.open && styles.staticTooltipClosed), - ...styles[`tooltipPlacement${capitalize(styleProps.tooltipPlacement)}`], - [`& .${speedDialActionClasses.staticTooltipLabel}`]: styles.staticTooltipLabel, - }, - styles.staticTooltip || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { open, tooltipPlacement, classes } = styleProps; @@ -60,7 +35,14 @@ const SpeedDialActionFab = experimentalStyled( name: 'MuiSpeedDialAction', slot: 'Fab', skipVariantsResolver: false, - overridesResolver: overridesResolverFab, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.fab, + ...(!styleProps.open && styles.fabClosed), + }; + }, }, )(({ theme, styleProps }) => ({ margin: 8, @@ -85,7 +67,15 @@ const SpeedDialActionStaticTooltip = experimentalStyled( { name: 'MuiSpeedDialAction', slot: 'StaticTooltip', - overridesResolver: overridesResolverStatic, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.staticTooltip, + ...(!styleProps.open && styles.staticTooltipClosed), + ...styles[`tooltipPlacement${capitalize(styleProps.tooltipPlacement)}`], + }; + }, }, )(({ theme, styleProps }) => ({ position: 'relative', @@ -119,6 +109,7 @@ const SpeedDialActionStaticTooltipLabel = experimentalStyled( { name: 'MuiSpeedDialAction', slot: 'StaticTooltipLabel', + overridesResolver: (props, styles) => styles.staticTooltipLabel, }, )(({ theme }) => ({ position: 'absolute', diff --git a/packages/material-ui/src/SpeedDialIcon/SpeedDialIcon.js b/packages/material-ui/src/SpeedDialIcon/SpeedDialIcon.js index 3768be8dabe539..ded3d350dc9f63 100644 --- a/packages/material-ui/src/SpeedDialIcon/SpeedDialIcon.js +++ b/packages/material-ui/src/SpeedDialIcon/SpeedDialIcon.js @@ -1,32 +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 AddIcon from '../internal/svg-icons/Add'; import speedDialIconClasses, { getSpeedDialIconUtilityClass } from './speedDialIconClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - [`& .${speedDialIconClasses.icon}`]: { - ...styles.icon, - ...(styleProps.open && styles.iconOpen), - ...(styleProps.open && styleProps.openIcon && styles.iconWithOpenIconOpen), - }, - [`& .${speedDialIconClasses.openIcon}`]: { - ...styles.openIcon, - ...(styleProps.open && styles.openIconOpen), - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, open, openIcon } = styleProps; @@ -45,7 +25,22 @@ const SpeedDialIconRoot = experimentalStyled( { name: 'MuiSpeedDialIcon', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${speedDialIconClasses.icon}`]: { + ...styles.icon, + ...(styleProps.open && styles.iconOpen), + ...(styleProps.open && styleProps.openIcon && styles.iconWithOpenIconOpen), + }, + [`& .${speedDialIconClasses.openIcon}`]: { + ...styles.openIcon, + ...(styleProps.open && styles.openIconOpen), + }, + ...styles.root, + }; + }, }, )(({ theme, styleProps }) => ({ height: 24, diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js index 27bdd87f7a398b..cd37e6ddb960e5 100644 --- a/packages/material-ui/src/Step/Step.js +++ b/packages/material-ui/src/Step/Step.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { deepmerge, integerPropType } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import StepperContext from '../Stepper/StepperContext'; import StepContext from './StepContext'; @@ -9,19 +9,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getStepUtilityClass } from './stepClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.orientation], - ...(styleProps.alternativeLabel && styles.alternativeLabel), - ...(styleProps.completed && styles.completed), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, orientation, alternativeLabel, completed } = styleProps; @@ -38,7 +25,16 @@ const StepRoot = experimentalStyled( { name: 'MuiStep', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.orientation], + ...(styleProps.alternativeLabel && styles.alternativeLabel), + ...(styleProps.completed && styles.completed), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element if `orientation="horizontal"`. */ diff --git a/packages/material-ui/src/StepButton/StepButton.js b/packages/material-ui/src/StepButton/StepButton.js index a9d97d6f040f01..2ac359b6d2c61a 100644 --- a/packages/material-ui/src/StepButton/StepButton.js +++ b/packages/material-ui/src/StepButton/StepButton.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'; @@ -12,18 +11,6 @@ import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import stepButtonClasses, { getStepButtonUtilityClass } from './stepButtonClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.orientation], - [`& .${stepButtonClasses.touchRipple}`]: styles.touchRipple, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, orientation } = styleProps; @@ -41,7 +28,15 @@ const StepButtonRoot = experimentalStyled( { name: 'MuiStepButton', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${stepButtonClasses.touchRipple}`]: styles.touchRipple, + ...styles.root, + ...styles[styleProps.orientation], + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js index e733b42e668120..ed4a7ab9884ae3 100644 --- a/packages/material-ui/src/StepConnector/StepConnector.js +++ b/packages/material-ui/src/StepConnector/StepConnector.js @@ -1,31 +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 capitalize from '../utils/capitalize'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; -import stepConnectorClasses, { getStepConnectorUtilityClass } from './stepConnectorClasses'; - -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.orientation], - ...(styleProps.alternativeLabel && styles.alternativeLabel), - ...(styleProps.completed && styles.completed), - [`& .${stepConnectorClasses.line}`]: { - ...styles.line, - ...styles[`line${capitalize(styleProps.orientation)}`], - }, - }, - styles.root || {}, - ); -}; +import { getStepConnectorUtilityClass } from './stepConnectorClasses'; const useUtilityClasses = (styleProps) => { const { classes, orientation, alternativeLabel, active, completed, disabled } = styleProps; @@ -51,7 +33,16 @@ const StepConnectorRoot = experimentalStyled( { name: 'MuiStepConnector', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.orientation], + ...(styleProps.alternativeLabel && styles.alternativeLabel), + ...(styleProps.completed && styles.completed), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ @@ -75,6 +66,14 @@ const StepConnectorLine = experimentalStyled( { name: 'MuiStepConnector', slot: 'Line', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.line, + ...styles[`line${capitalize(styleProps.orientation)}`], + }; + }, }, )(({ styleProps, theme }) => ({ /* Styles applied to the line element. */ diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js index 6865e237482d60..1d6aabb9ccbd43 100644 --- a/packages/material-ui/src/StepContent/StepContent.js +++ b/packages/material-ui/src/StepContent/StepContent.js @@ -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 Collapse from '../Collapse'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; -import stepContentClasses, { getStepContentUtilityClass } from './stepContentClasses'; - -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.last && styles.last), - [`& .${stepContentClasses.transition}`]: styles.transition, - }, - styles.root || {}, - ); -}; +import { getStepContentUtilityClass } from './stepContentClasses'; const useUtilityClasses = (styleProps) => { const { classes, last } = styleProps; @@ -36,7 +23,14 @@ const StepContentRoot = experimentalStyled( { name: 'MuiStepContent', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.last && styles.last), + }; + }, }, )(({ styleProps, theme }) => ({ /* Styles applied to the root element. */ @@ -59,6 +53,7 @@ const StepContentTransition = experimentalStyled( { name: 'MuiStepContent', slot: 'Transition', + overridesResolver: (props, styles) => styles.transition, }, )(); diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js index 2e1ad46a9ad8d8..7acc9ce395d8ab 100644 --- a/packages/material-ui/src/StepIcon/StepIcon.js +++ b/packages/material-ui/src/StepIcon/StepIcon.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'; @@ -10,15 +9,6 @@ import Warning from '../internal/svg-icons/Warning'; import SvgIcon from '../SvgIcon'; import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses'; -const overridesResolver = (props, styles) => { - return deepmerge( - { - [`& .${stepIconClasses.text}`]: styles.text, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, active, completed, error } = styleProps; @@ -36,7 +26,7 @@ const StepIconRoot = experimentalStyled( { name: 'MuiStepIcon', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => ({ /* Styles applied to the root element. */ @@ -62,6 +52,7 @@ const StepIconText = experimentalStyled( { name: 'MuiStepIcon', slot: 'Text', + overridesResolver: (props, styles) => styles.text, }, )(({ theme }) => ({ /* Styles applied to the SVG text element. */ diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js index eafde9b2ff956a..dcd9f881721e14 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.js +++ b/packages/material-ui/src/StepLabel/StepLabel.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'; @@ -11,20 +10,6 @@ import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.orientation], - [`& .${stepLabelClasses.label}`]: styles.label, - [`& .${stepLabelClasses.iconContainer}`]: styles.iconContainer, - [`& .${stepLabelClasses.labelContainer}`]: styles.labelContainer, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, orientation, active, completed, error, disabled, alternativeLabel } = styleProps; @@ -57,7 +42,14 @@ const StepLabelRoot = experimentalStyled( { name: 'MuiStepLabel', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.orientation], + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ @@ -82,6 +74,7 @@ const StepLabelLabel = experimentalStyled( { name: 'MuiStepLabel', slot: 'Label', + overridesResolver: (props, styles) => styles.label, }, )(({ theme }) => ({ /* Styles applied to the Typography component that wraps `children`. */ @@ -111,6 +104,7 @@ const StepLabelIconContainer = experimentalStyled( { name: 'MuiStepLabel', slot: 'IconContainer', + overridesResolver: (props, styles) => styles.iconContainer, }, )(() => ({ /* Styles applied to the `icon` container element. */ @@ -128,6 +122,7 @@ const StepLabelLabelContainer = experimentalStyled( { name: 'MuiStepLabel', slot: 'LabelContainer', + overridesResolver: (props, styles) => styles.labelContainer, }, )(({ theme }) => ({ /* Styles applied to the container element which wraps `Typography` and `optional`. */ diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js index e338eac555e0ef..392ef3205c49ee 100644 --- a/packages/material-ui/src/Stepper/Stepper.js +++ b/packages/material-ui/src/Stepper/Stepper.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { integerPropType, deepmerge } from '@material-ui/utils'; +import { integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; @@ -9,17 +9,6 @@ import { getStepperUtilityClass } from './stepperClasses'; import StepConnector from '../StepConnector'; import StepperContext from './StepperContext'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge( - { - ...styles[styleProps.orientation], - ...(styleProps.alternativeLabel && styles.alternativeLabel), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { orientation, alternativeLabel, classes } = styleProps; const slots = { @@ -35,7 +24,14 @@ const StepperRoot = experimentalStyled( { name: 'MuiStepper', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.root, + ...styles[styleProps.orientation], + ...(styleProps.alternativeLabel && styles.alternativeLabel), + }; + }, }, )(({ styleProps }) => ({ display: 'flex', diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 6a328a58cd28bc..68cf5abd857e77 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -2,24 +2,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge } from '@material-ui/utils'; import capitalize from '../utils/capitalize'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getSvgIconUtilityClass } from './svgIconClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.color !== 'inherit' && styles[`color${capitalize(styleProps.color)}`]), - ...styles[`fontSize${capitalize(styleProps.fontSize)}`], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { color, fontSize, classes } = styleProps; @@ -40,7 +27,15 @@ const SvgIconRoot = experimentalStyled( { name: 'MuiSvgIcon', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.color !== 'inherit' && styles[`color${capitalize(styleProps.color)}`]), + ...styles[`fontSize${capitalize(styleProps.fontSize)}`], + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index af0cea514e281d..b65670ab94f764 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { refType, deepmerge } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { alpha, darken, lighten } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; @@ -11,25 +11,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import switchClasses, { getSwitchUtilityClass } from './switchClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]), - ...styles[`size${capitalize(styleProps.size)}`], - [`& .${switchClasses.switchBase}`]: { - ...styles.switchBase, - ...styles.input, - ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), - }, - [`& .${switchClasses.thumb}`]: styles.thumb, - [`& .${switchClasses.track}`]: styles.track, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, edge, size, color, checked, disabled } = styleProps; @@ -60,7 +41,15 @@ const SwitchRoot = experimentalStyled( { name: 'MuiSwitch', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.edge && styles[`edge${capitalize(styleProps.edge)}`]), + ...styles[`size${capitalize(styleProps.size)}`], + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ @@ -108,6 +97,15 @@ const SwitchSwitchBase = experimentalStyled( { name: 'MuiSwitch', slot: 'SwitchBase', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.switchBase, + ...styles.input, + ...(styleProps.color !== 'default' && styles[`color${capitalize(styleProps.color)}`]), + }; + }, }, )( ({ theme }) => ({ @@ -172,6 +170,7 @@ const SwitchTrack = experimentalStyled( { name: 'MuiSwitch', slot: 'Track', + overridesResolver: (props, styles) => styles.track, }, )(({ theme }) => ({ /* Styles applied to the track element. */ @@ -193,6 +192,7 @@ const SwitchThumb = experimentalStyled( { name: 'MuiSwitch', slot: 'Thumb', + overridesResolver: (props, styles) => styles.thumb, }, )(({ theme }) => ({ /* Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */ From e03ffd97ce0790880d099a7a2ba287cc4e9a7592 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 23 Apr 2021 11:34:39 +0200 Subject: [PATCH 15/39] [docs] Require documentation of demos (#25811) --- docs/scripts/buildApi.ts | 82 +++++++------- docs/scripts/i18n.js | 15 ++- docs/scripts/tsconfig.json | 2 +- .../modules/utils/{helpers.js => helpers.ts} | 105 ++++++++++-------- 4 files changed, 116 insertions(+), 88 deletions(-) rename docs/src/modules/utils/{helpers.js => helpers.ts} (66%) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index dfe0d800dd1b2e..42c7ae612b0c00 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -5,7 +5,6 @@ import * as babel from '@babel/core'; import traverse from '@babel/traverse'; import * as _ from 'lodash'; import kebabCase from 'lodash/kebabCase'; -import uniqBy from 'lodash/uniqBy'; import * as prettier from 'prettier'; import * as recast from 'recast'; import remark from 'remark'; @@ -22,7 +21,7 @@ import { } from 'react-docgen'; import muiDefaultPropsHandler from 'docs/src/modules/utils/defaultPropsHandler'; import muiFindAnnotatedComponentsResolver from 'docs/src/modules/utils/findAnnotatedComponentsResolver'; -import { LANGUAGES, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants'; +import { LANGUAGES } from 'docs/src/modules/constants'; import parseTest from 'docs/src/modules/utils/parseTest'; import generatePropTypeDescription, { escapeCell, @@ -40,8 +39,6 @@ import getStylesCreator from '@material-ui/styles/getStylesCreator'; import { createMuiTheme } from '@material-ui/core/styles'; import { getLineFeed, getUnstyledFilename } from './helpers'; -const DEMO_IGNORE = LANGUAGES_IN_PROGRESS.map((language) => `-${language}.md`); - const apiDocsTranslationsDirectory = path.resolve('docs', 'translations', 'api-docs'); function resolveApiDocsTranslationsComponentDirectory(component: ReactApi): string { return path.resolve(apiDocsTranslationsDirectory, kebabCase(component.name)); @@ -59,16 +56,16 @@ function resolveApiDocsTranslationsComponentLanguagePath( } interface ReactApi extends ReactDocgenApi { + /** + * list of page pathnames + * @example ['/components/Accordion'] + */ + demos: readonly string[]; EOL: string; filename: string; forwardsRefTo: string | undefined; inheritance: { component: string; pathname: string } | null; name: string; - pagesMarkdown: ReadonlyArray<{ - components: readonly string[]; - filename: string; - pathname: string; - }>; spread: boolean | undefined; src: string; styles: { @@ -490,13 +487,6 @@ async function annotateComponentDefinition(context: { ); } - const demos = uniqBy( - api.pagesMarkdown.filter((page) => { - return page.components.includes(api.name); - }, []), - (page) => page.pathname, - ); - let inheritanceAPILink = null; if (api.inheritance !== null) { const url = api.inheritance.pathname.startsWith('/') @@ -511,14 +501,14 @@ async function annotateComponentDefinition(context: { if (markdownLines[markdownLines.length - 1] !== '') { markdownLines.push(''); } - if (demos.length > 0) { - markdownLines.push( - 'Demos:', - '', - ...demos.map((page) => `- [${pageToTitle(page)}](${HOST}${page.pathname}/)`), - '', - ); - } + markdownLines.push( + 'Demos:', + '', + ...api.demos.map((demoPathname) => { + return `- [${pageToTitle({ pathname: demoPathname })}](${HOST}${demoPathname}/)`; + }), + '', + ); markdownLines.push('API:', '', `- [${api.name} API](${HOST}/api/${kebabCase(api.name)}/)`); if (api.inheritance !== null) { @@ -798,18 +788,11 @@ function extractClassConditions(descriptions: any) { * Generate list of component demos */ function generateDemoList(reactAPI: ReactApi): string { - const pagesMarkdown = reactAPI.pagesMarkdown.filter((page) => { - return ( - !DEMO_IGNORE.includes(page.filename.slice(-6)) && page.components.includes(reactAPI.name) - ); - }); - - if (pagesMarkdown.length === 0) { - return ''; - } - - return `
      ${pagesMarkdown - .map((page) => `
    • ${pageToTitle(page)}
      • `) + return ``; } @@ -856,6 +839,21 @@ async function parseComponentSource( return reactAPI; } +function findComponentDemos( + api: ReactApi, + pagesMarkdown: ReadonlyArray<{ pathname: string; components: readonly string[] }>, +): ReactApi['demos'] { + const demos = pagesMarkdown + .filter((page) => { + return page.components.includes(api.name); + }) + .map((page) => { + return page.pathname; + }); + + return Array.from(new Set(demos)); +} + async function buildDocs(options: { component: { filename: string }; pagesMarkdown: ReadonlyArray<{ @@ -1010,9 +1008,17 @@ async function buildDocs(options: { reactApi.name = name; reactApi.styles = styles; - reactApi.pagesMarkdown = pagesMarkdown; reactApi.EOL = getLineFeed(src); + reactApi.demos = findComponentDemos(reactApi, pagesMarkdown); + if (reactApi.demos.length === 0) { + throw new Error( + 'Unable to find demos. \n' + + `Be sure to include \`components: ${reactApi.name}\` in the markdown pages where the \`${reactApi.name}\` component is relevant. ` + + 'Every public component should have a demo. ', + ); + } + // styled components does not have the options static const styledComponent = !component?.default?.options; if (styledComponent) { @@ -1366,7 +1372,7 @@ async function run(argv: { workspaceRoot, }); } catch (error) { - error.message = `${component.filename}: ${error.message}`; + error.message = `${path.relative(process.cwd(), component.filename)}: ${error.message}`; throw error; } }); diff --git a/docs/scripts/i18n.js b/docs/scripts/i18n.js index cc961f8757c8b3..607f03df94bf17 100644 --- a/docs/scripts/i18n.js +++ b/docs/scripts/i18n.js @@ -1,18 +1,25 @@ +// @ts-check import path from 'path'; import fse from 'fs-extra'; import { pageToTitle } from 'docs/src/modules/utils/helpers'; -import pages from 'docs/src/pages'; +import allPages from 'docs/src/pages'; const EXCLUDES = ['/api', '/blog']; async function run() { const translationsFilename = path.join(__dirname, '../translations/translations.json'); const translationsFile = await fse.readFile(translationsFilename, 'utf8'); + /** + * @type {{ pages: Record }} + */ const output = JSON.parse(translationsFile); output.pages = {}; - const traverse = (pages2) => { - pages2.forEach((page) => { + /** + * @param {readonly import('docs/src/pages').MuiPage[]} pages + */ + const traverse = (pages) => { + pages.forEach((page) => { if ( (page.pathname !== '/' && page.pathname === '/api-docs') || !EXCLUDES.some((exclude) => page.pathname.includes(exclude)) @@ -31,7 +38,7 @@ async function run() { }); }; - traverse(pages); + traverse(allPages); await fse.writeFile(translationsFilename, `${JSON.stringify(output, null, 2)}\n`); } diff --git a/docs/scripts/tsconfig.json b/docs/scripts/tsconfig.json index 648377a111e2d8..4a2b897d5f2c50 100644 --- a/docs/scripts/tsconfig.json +++ b/docs/scripts/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "../../tsconfig.json", - "include": ["../types/react-docgen.d.ts", "buildApi.ts"], + "include": ["../types/react-docgen.d.ts", "buildApi.ts", "i18n.js"], "compilerOptions": { "allowJs": true, "isolatedModules": true, diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.ts similarity index 66% rename from docs/src/modules/utils/helpers.js rename to docs/src/modules/utils/helpers.ts index f79b649fd8e799..043124df0489da 100644 --- a/docs/src/modules/utils/helpers.js +++ b/docs/src/modules/utils/helpers.ts @@ -1,32 +1,38 @@ -const upperFirst = require('lodash/upperFirst'); -const camelCase = require('lodash/camelCase'); -const { CODE_VARIANTS, LANGUAGES } = require('../constants'); +import upperFirst from 'lodash/upperFirst'; +import camelCase from 'lodash/camelCase'; +import { CODE_VARIANTS, LANGUAGES } from '../constants'; /** * Mapping from the date adapter sub-packages to the npm packages they require. * @example `@material-ui/lab/AdapterDateFns` has a peer dependency on `date-fns`. */ -const dateAdapterPackageMapping = { +const dateAdapterPackageMapping: Record = { AdapterDateFns: 'date-fns', AdapterDayjs: 'dayjs', AdapterLuxon: 'luxon', AdapterMoment: 'moment', }; -function titleize(string) { +export function titleize(hyphenedString: string): string { if (process.env.NODE_ENV !== 'production') { - if (typeof string !== 'string' || string.length <= 0) { - console.error('titleize(string) expects a non empty string argument.'); + if (typeof hyphenedString !== 'string' || hyphenedString.length <= 0) { + console.error('titleize(hyphenedString) expects a non empty string argument.'); } } - return string + return hyphenedString .split('-') .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); } -function pageToTitle(page) { +export interface Page { + pathname: string; + subheader?: string; + title?: string | false; +} + +export function pageToTitle(page: Page): string | null { if (page.title === false) { return null; } @@ -45,7 +51,9 @@ function pageToTitle(page) { return titleize(name); } -function pageToTitleI18n(page, t) { +export type Translate = (id: string, options?: Partial<{ ignoreWarning: boolean }>) => string; + +export function pageToTitleI18n(page: Page, t: Translate): string | null { const path = page.subheader || page.pathname; return t(`pages.${path}`, { ignoreWarning: true }) || pageToTitle(page); } @@ -64,9 +72,9 @@ const packagesWithBundledTypes = ['date-fns', '@emotion/react', '@emotion/styled * in packagesWithBundledTypes * * @see packagesWithBundledTypes in this module namespace - * @param {Record} deps - list of dependency as `name => version` + * @param deps - list of dependency as `name => version` */ -function addTypeDeps(deps) { +function addTypeDeps(deps: Record): void { const packagesWithDTPackage = Object.keys(deps) .filter((name) => packagesWithBundledTypes.indexOf(name) === -1) // All the Material-UI packages come with bundled types @@ -84,8 +92,11 @@ function addTypeDeps(deps) { }); } -function includePeerDependencies(deps, versions) { - let newDeps = { +function includePeerDependencies( + deps: Record, + versions: Record, +): Record { + let newDeps: Record = { ...deps, 'react-dom': versions['react-dom'], react: versions.react, @@ -101,19 +112,20 @@ function includePeerDependencies(deps, versions) { newDeps['@material-ui/core'] = versions['@material-ui/core']; } - if (window.muiDocConfig) { - newDeps = window.muiDocConfig.csbIncludePeerDependencies(newDeps, { versions }); + // TODO: Where is this coming from and why does it need to be injected this way. + if ((window as any).muiDocConfig) { + newDeps = (window as any).muiDocConfig.csbIncludePeerDependencies(newDeps, { versions }); } return newDeps; } /** - * @param {string} packageName - The name of a package living inside this repository. - * @param {string} [commitRef] + * @param packageName - The name of a package living inside this repository. + * @param commitRef * @return string - A valid version for a dependency entry in a package.json */ -function getMuiPackageVersion(packageName, commitRef) { +function getMuiPackageVersion(packageName: string, commitRef?: string): string { if ( commitRef === undefined || process.env.SOURCE_CODE_REPO !== 'https://github.com/mui-org/material-ui' @@ -126,17 +138,24 @@ function getMuiPackageVersion(packageName, commitRef) { } /** - * @param {string} raw - ES6 source with es module imports - * @param {object} options - * @param {'JS' | 'TS'} [options.codeLanguage] - - * @param {string} [options.muiCommitRef] - If specified use `@material-ui/*` packages from a specific commit. - * @returns {Record} map of packages with their required version + * @param raw - ES6 source with es module imports + * @param options + * @returns map of packages with their required version */ -function getDependencies(raw, options = {}) { +export function getDependencies( + raw: string, + options: { + codeLanguage?: 'JS' | 'TS'; + /** + * If specified use `@material-ui/*` packages from a specific commit. + */ + muiCommitRef?: string; + } = {}, +) { const { codeLanguage = CODE_VARIANTS.JS, muiCommitRef } = options; - let deps = {}; - let versions = { + let deps: Record = {}; + let versions: Record = { react: 'latest', 'react-dom': 'latest', '@emotion/react': 'latest', @@ -152,12 +171,13 @@ function getDependencies(raw, options = {}) { '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef), }; - if (window.muiDocConfig) { - versions = window.muiDocConfig.csbGetVersions(versions, { muiCommitRef }); + // TODO: Where is this coming from and why does it need to be injected this way. + if ((window as any).muiDocConfig) { + versions = (window as any).muiDocConfig.csbGetVersions(versions, { muiCommitRef }); } const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm; - let m; + let m: RegExpExecArray | null = null; // eslint-disable-next-line no-cond-assign while ((m = re.exec(raw))) { let name; @@ -200,19 +220,23 @@ function getDependencies(raw, options = {}) { /** * Get the value of a cookie * Source: https://vanillajstoolkit.com/helpers/getcookie/ - * @param {String} name The name of the cookie - * @return {String} The cookie value + * @param name - The name of the cookie + * @return The cookie value */ -function getCookie(name) { - if (process.browser) { +export function getCookie(name: string): string | undefined { + // `process.browser` is set by nextjs where we only use `getCookie` + // but this file is imported from nodejs scripts so TypeScript complains for that environment. + if ((process as any).browser) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); - if (parts.length === 2) return parts.pop().split(';').shift(); + if (parts.length === 2) { + return parts[1].split(';').shift(); + } } return undefined; } -function pathnameToLanguage(pathname) { +export function pathnameToLanguage(pathname: string): { userLanguage: string; canonical: string } { const userLanguage = pathname.substring(1, 3); if (LANGUAGES.indexOf(userLanguage) !== -1 && pathname.indexOf(`/${userLanguage}/`) === 0) { @@ -227,12 +251,3 @@ function pathnameToLanguage(pathname) { canonical: pathname, }; } - -module.exports = { - titleize, - pageToTitle, - pageToTitleI18n, - getDependencies, - getCookie, - pathnameToLanguage, -}; From 675d1206b274a6355b5739904312d1a903b821bb Mon Sep 17 00:00:00 2001 From: "I.M. Adil" <73747557+Knoxo@users.noreply.github.com> Date: Fri, 23 Apr 2021 16:14:33 +0600 Subject: [PATCH 16/39] [l10n] Add Bengali (bnBD) locale (#25841) Co-authored-by: Olivier Tassinari --- .../pages/guides/localization/localization.md | 1 + packages/material-ui/src/locale/index.ts | 71 +++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/docs/src/pages/guides/localization/localization.md b/docs/src/pages/guides/localization/localization.md index be204d2f9c824e..295c7686cfc248 100644 --- a/docs/src/pages/guides/localization/localization.md +++ b/docs/src/pages/guides/localization/localization.md @@ -37,6 +37,7 @@ const theme = createMuiTheme( | Arabic (Egypt) | ar-EG | `arEG` | | Armenian | hy-AM | `hyAM` | | Azerbaijani | az-AZ | `azAZ` | +| Bangla | bn-BD | `bnBD` | | Bulgarian | bg-BG | `bgBG` | | Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | diff --git a/packages/material-ui/src/locale/index.ts b/packages/material-ui/src/locale/index.ts index 18216e214f2a2a..556b33e0b8ed08 100644 --- a/packages/material-ui/src/locale/index.ts +++ b/packages/material-ui/src/locale/index.ts @@ -180,6 +180,77 @@ export const azAZ: Localization = { }, }; +export const bnBD: Localization = { + components: { + MuiBreadcrumbs: { + defaultProps: { + expandText: 'পথ দেখান', + }, + }, + MuiTablePagination: { + defaultProps: { + getItemAriaLabel: (type) => { + if (type === 'first') { + return 'প্রথম পৃষ্ঠায় যান'; + } + if (type === 'last') { + return 'শেষ পৃষ্ঠায় যান'; + } + if (type === 'next') { + return 'পরবর্তী পৃষ্ঠায় যান'; + } + // if (type === 'previous') { + return 'আগের পৃষ্ঠায় যান'; + }, + labelRowsPerPage: 'প্রতি পৃষ্ঠায় সারি:', + labelDisplayedRows: ({ from, to, count }) => + `${from}-${to} / ${count !== -1 ? count : `${to} থেকে বেশি`}`, + }, + }, + MuiRating: { + defaultProps: { + getLabelText: (value) => `${value} স্টার`, + emptyLabelText: 'খালি', + }, + }, + MuiAutocomplete: { + defaultProps: { + clearText: 'পরিষ্কার করুন', + closeText: 'বন্ধ করুন', + loadingText: 'লোড হচ্ছে…', + noOptionsText: 'কোন অপশন নেই', + openText: 'ওপেন করুন', + }, + }, + MuiAlert: { + defaultProps: { + closeText: 'বন্ধ করুন', + }, + }, + MuiPagination: { + defaultProps: { + 'aria-label': 'পেজিনেশন নেভিগেশন', + getItemAriaLabel: (type, page, selected) => { + if (type === 'page') { + return `${selected ? '' : 'যান '}পৃষ্ঠা ${page}-এ`; + } + if (type === 'first') { + return 'প্রথম পৃষ্ঠায় যান'; + } + if (type === 'last') { + return 'শেষ পৃষ্ঠায় যান'; + } + if (type === 'next') { + return 'পরবর্তী পৃষ্ঠায় যান'; + } + // if (type === 'previous') { + return 'আগের পৃষ্ঠায় যান'; + }, + }, + }, + }, +}; + export const bgBG: Localization = { components: { MuiBreadcrumbs: { From 81d41ca7697a6db4016ad4d79b0358fcb0b0699b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 23 Apr 2021 13:12:56 +0200 Subject: [PATCH 17/39] [docs] Fix Slider's classes wrong description (#25907) [docs] Fix Slider's classes wrong description (#25907) --- .../api-docs/slider-unstyled/slider-unstyled.json | 4 ++-- docs/translations/api-docs/slider/slider.json | 4 ++-- .../src/SliderUnstyled/SliderUnstyled.d.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/translations/api-docs/slider-unstyled/slider-unstyled.json b/docs/translations/api-docs/slider-unstyled/slider-unstyled.json index d328043d78da22..c0a9942fa7427e 100644 --- a/docs/translations/api-docs/slider-unstyled/slider-unstyled.json +++ b/docs/translations/api-docs/slider-unstyled/slider-unstyled.json @@ -61,12 +61,12 @@ }, "trackFalse": { "description": "Class name applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the track element", + "nodeName": "the root element", "conditions": "track={false}" }, "trackInverted": { "description": "Class name applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the track element", + "nodeName": "the root element", "conditions": "track=\"inverted\"" }, "thumb": { diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json index 958ff95fc7d1da..95846686a2ec38 100644 --- a/docs/translations/api-docs/slider/slider.json +++ b/docs/translations/api-docs/slider/slider.json @@ -63,12 +63,12 @@ }, "trackFalse": { "description": "Class name applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the track element", + "nodeName": "the root element", "conditions": "track={false}" }, "trackInverted": { "description": "Class name applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the track element", + "nodeName": "the root element", "conditions": "track=\"inverted\"" }, "thumb": { diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index 9ae595a21eda58..d06ca19efc0ec8 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -44,9 +44,9 @@ export interface SliderUnstyledTypeMap

      { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.label && styleProps.icon && styles.labelIcon), - ...styles[`textColor${capitalize(styleProps.textColor)}`], - ...(styleProps.fullWidth && styles.fullWidth), - ...(styleProps.wrapped && styles.wrapped), - [`& .${tabClasses.wrapper}`]: styles.wrapper, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, textColor, fullWidth, wrapped, icon, label, selected, disabled } = styleProps; @@ -50,7 +34,17 @@ const TabRoot = experimentalStyled( { name: 'MuiTab', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.label && styleProps.icon && styles.labelIcon), + ...styles[`textColor${capitalize(styleProps.textColor)}`], + ...(styleProps.fullWidth && styles.fullWidth), + ...(styleProps.wrapped && styles.wrapped), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ @@ -127,6 +121,7 @@ const TabWrapper = experimentalStyled( { name: 'MuiTab', slot: 'Wrapper', + overridesResolver: (props, styles) => styles.wrapper, }, )({ /* Styles applied to the `icon` and `label`'s wrapper element. */ diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.js index a2b6fd4ddddb07..90f29c3ce5be4f 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.js +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.js @@ -2,7 +2,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 KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft'; import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight'; @@ -12,17 +11,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.orientation && styles[styleProps.orientation]), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, orientation, disabled } = styleProps; @@ -39,7 +27,14 @@ const TabScrollButtonRoot = experimentalStyled( { name: 'MuiTabScrollButton', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.orientation && styles[styleProps.orientation]), + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index 96ab5c048d6b2c..a23a46f40711c0 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.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 TableContext from './TableContext'; @@ -9,17 +8,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getTableUtilityClass } from './tableClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.stickyHeader && styles.stickyHeader), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, stickyHeader } = styleProps; @@ -36,7 +24,14 @@ const TableRoot = experimentalStyled( { name: 'MuiTable', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.stickyHeader && styles.stickyHeader), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js index efe6f235eba14e..d73e2440350d96 100644 --- a/packages/material-ui/src/TableBody/TableBody.js +++ b/packages/material-ui/src/TableBody/TableBody.js @@ -7,8 +7,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getTableBodyUtilityClass } from './tableBodyClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -25,7 +23,7 @@ const TableBodyRoot = experimentalStyled( { name: 'MuiTableBody', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index f920936b98cbd1..570d683e3eb53e 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.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 capitalize from '../utils/capitalize'; import { darken, alpha, lighten } from '../styles/colorManipulator'; @@ -11,21 +10,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[styleProps.variant], - ...styles[`size${capitalize(styleProps.size)}`], - ...(styleProps.padding !== 'default' && styles[`padding${capitalize(styleProps.padding)}`]), - ...(styleProps.align !== 'inherit' && styles[`align${capitalize(styleProps.align)}`]), - ...(styleProps.stickyHeader && styles.stickyHeader), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, variant, align, padding, size, stickyHeader } = styleProps; @@ -49,7 +33,18 @@ const TableCellRoot = experimentalStyled( { name: 'MuiTableCell', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[styleProps.variant], + ...styles[`size${capitalize(styleProps.size)}`], + ...(styleProps.padding !== 'default' && styles[`padding${capitalize(styleProps.padding)}`]), + ...(styleProps.align !== 'inherit' && styles[`align${capitalize(styleProps.align)}`]), + ...(styleProps.stickyHeader && styles.stickyHeader), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/TableContainer/TableContainer.js b/packages/material-ui/src/TableContainer/TableContainer.js index a500a0af6566d1..11728e434a662e 100644 --- a/packages/material-ui/src/TableContainer/TableContainer.js +++ b/packages/material-ui/src/TableContainer/TableContainer.js @@ -6,8 +6,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getTableContainerUtilityClass } from './tableContainerClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -24,7 +22,7 @@ const TableContainerRoot = experimentalStyled( { name: 'MuiTableContainer', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js index b6e4128f41c26d..bf3dd1b22ff2d3 100644 --- a/packages/material-ui/src/TableFooter/TableFooter.js +++ b/packages/material-ui/src/TableFooter/TableFooter.js @@ -7,8 +7,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getTableFooterUtilityClass } from './tableFooterClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -25,7 +23,7 @@ const TableFooterRoot = experimentalStyled( { name: 'MuiTableFooter', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js index 334cd3d3119e30..4d14515653fadd 100644 --- a/packages/material-ui/src/TableHead/TableHead.js +++ b/packages/material-ui/src/TableHead/TableHead.js @@ -7,8 +7,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getTableHeadUtilityClass } from './tableHeadClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -25,7 +23,7 @@ const TableHeadRoot = experimentalStyled( { name: 'MuiTableHead', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index dad8c236e3d8bd..6bc2bfd076b4a7 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.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 Tablelvl2Context from '../Table/Tablelvl2Context'; import { alpha } from '../styles/colorManipulator'; @@ -9,18 +8,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.head && styles.head), - ...(styleProps.footer && styles.footer), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, selected, hover, head, footer } = styleProps; @@ -37,7 +24,15 @@ const TableRowRoot = experimentalStyled( { name: 'MuiTableRow', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.head && styles.head), + ...(styleProps.footer && styles.footer), + }; + }, }, )(({ theme }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js index 67885e7fee7cd7..bfbdfbbf5a1601 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js @@ -1,5 +1,4 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge } from '@material-ui/utils'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; @@ -10,21 +9,6 @@ import useThemeProps from '../styles/useThemeProps'; import capitalize from '../utils/capitalize'; import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.active && styles.active), - [`& .${tableSortLabelClasses.icon}`]: { - ...styles.icon, - ...styles[`iconDirection${capitalize(styleProps.direction)}`], - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, direction, active } = styleProps; @@ -42,7 +26,14 @@ const TableSortLabelRoot = experimentalStyled( { name: 'MuiTableSortLabel', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.active && styles.active), + }; + }, }, )(({ theme }) => ({ /* Styles applied to the root element. */ @@ -72,7 +63,18 @@ const TableSortLabelRoot = experimentalStyled( const TableSortLabelIcon = experimentalStyled( 'span', {}, - { name: 'MuiTableSortLabel', slot: 'Icon' }, + { + name: 'MuiTableSortLabel', + slot: 'Icon', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.icon, + ...styles[`iconDirection${capitalize(styleProps.direction)}`], + }; + }, + }, )(({ theme, styleProps }) => ({ /* Styles applied to the icon component. */ fontSize: 18, diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js index 750bb51509339a..56672ad420e801 100644 --- a/packages/material-ui/src/TextField/TextField.js +++ b/packages/material-ui/src/TextField/TextField.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { deepmerge, refType } from '@material-ui/utils'; +import { refType } from '@material-ui/utils'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import Input from '../Input'; @@ -20,10 +20,6 @@ const variantComponent = { outlined: OutlinedInput, }; -const overridesResolver = (props, styles) => { - return deepmerge(styles.root || {}, {}); -}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -40,7 +36,7 @@ const TextFieldRoot = experimentalStyled( { name: 'MuiTextField', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({}); diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.js b/packages/material-ui/src/ToggleButton/ToggleButton.js index 9b3ad349a4c22b..fbc7a5237c42dd 100644 --- a/packages/material-ui/src/ToggleButton/ToggleButton.js +++ b/packages/material-ui/src/ToggleButton/ToggleButton.js @@ -2,7 +2,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 { alpha } from '../styles'; import ButtonBase from '../ButtonBase'; @@ -11,18 +10,6 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[`size${capitalize(styleProps.size)}`], - [`& .${toggleButtonClasses.label}`]: styles.label, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, fullWidth, selected, disabled, size, color } = styleProps; @@ -47,7 +34,14 @@ const ToggleButtonRoot = experimentalStyled( { name: 'MuiToggleButton', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`size${capitalize(styleProps.size)}`], + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ @@ -130,6 +124,7 @@ const ToggleButtonLabel = experimentalStyled( { name: 'MuiToggleButton', slot: 'Label', + overridesResolver: (props, styles) => styles.label, }, )({ /* Styles applied to the label wrapper element. */ diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js index a4d40d53baa73a..8eed888fa34b10 100644 --- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -2,7 +2,6 @@ import * as React from 'react'; import { isFragment } from 'react-is'; 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'; @@ -12,22 +11,6 @@ import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass, } from './toggleButtonGroupClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.orientation === 'vertical' && styles.vertical), - ...(styleProps.fullWidth && styles.fullWidth), - [`& .${toggleButtonGroupClasses.grouped}`]: { - ...styles.grouped, - ...styles[`grouped${capitalize(styleProps.orientation)}`], - }, - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, orientation, fullWidth } = styleProps; @@ -45,7 +28,19 @@ const ToggleButtonGroupRoot = experimentalStyled( { name: 'MuiToggleButtonGroup', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + [`& .${toggleButtonGroupClasses.grouped}`]: { + ...styles.grouped, + ...styles[`grouped${capitalize(styleProps.orientation)}`], + }, + ...styles.root, + ...(styleProps.orientation === 'vertical' && styles.vertical), + ...(styleProps.fullWidth && styles.fullWidth), + }; + }, }, )(({ styleProps, theme }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js index 8cc8b4617a9f0b..519f99ccb7c9aa 100644 --- a/packages/material-ui/src/Toolbar/Toolbar.js +++ b/packages/material-ui/src/Toolbar/Toolbar.js @@ -1,24 +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 useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { getToolbarUtilityClass } from './toolbarClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.disableGutters && styles.gutters), - ...styles[styleProps.variant], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, disableGutters, variant } = styleProps; @@ -35,7 +22,15 @@ const ToolbarRoot = experimentalStyled( { name: 'MuiToolbar', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(!styleProps.disableGutters && styles.gutters), + ...styles[styleProps.variant], + }; + }, }, )( ({ theme, styleProps }) => ({ diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 7c67dd718ad307..3540a439c4415b 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { deepmerge, elementAcceptingRef } from '@material-ui/utils'; +import { elementAcceptingRef } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { alpha } from '../styles/colorManipulator'; import experimentalStyled from '../styles/experimentalStyled'; @@ -20,25 +20,6 @@ function round(value) { return Math.round(value * 1e5) / 1e5; } -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(!styleProps.disableInteractive && styles.popperInteractive), - ...(styleProps.arrow && styles.popperArrow), - [`& .${tooltipClasses.tooltip}`]: { - ...styles.tooltip, - ...(styleProps.touch && styles.touch), - ...(styleProps.arrow && styles.tooltipArrow), - ...styles[`tooltipPlacement${capitalize(styleProps.placement.split('-')[0])}`], - }, - [`& .${tooltipClasses.arrow}`]: styles.arrow, - }, - styles.popper || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { classes, disableInteractive, arrow, touch, placement } = styleProps; @@ -62,7 +43,15 @@ const TooltipPopper = experimentalStyled( { name: 'MuiTooltip', slot: 'Popper', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.popper, + ...(!styleProps.disableInteractive && styles.popperInteractive), + ...(styleProps.arrow && styles.popperArrow), + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the Popper element. */ @@ -117,6 +106,16 @@ const TooltipTooltip = experimentalStyled( { name: 'MuiTooltip', slot: 'Tooltip', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.tooltip, + ...(styleProps.touch && styles.touch), + ...(styleProps.arrow && styles.tooltipArrow), + ...styles[`tooltipPlacement${capitalize(styleProps.placement.split('-')[0])}`], + }; + }, }, )(({ theme, styleProps }) => ({ /* Styles applied to the tooltip (label wrapper) element. */ @@ -182,6 +181,7 @@ const TooltipArrow = experimentalStyled( { name: 'MuiTooltip', slot: 'Arrow', + overridesResolver: (props, styles) => styles.arrow, }, )(({ theme }) => ({ /* Styles applied to the arrow element. */ diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js index 944eb8d903b436..5561aac9ed042f 100644 --- a/packages/material-ui/src/Typography/Typography.js +++ b/packages/material-ui/src/Typography/Typography.js @@ -2,28 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_extendSxProp as extendSxProp } from '@material-ui/system'; -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 { getTypographyUtilityClass } from './typographyClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...(styleProps.variant && styles[styleProps.variant]), - ...(styleProps.align !== 'inherit' && styles[`align${capitalize(styleProps.align)}`]), - ...(styleProps.noWrap && styles.noWrap), - ...(styleProps.gutterBottom && styles.gutterBottom), - ...(styleProps.paragraph && styles.paragraph), - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { align, gutterBottom, noWrap, paragraph, variant, classes } = styleProps; @@ -44,7 +28,22 @@ const useUtilityClasses = (styleProps) => { export const TypographyRoot = experimentalStyled( 'span', {}, - { name: 'MuiTypography', slot: 'Root', overridesResolver }, + { + name: 'MuiTypography', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...(styleProps.variant && styles[styleProps.variant]), + ...(styleProps.align !== 'inherit' && styles[`align${capitalize(styleProps.align)}`]), + ...(styleProps.noWrap && styles.noWrap), + ...(styleProps.gutterBottom && styles.gutterBottom), + ...(styleProps.paragraph && styles.paragraph), + }; + }, + }, )(({ theme, styleProps }) => ({ margin: 0, ...(styleProps.variant && theme.typography[styleProps.variant]), From 6cae8e7379c57af75b6e4faeb58cdee13e96752f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 23 Apr 2021 13:52:56 +0200 Subject: [PATCH 19/39] [lab] Update slot components to use overridesResolver (#25906) [lab] Update slot components to use overridesResolver (#25906) --- .../material-ui-lab/src/TabPanel/TabPanel.js | 4 +-- .../TimelineConnector/TimelineConnector.js | 4 +-- .../src/TimelineContent/TimelineContent.js | 23 ++++++++-------- .../src/TimelineDot/TimelineDot.js | 27 ++++++++----------- .../src/TimelineItem/TimelineItem.js | 18 ++++++------- .../TimelineOppositeContent.js | 19 +++++-------- .../TimelineSeparator/TimelineSeparator.js | 4 +-- .../material-ui-lab/src/TreeView/TreeView.js | 4 +-- 8 files changed, 41 insertions(+), 62 deletions(-) diff --git a/packages/material-ui-lab/src/TabPanel/TabPanel.js b/packages/material-ui-lab/src/TabPanel/TabPanel.js index a9e4edfa78db9c..7e9b3274e28167 100644 --- a/packages/material-ui-lab/src/TabPanel/TabPanel.js +++ b/packages/material-ui-lab/src/TabPanel/TabPanel.js @@ -9,8 +9,6 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled import { getTabPanelUtilityClass } from './tabPanelClasses'; import { getPanelId, getTabId, useTabContext } from '../TabContext'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -27,7 +25,7 @@ const TabPanelRoot = experimentalStyled( { name: 'MuiTabPanel', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => ({ padding: theme.spacing(3), diff --git a/packages/material-ui-lab/src/TimelineConnector/TimelineConnector.js b/packages/material-ui-lab/src/TimelineConnector/TimelineConnector.js index 61b89883e91b67..949720b79a618c 100644 --- a/packages/material-ui-lab/src/TimelineConnector/TimelineConnector.js +++ b/packages/material-ui-lab/src/TimelineConnector/TimelineConnector.js @@ -8,8 +8,6 @@ import { } from '@material-ui/core/styles'; import { getTimelineConnectorUtilityClass } from './timelineConnectorClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -26,7 +24,7 @@ const TimelineConnectorRoot = experimentalStyled( { name: 'MuiTimelineConnector', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )(({ theme }) => { /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/TimelineContent/TimelineContent.js b/packages/material-ui-lab/src/TimelineContent/TimelineContent.js index 16b689530327c7..14b7f13062730c 100644 --- a/packages/material-ui-lab/src/TimelineContent/TimelineContent.js +++ b/packages/material-ui-lab/src/TimelineContent/TimelineContent.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 { capitalize } from '@material-ui/core/utils'; import { experimentalStyled, @@ -12,16 +11,6 @@ import Typography from '@material-ui/core/Typography'; import TimelineContext from '../Timeline/TimelineContext'; import { getTimelineContentUtilityClass } from './timelineContentClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge( - { - ...styles[`align${capitalize(styleProps.align)}`], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { align, classes } = styleProps; @@ -35,7 +24,17 @@ const useUtilityClasses = (styleProps) => { const TimelineContentRoot = experimentalStyled( Typography, {}, - { name: 'MuiTimelineContent', slot: 'Root', overridesResolver }, + { + name: 'MuiTimelineContent', + slot: 'Root', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.root, + ...styles[`align${capitalize(styleProps.align)}`], + }; + }, + }, )(({ styleProps }) => ({ flex: 1, padding: '6px 16px', diff --git a/packages/material-ui-lab/src/TimelineDot/TimelineDot.js b/packages/material-ui-lab/src/TimelineDot/TimelineDot.js index 8597ef1bda1401..ecc7dd73a1bef0 100644 --- a/packages/material-ui-lab/src/TimelineDot/TimelineDot.js +++ b/packages/material-ui-lab/src/TimelineDot/TimelineDot.js @@ -5,25 +5,10 @@ import { experimentalStyled, unstable_useThemeProps as useThemeProps, } from '@material-ui/core/styles'; -import { deepmerge } from '@material-ui/utils'; import { capitalize } from '@material-ui/core/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { getTimelineDotUtilityClass } from './timelineDotClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return deepmerge( - { - ...styles[ - styleProps.color !== 'inherit' && `${styleProps.variant}${capitalize(styleProps.color)}` - ], - ...styles[styleProps.variant], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { color, variant, classes } = styleProps; @@ -40,7 +25,17 @@ const TimelineDotRoot = experimentalStyled( { name: 'MuiTimelineDot', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[ + styleProps.color !== 'inherit' && `${styleProps.variant}${capitalize(styleProps.color)}` + ], + ...styles[styleProps.variant], + }; + }, }, )(({ styleProps, theme }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/TimelineItem/TimelineItem.js b/packages/material-ui-lab/src/TimelineItem/TimelineItem.js index 9f95a6380b60dc..95de69a49819d0 100644 --- a/packages/material-ui-lab/src/TimelineItem/TimelineItem.js +++ b/packages/material-ui-lab/src/TimelineItem/TimelineItem.js @@ -12,15 +12,6 @@ import { timelineOppositeContentClasses } from '../TimelineOppositeContent'; import TimelineContext from '../Timeline/TimelineContext'; import { getTimelineItemUtilityClass } from './timelineItemClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - - return { - ...styles.root, - ...styles[`align${capitalize(styleProps.align)}`], - }; -}; - const useUtilityClasses = (styleProps) => { const { align, classes, hasOppositeContent } = styleProps; @@ -37,7 +28,14 @@ const TimelineItemRoot = experimentalStyled( { name: 'MuiTimelineItem', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + + return { + ...styles.root, + ...styles[`align${capitalize(styleProps.align)}`], + }; + }, }, )(({ styleProps }) => ({ listStyle: 'none', diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js index f20f3b714c72c7..8126748c66c092 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js +++ b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js @@ -5,23 +5,12 @@ import { experimentalStyled, unstable_useThemeProps as useThemeProps, } from '@material-ui/core/styles'; -import { deepmerge } from '@material-ui/utils'; import { capitalize } from '@material-ui/core/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import Typography from '@material-ui/core/Typography'; import TimelineContext from '../Timeline/TimelineContext'; import { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses'; -const overridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge( - { - ...styles[`align${capitalize(styleProps.align)}`], - }, - styles.root || {}, - ); -}; - const useUtilityClasses = (styleProps) => { const { align, classes } = styleProps; @@ -38,7 +27,13 @@ const TimelineOppositeContentRoot = experimentalStyled( { name: 'MuiTimelineOppositeContent', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.root, + ...styles[`align${capitalize(styleProps.align)}`], + }; + }, }, )(({ styleProps }) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/TimelineSeparator/TimelineSeparator.js b/packages/material-ui-lab/src/TimelineSeparator/TimelineSeparator.js index 927b4c1c9c296f..5005ccf4c9850b 100644 --- a/packages/material-ui-lab/src/TimelineSeparator/TimelineSeparator.js +++ b/packages/material-ui-lab/src/TimelineSeparator/TimelineSeparator.js @@ -8,8 +8,6 @@ import { } from '@material-ui/core/styles'; import { getTimelineSeparatorUtilityClass } from './timelineSeparatorClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -26,7 +24,7 @@ const TimelineSeparatorRoot = experimentalStyled( { name: 'MuiTimelineSeparator', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ display: 'flex', diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js index 9a8f89e0c9c878..d94edb69b29047 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.js +++ b/packages/material-ui-lab/src/TreeView/TreeView.js @@ -17,8 +17,6 @@ import TreeViewContext from './TreeViewContext'; import { DescendantProvider } from './descendants'; import { getTreeViewUtilityClass } from './treeViewClasses'; -const overridesResolver = (props, styles) => styles.root || {}; - const useUtilityClasses = (styleProps) => { const { classes } = styleProps; @@ -35,7 +33,7 @@ const TreeViewRoot = experimentalStyled( { name: 'MuiTreeView', slot: 'Root', - overridesResolver, + overridesResolver: (props, styles) => styles.root, }, )({ padding: 0, From 12ce5c5b96b3beb159e1f6cec2d794dac8e5e402 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 23 Apr 2021 18:54:12 +0700 Subject: [PATCH 20/39] [test] Add test validator to improve DX (#25854) --- test/utils/describeConformanceV5.js | 46 +++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/test/utils/describeConformanceV5.js b/test/utils/describeConformanceV5.js index 0f5fadbffa204b..89f163bc991b1a 100644 --- a/test/utils/describeConformanceV5.js +++ b/test/utils/describeConformanceV5.js @@ -12,6 +12,13 @@ import { testRootClass, } from './describeConformance'; +function throwMissingPropError(field) { + throw new Error(`missing "${field}" in options + + > describeConformanceV5(element, () => options) +`); +} + /** * Material-UI components have a `components` prop that allows rendering a different * Components from @inheritComponent @@ -41,6 +48,15 @@ function testThemeDefaultProps(element, getOptions) { it("respect theme's defaultProps", () => { const testProp = 'data-id'; const { muiName, render } = getOptions(); + + if (!muiName) { + throwMissingPropError('muiName'); + } + + if (!render) { + throwMissingPropError('render'); + } + const theme = createMuiTheme({ components: { [muiName]: { @@ -76,6 +92,14 @@ function testThemeStyleOverrides(element, getOptions) { return; } + if (!muiName) { + throwMissingPropError('muiName'); + } + + if (!render) { + throwMissingPropError('render'); + } + const testStyle = { marginTop: '13px', }; @@ -199,6 +223,14 @@ function testThemeVariants(element, getOptions) { throw new Error('missing testVariantProps'); } + if (!muiName) { + throwMissingPropError('muiName'); + } + + if (!render) { + throwMissingPropError('render'); + } + const testStyle = { marginTop: '13px', }; @@ -251,14 +283,16 @@ const fullSuite = { export default function describeConformanceV5(minimalElement, getOptions) { const { after: runAfterHook = () => {}, only = Object.keys(fullSuite), skip = [] } = getOptions(); + const filteredTests = Object.keys(fullSuite).filter( + (testKey) => only.indexOf(testKey) !== -1 && skip.indexOf(testKey) === -1, + ); + describe('Material-UI component API', () => { after(runAfterHook); - Object.keys(fullSuite) - .filter((testKey) => only.indexOf(testKey) !== -1 && skip.indexOf(testKey) === -1) - .forEach((testKey) => { - const test = fullSuite[testKey]; - test(minimalElement, getOptions); - }); + filteredTests.forEach((testKey) => { + const test = fullSuite[testKey]; + test(minimalElement, getOptions); + }); }); } From f93480667be50fd03a08adcbcd80f981c4c8b535 Mon Sep 17 00:00:00 2001 From: Vikram <49572404+Vikram710@users.noreply.github.com> Date: Fri, 23 Apr 2021 17:26:45 +0530 Subject: [PATCH 21/39] [IconButton] Support custom colors and sizes (#25890) --- docs/pages/api-docs/icon-button.json | 9 ++++++--- framer/Material-UI.framerfx/code/IconButton.tsx | 14 -------------- framer/scripts/framerConfig.js | 10 +++++++++- .../material-ui/src/IconButton/IconButton.d.ts | 14 +++++++++++--- packages/material-ui/src/IconButton/IconButton.js | 10 ++++++++-- 5 files changed, 34 insertions(+), 23 deletions(-) diff --git a/docs/pages/api-docs/icon-button.json b/docs/pages/api-docs/icon-button.json index 8092039c153db0..d7147cb7b1bdc5 100644 --- a/docs/pages/api-docs/icon-button.json +++ b/docs/pages/api-docs/icon-button.json @@ -4,8 +4,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'default'
      | 'inherit'
      | 'primary'
      | 'secondary'" + "name": "union", + "description": "'inherit'
      | 'primary'
      | 'secondary'
      | string" }, "default": "'default'" }, @@ -20,7 +20,10 @@ "default": "false" }, "size": { - "type": { "name": "enum", "description": "'medium'
      | 'small'" }, + "type": { + "name": "union", + "description": "'medium'
      | 'small'
      | string" + }, "default": "'medium'" }, "sx": { "type": { "name": "object" } } diff --git a/framer/Material-UI.framerfx/code/IconButton.tsx b/framer/Material-UI.framerfx/code/IconButton.tsx index 037725a8120201..41c19adb8179fa 100644 --- a/framer/Material-UI.framerfx/code/IconButton.tsx +++ b/framer/Material-UI.framerfx/code/IconButton.tsx @@ -5,9 +5,7 @@ import MuiBadge from '@material-ui/core/Badge'; import { Icon } from './Icon'; interface Props extends MuiIconButtonProps { - color: 'default' | 'inherit' | 'primary' | 'secondary'; disabled: boolean; - size: 'medium' | 'small'; icon: string; iconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; badgeContent: string; @@ -31,9 +29,7 @@ export function IconButton(props: Props): JSX.Element { } IconButton.defaultProps = { - color: 'default' as 'default', disabled: false, - size: 'medium' as 'medium', icon: 'favorite', iconTheme: 'Filled' as 'Filled', badgeContent: '', @@ -43,20 +39,10 @@ IconButton.defaultProps = { }; addPropertyControls(IconButton, { - color: { - type: ControlType.Enum, - title: 'Color', - options: ['default', 'inherit', 'primary', 'secondary'], - }, disabled: { type: ControlType.Boolean, title: 'Disabled', }, - size: { - type: ControlType.Enum, - title: 'Size', - options: ['medium', 'small'], - }, icon: { type: ControlType.String, title: 'Icon', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 50c4c414ab9314..f0f4d1e51cc269 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -189,7 +189,15 @@ export const componentSettings = { template: 'icon.txt', }, IconButton: { - ignoredProps: ['children', 'edge', 'disableRipple', 'disableFocusRipple', 'sx'], + ignoredProps: [ + 'children', + 'color', + 'size', + 'edge', + 'disableRipple', + 'disableFocusRipple', + 'sx', + ], propValues: { icon: "'favorite'", iconTheme: 'Filled', diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts index 6fc754fc03dacc..9ea136af872032 100644 --- a/packages/material-ui/src/IconButton/IconButton.d.ts +++ b/packages/material-ui/src/IconButton/IconButton.d.ts @@ -1,9 +1,14 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; -import { PropTypes, Theme } from '..'; +import { OverridableStringUnion } from '@material-ui/types'; +import { Theme } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; +export interface IconButtonPropsColorOverrides {} + +export interface IconButtonPropsSizeOverrides {} + export type IconButtonTypeMap< P = {}, D extends React.ElementType = 'button' @@ -40,7 +45,10 @@ export type IconButtonTypeMap< * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color?: PropTypes.Color; + color?: OverridableStringUnion< + 'inherit' | 'primary' | 'secondary', + IconButtonPropsColorOverrides + >; /** * If `true`, the component is disabled. * @default false @@ -64,7 +72,7 @@ export type IconButtonTypeMap< * `small` is equivalent to the dense button styling. * @default 'medium' */ - size?: 'small' | 'medium'; + size?: OverridableStringUnion<'small' | 'medium', IconButtonPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 4b5cf0a4dfb6ae..e01c82b51da6df 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -211,7 +211,10 @@ IconButton.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['inherit', 'primary', 'secondary']), + PropTypes.string, + ]), /** * If `true`, the component is disabled. * @default false @@ -243,7 +246,10 @@ IconButton.propTypes /* remove-proptypes */ = { * `small` is equivalent to the dense button styling. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From 352e0a8f92c29998fd77af2427fd7b315deee670 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 23 Apr 2021 19:02:12 +0700 Subject: [PATCH 22/39] [Table] Migrate TablePagination to emotion (#25809) --- docs/pages/api-docs/table-pagination.json | 5 +- .../table-pagination/table-pagination.json | 7 +- .../src/TablePagination/TablePagination.d.ts | 10 +- .../src/TablePagination/TablePagination.js | 247 +++++++++++++----- .../TablePagination/TablePagination.test.js | 41 +-- .../src/TablePagination/index.d.ts | 3 + .../material-ui/src/TablePagination/index.js | 3 + .../tablePaginationClasses.d.ts | 9 + .../TablePagination/tablePaginationClasses.js | 21 ++ 9 files changed, 247 insertions(+), 99 deletions(-) create mode 100644 packages/material-ui/src/TablePagination/tablePaginationClasses.d.ts create mode 100644 packages/material-ui/src/TablePagination/tablePaginationClasses.js diff --git a/docs/pages/api-docs/table-pagination.json b/docs/pages/api-docs/table-pagination.json index 5351d8ff87bebf..3fcc8860fe1d20 100644 --- a/docs/pages/api-docs/table-pagination.json +++ b/docs/pages/api-docs/table-pagination.json @@ -28,7 +28,8 @@ }, "SelectProps": { "type": { "name": "object" }, "default": "{}" }, "showFirstButton": { "type": { "name": "bool" } }, - "showLastButton": { "type": { "name": "bool" } } + "showLastButton": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "TablePagination", "styles": { @@ -53,6 +54,6 @@ "filename": "/packages/material-ui/src/TablePagination/TablePagination.js", "inheritance": { "component": "TableCell", "pathname": "/api/table-cell/" }, "demos": "

      ", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/table-pagination/table-pagination.json b/docs/translations/api-docs/table-pagination/table-pagination.json index 8e89ce9e1a643a..052666ae29709a 100644 --- a/docs/translations/api-docs/table-pagination/table-pagination.json +++ b/docs/translations/api-docs/table-pagination/table-pagination.json @@ -17,7 +17,8 @@ "rowsPerPageOptions": "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed.", "SelectProps": "Props applied to the rows per page Select element.", "showFirstButton": "If true, show the first-page button.", - "showLastButton": "If true, show the last-page button." + "showLastButton": "If true, show the last-page button.", + "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." }, @@ -35,7 +36,7 @@ }, "selectRoot": { "description": "Styles applied to {{nodeName}}.", - "nodeName": "the Select component root element" + "nodeName": "the Select component `root` element" }, "select": { "description": "Styles applied to {{nodeName}}.", @@ -47,7 +48,7 @@ }, "input": { "description": "Styles applied to {{nodeName}}.", - "nodeName": "the InputBase component" + "nodeName": "the Select component `root` element" }, "menuItem": { "description": "Styles applied to {{nodeName}}.", diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts index 20ff5b3695448a..e4560b24274200 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.d.ts +++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts @@ -1,4 +1,6 @@ import * as React from 'react'; +import { SxProps } from '@material-ui/system'; +import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TablePaginationActionsProps } from './TablePaginationActions'; import { TableCellProps } from '../TableCell'; @@ -37,13 +39,13 @@ export interface TablePaginationTypeMap { spacer?: string; /** Styles applied to the select label Typography element. */ selectLabel?: string; - /** Styles applied to the Select component root element. */ + /** Styles applied to the Select component `root` element. */ selectRoot?: string; /** Styles applied to the Select component `select` class. */ select?: string; /** Styles applied to the Select component `icon` class. */ selectIcon?: string; - /** Styles applied to the InputBase component. */ + /** Styles applied to the Select component `root` element. */ input?: string; /** Styles applied to the MenuItem component. */ menuItem?: string; @@ -135,6 +137,10 @@ export interface TablePaginationTypeMap { * @default false */ showLastButton?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; }; defaultComponent: D; } diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index 89297e961b0192..1cb4c478ddd0cd 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -1,75 +1,138 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { chainPropTypes, integerPropType } from '@material-ui/utils'; import clsx from 'clsx'; -import withStyles from '../styles/withStyles'; +import { chainPropTypes, integerPropType } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses, isHostComponent } from '@material-ui/unstyled'; +import experimentalStyled from '../styles/experimentalStyled'; +import useThemeProps from '../styles/useThemeProps'; import InputBase from '../InputBase'; import MenuItem from '../MenuItem'; import Select from '../Select'; import TableCell from '../TableCell'; import Toolbar from '../Toolbar'; -import Typography from '../Typography'; import TablePaginationActions from './TablePaginationActions'; import useId from '../utils/useId'; +import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses'; + +const TablePaginationRoot = experimentalStyled( + TableCell, + {}, + { + name: 'MuiTablePagination', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, + }, +)(({ theme }) => ({ + overflow: 'auto', + color: theme.palette.text.primary, + fontSize: theme.typography.pxToRem(14), + // Increase the specificity to override TableCell. + '&:last-child': { + padding: 0, + }, +})); -export const styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - color: theme.palette.text.primary, - fontSize: theme.typography.pxToRem(14), - overflow: 'auto', - // Increase the specificity to override TableCell. - '&:last-child': { - padding: 0, - }, +const TablePaginationToolbar = experimentalStyled( + Toolbar, + {}, + { + name: 'MuiTablePagination', + slot: 'Toolbar', + overridesResolver: (props, styles) => ({ + [`& .${tablePaginationClasses.actions}`]: styles.actions, + ...styles.toolbar, + }), }, - /* Styles applied to the Toolbar component. */ - toolbar: { +)(({ theme }) => ({ + minHeight: 52, + paddingRight: 2, + [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: { minHeight: 52, - paddingRight: 2, }, - /* Styles applied to the spacer element. */ - spacer: { - flex: '1 1 100%', + [theme.breakpoints.up('sm')]: { + minHeight: 52, + paddingRight: 2, }, - /* Styles applied to the select label Typography element. */ - selectLabel: { + [`& .${tablePaginationClasses.actions}`]: { flexShrink: 0, + marginLeft: 20, + }, +})); + +const TablePaginationSpacer = experimentalStyled( + 'div', + {}, + { + name: 'MuiTablePagination', + slot: 'Spacer', + overridesResolver: (props, styles) => styles.spacer, }, - // TODO v5: `.selectRoot` should be merged with `.input` - /* Styles applied to the Select component root element. */ - selectRoot: { - marginRight: 32, - marginLeft: 8, +)({ + flex: '1 1 100%', +}); + +const TablePaginationSelectLabel = experimentalStyled( + 'p', + {}, + { + name: 'MuiTablePagination', + slot: 'SelectLabel', + overridesResolver: (props, styles) => styles.selectLabel, + }, +)(({ theme }) => ({ + ...theme.typography.body2, + flexShrink: 0, +})); + +const TablePaginationSelect = experimentalStyled( + Select, + {}, + { + name: 'MuiTablePagination', + slot: 'Select', + overridesResolver: (props, styles) => ({ + [`& .${tablePaginationClasses.selectIcon}`]: styles.selectIcon, + [`& .${tablePaginationClasses.select}`]: styles.select, + ...styles.input, + ...styles.selectRoot, + }), }, - /* Styles applied to the Select component `select` class. */ - select: { +)({ + color: 'inherit', + fontSize: 'inherit', + flexShrink: 0, + marginRight: 32, + marginLeft: 8, + [`& .${tablePaginationClasses.input}`]: { paddingLeft: 8, paddingRight: 24, textAlign: 'right', textAlignLast: 'right', // Align - } + input={} value={rowsPerPage} onChange={onRowsPerPageChange} id={selectId} labelId={labelId} {...SelectProps} + classes={{ + ...SelectProps.classes, + // TODO v5 remove `classes.input` + root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root), + select: clsx(classes.select, (SelectProps.classes || {}).select), + // TODO v5 remove `selectIcon` + icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon), + }} > {rowsPerPageOptions.map((rowsPerPageOption) => ( ))} - + )} - + {labelDisplayedRows({ from: count === 0 ? 0 : page * rowsPerPage + 1, to: getLabelDisplayedRowsTo(), count: count === -1 ? -1 : count, page, })} - + - - + + ); }); @@ -321,6 +420,10 @@ TablePagination.propTypes /* remove-proptypes */ = { * @default false */ showLastButton: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiTablePagination' })(TablePagination); +export default TablePagination; diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js index 910c5bddb990df..66358d789ec7c3 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/packages/material-ui/src/TablePagination/TablePagination.test.js @@ -2,35 +2,34 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import PropTypes from 'prop-types'; -import { - getClasses, - createMount, - describeConformance, - fireEvent, - createClientRender, -} from 'test/utils'; +import { createMount, describeConformanceV5, fireEvent, createClientRender } from 'test/utils'; import TableFooter from '@material-ui/core/TableFooter'; import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; -import TablePagination from '@material-ui/core/TablePagination'; +import TablePagination, { + tablePaginationClasses as classes, +} from '@material-ui/core/TablePagination'; describe('', () => { const noop = () => {}; - let classes; const mount = createMount(); const render = createClientRender(); - before(() => { - classes = getClasses( - , - ); - }); - - describeConformance( + describeConformanceV5( , () => ({ classes, inheritComponent: TableCell, + render: (node) => { + const { container, ...other } = render( + + + {node} + +
      , + ); + return { container: container.firstChild.firstChild.firstChild, ...other }; + }, mount: (node) => { const wrapper = mount( @@ -41,10 +40,12 @@ describe('', () => { ); return wrapper.find('tr').childAt(0); }, - + muiName: 'MuiTablePagination', refInstanceof: window.HTMLTableCellElement, - // can only use `td` in a tr so we just fake a different component - testComponentPropWith: (props) =>
      , + testComponentPropWith: 'td', + testComponentsRootPropWith: 'td', + testDeepOverrides: { slotName: 'toolbar', slotClassName: classes.toolbar }, + skip: ['themeVariants', 'componentsProps'], }), ); @@ -360,7 +361,7 @@ describe('', () => { it('should raise a warning if the page prop is out of range', () => { expect(() => { PropTypes.checkPropTypes( - TablePagination.Naked.propTypes, + TablePagination.propTypes, { classes: {}, page: 2, diff --git a/packages/material-ui/src/TablePagination/index.d.ts b/packages/material-ui/src/TablePagination/index.d.ts index 317abad03391f0..2df08ab13db13f 100644 --- a/packages/material-ui/src/TablePagination/index.d.ts +++ b/packages/material-ui/src/TablePagination/index.d.ts @@ -1,2 +1,5 @@ export { default } from './TablePagination'; export * from './TablePagination'; + +export { default as tablePaginationClasses } from './tablePaginationClasses'; +export * from './tablePaginationClasses'; diff --git a/packages/material-ui/src/TablePagination/index.js b/packages/material-ui/src/TablePagination/index.js index 9bb978387b1b36..a331f1abcf6e48 100644 --- a/packages/material-ui/src/TablePagination/index.js +++ b/packages/material-ui/src/TablePagination/index.js @@ -1 +1,4 @@ export { default } from './TablePagination'; + +export { default as tablePaginationClasses } from './tablePaginationClasses'; +export * from './tablePaginationClasses'; diff --git a/packages/material-ui/src/TablePagination/tablePaginationClasses.d.ts b/packages/material-ui/src/TablePagination/tablePaginationClasses.d.ts new file mode 100644 index 00000000000000..bf9438c53585ed --- /dev/null +++ b/packages/material-ui/src/TablePagination/tablePaginationClasses.d.ts @@ -0,0 +1,9 @@ +import { TablePaginationClassKey } from './TablePagination'; + +export type TablePaginationClasses = Record; + +declare const tablePaginationClasses: TablePaginationClasses; + +export function getTablePaginationUtilityClass(slot: string): string; + +export default tablePaginationClasses; diff --git a/packages/material-ui/src/TablePagination/tablePaginationClasses.js b/packages/material-ui/src/TablePagination/tablePaginationClasses.js new file mode 100644 index 00000000000000..a5df1bd63abcf7 --- /dev/null +++ b/packages/material-ui/src/TablePagination/tablePaginationClasses.js @@ -0,0 +1,21 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTablePaginationUtilityClass(slot) { + return generateUtilityClass('MuiTablePagination', slot); +} + +const tablePaginationClasses = generateUtilityClasses('MuiTablePagination', [ + 'root', + 'toolbar', + 'spacer', + 'selectLabel', + 'selectRoot', + 'select', + 'selectIcon', + 'input', + 'menuItem', + 'displayedRows', + 'actions', +]); + +export default tablePaginationClasses; From f544ebc78bd6b1443a80f34a364a528d7b2cb634 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 23 Apr 2021 09:05:11 -0300 Subject: [PATCH 23/39] [theme] Remove fade color helper (#25895) --- docs/src/modules/branding/ComparisonTable.tsx | 4 +-- .../src/styles/colorManipulator.d.ts | 5 ---- .../src/styles/colorManipulator.js | 30 ------------------- 3 files changed, 2 insertions(+), 37 deletions(-) diff --git a/docs/src/modules/branding/ComparisonTable.tsx b/docs/src/modules/branding/ComparisonTable.tsx index 05ef80ef7b6a46..18aa69f9ffaf3b 100644 --- a/docs/src/modules/branding/ComparisonTable.tsx +++ b/docs/src/modules/branding/ComparisonTable.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { experimentalStyled as styled, fade } from '@material-ui/core/styles'; +import { experimentalStyled as styled, alpha } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import Box from '@material-ui/core/Box'; import TableBody from '@material-ui/core/TableBody'; @@ -72,7 +72,7 @@ function PlanStatus(props: PlanStatusProps) { {checkIcon ? ( fade(theme.palette.primary.main, 0.2), + bgcolor: (theme) => alpha(theme.palette.primary.main, 0.2), color: 'primary.main', borderRadius: '50%', p: 0.5, diff --git a/packages/material-ui/src/styles/colorManipulator.d.ts b/packages/material-ui/src/styles/colorManipulator.d.ts index c877a2ff9457c9..5f1dc06d9ef4b9 100644 --- a/packages/material-ui/src/styles/colorManipulator.d.ts +++ b/packages/material-ui/src/styles/colorManipulator.d.ts @@ -13,11 +13,6 @@ export function recomposeColor(color: ColorObject): string; export function getContrastRatio(foreground: string, background: string): number; export function getLuminance(color: string): number; export function emphasize(color: string, coefficient?: number): string; -/** - * @deprecated - * Use `import { alpha } from '@material-ui/core/styles'` instead. - */ -export function fade(color: string, value: number): string; export function alpha(color: string, value: number): string; export function darken(color: string, coefficient: number): string; export function lighten(color: string, coefficient: number): string; diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index d9a75e4154bd89..5b750c4151ba20 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -237,36 +237,6 @@ export function alpha(color, value) { return recomposeColor(color); } -let warnedOnce = false; - -/** - * Set the absolute transparency of a color. - * Any existing alpha values are overwritten. - * - * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() - * @param {number} value - value to set the alpha channel to in the range 0 -1 - * @returns {string} A CSS color string. Hex input values are returned as rgb - * - * @deprecated - * Use `import { alpha } from '@material-ui/core/styles'` instead. - */ -export function fade(color, value) { - if (process.env.NODE_ENV !== 'production') { - if (!warnedOnce) { - warnedOnce = true; - console.error( - [ - 'Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.', - '', - "You should use `import { alpha } from '@material-ui/core/styles'`", - ].join('\n'), - ); - } - } - - return alpha(color, value); -} - /** * Darkens a color. * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() From f389f2c39eb6102474400dc1391e5975a9806cc7 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 23 Apr 2021 09:07:03 -0300 Subject: [PATCH 24/39] [TextField] Make the `position` prop required in InputAdornment (#25891) --- docs/pages/api-docs/input-adornment.json | 5 ++++- docs/src/pages/guides/migration-v4/migration-v4.md | 9 +++++++++ .../material-ui/src/InputAdornment/InputAdornment.d.ts | 2 +- .../material-ui/src/InputAdornment/InputAdornment.js | 2 +- 4 files changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/input-adornment.json b/docs/pages/api-docs/input-adornment.json index 1d8bdcd184e7be..18c5dd1610fcb4 100644 --- a/docs/pages/api-docs/input-adornment.json +++ b/docs/pages/api-docs/input-adornment.json @@ -1,11 +1,14 @@ { "props": { + "position": { + "type": { "name": "enum", "description": "'end'
      | 'start'" }, + "required": true + }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "component": { "type": { "name": "elementType" } }, "disablePointerEvents": { "type": { "name": "bool" } }, "disableTypography": { "type": { "name": "bool" } }, - "position": { "type": { "name": "enum", "description": "'end'
      | 'start'" } }, "sx": { "type": { "name": "object" } }, "variant": { "type": { diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 9dba9813dffef0..852debe0ed4151 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -1236,6 +1236,15 @@ As the core components use emotion as a styled engine, the props used by emotion + ``` +- Set the InputAdornment `position` prop to `start` or `end`. Use `start` if used as the value of the `startAdornment` prop. Use `end` if used as the value of the `endAdornment` prop. + + ```diff + -Kg} /> + -Kg} /> + +Kg} /> + +Kg} /> + ``` + ### TextareaAutosize - Remove the `rows` prop, use the `minRows` prop instead. diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.d.ts b/packages/material-ui/src/InputAdornment/InputAdornment.d.ts index 9feb695c427006..73ae86db7e452c 100644 --- a/packages/material-ui/src/InputAdornment/InputAdornment.d.ts +++ b/packages/material-ui/src/InputAdornment/InputAdornment.d.ts @@ -42,7 +42,7 @@ export interface InputAdornmentTypeMap

      Date: Fri, 23 Apr 2021 09:08:56 -0300 Subject: [PATCH 25/39] [ButtonBase] Remove buttonRef prop (#25896) --- docs/src/pages/guides/migration-v4/migration-v4.md | 2 ++ packages/material-ui/src/ButtonBase/ButtonBase.d.ts | 7 ------- packages/material-ui/src/ButtonBase/ButtonBase.js | 11 +---------- 3 files changed, 3 insertions(+), 17 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 852debe0ed4151..56eb611500e947 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -478,6 +478,8 @@ As the core components use emotion as a styled engine, the props used by emotion +