[Drawer] Fix classes forwarded to DOM node for docked drawer (#25870)

mui · Apr 22, 2021 · 2ea9dfd · 2ea9dfd
1 parent 0181186
commit 2ea9dfd
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,