[material-ui][Drawer] Deprecate *Props and complete slots, `slotPro…

…ps` (#45377)
mui · Feb 21, 2025 · 03e3b8f · 03e3b8f
1 parent 0813fd1
commit 03e3b8f
Show file tree

Hide file tree

Showing 25 changed files with 977 additions and 160 deletions.
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
@@ -111,13 +111,15 @@ function ResponsiveDrawer(props) {
           open={mobileOpen}
           onTransitionEnd={handleDrawerTransitionEnd}
           onClose={handleDrawerClose}
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
           sx={{
             display: { xs: 'block', sm: 'none' },
             '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
           }}
+          slotProps={{
+            root: {
+              keepMounted: true, // Better open performance on mobile.
+            },
+          }}
         >
           {drawer}
         </Drawer>

diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
@@ -118,13 +118,15 @@ export default function ResponsiveDrawer(props: Props) {
           open={mobileOpen}
           onTransitionEnd={handleDrawerTransitionEnd}
           onClose={handleDrawerClose}
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
           sx={{
             display: { xs: 'block', sm: 'none' },
             '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
           }}
+          slotProps={{
+            root: {
+              keepMounted: true, // Better open performance on mobile.
+            },
+          }}
         >
           {drawer}
         </Drawer>

diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js
@@ -73,9 +73,7 @@ function SwipeableEdgeDrawer(props) {
         onOpen={toggleDrawer(true)}
         swipeAreaWidth={drawerBleeding}
         disableSwipeToOpen={false}
-        ModalProps={{
-          keepMounted: true,
-        }}
+        keepMounted
       >
         <StyledBox
           sx={{

diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx b/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx
@@ -80,9 +80,7 @@ export default function SwipeableEdgeDrawer(props: Props) {
         onOpen={toggleDrawer(true)}
         swipeAreaWidth={drawerBleeding}
         disableSwipeToOpen={false}
-        ModalProps={{
-          keepMounted: true,
-        }}
+        keepMounted
       >
         <StyledBox
           sx={{

diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1136,6 +1136,45 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
 
 ## Drawer
 
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/drawer-props <path>
+```
+
+### BackdropProps
+
+The Drawer's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:
+
+```diff
+ <Drawer
+-  BackdropProps={backdropProps}
++  slotProps={{ backdrop: backdropProps }}
+ />
+```
+
+### PaperProps
+
+The Drawer's `PaperProps` prop was deprecated in favor of `slotProps.paper`:
+
+```diff
+ <Drawer
+-  PaperProps={paperProps}
++  slotProps={{ paper: paperProps }}
+ />
+```
+
+### SlideProps
+
+The Drawer's `SlideProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <Drawer
+-  SlideProps={slideProps}
++  slotProps={{ transition: slideProps }}
+ />
+```
+
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-classes) below to migrate the code as described in the following sections:
 
 ```bash
@@ -1950,6 +1989,47 @@ The Slider's `componentsProps` prop was deprecated in favor of `slotProps`:
  />
 ```
 
+## SwipeableDrawer
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/drawer-props <path>
+```
+
+### BackdropProps
+
+The SwipeableDrawer's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:
+
+```diff
+ <SwipeableDrawer
+-  BackdropProps={backdropProps}
++  slotProps={{ backdrop: backdropProps }}
+ />
+```
+
+### PaperProps
+
+The SwipeableDrawer's `PaperProps` prop was deprecated in favor of `slotProps.paper`:
+
+```diff
+ <SwipeableDrawer
+-  PaperProps={paperProps}
++  slotProps={{ paper: paperProps }}
+ />
+```
+
+### SlideProps
+
+The SwipeableDrawer's `SlideProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <SwipeableDrawer
+-  SlideProps={slideProps}
++  slotProps={{ transition: slideProps }}
+ />
+```
+
 ## ToggleButtonGroup
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#toggle-button-group-classes) below to migrate the code as described in the following sections:

diff --git a/docs/pages/material-ui/api/drawer.json b/docs/pages/material-ui/api/drawer.json
@@ -20,8 +20,31 @@
       }
     },
     "open": { "type": { "name": "bool" }, "default": "false" },
-    "PaperProps": { "type": { "name": "object" }, "default": "{}" },
-    "SlideProps": { "type": { "name": "object" } },
+    "PaperProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.paper</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "SlideProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.transition</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -49,6 +72,38 @@
     "import Drawer from '@mui/material/Drawer';",
     "import { Drawer } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component used for the root when the variant is `temporary`.",
+      "default": "Modal",
+      "class": "MuiDrawer-root"
+    },
+    {
+      "name": "backdrop",
+      "description": "The component used for the Modal backdrop.",
+      "default": "Backdrop",
+      "class": null
+    },
+    {
+      "name": "docked",
+      "description": "The component used for the root element when the variant is `permanent` or `persistent`.",
+      "default": "div",
+      "class": "MuiDrawer-docked"
+    },
+    {
+      "name": "paper",
+      "description": "The component used for the paper.",
+      "default": "Paper",
+      "class": "MuiDrawer-paper"
+    },
+    {
+      "name": "transition",
+      "description": "The component used for the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Slide",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "anchorBottom",
@@ -74,24 +129,12 @@
       "description": "Styles applied to the root element if `anchor=\"top\"`.",
       "isGlobal": false
     },
-    {
-      "key": "docked",
-      "className": "MuiDrawer-docked",
-      "description": "Styles applied to the root element if `variant=\"permanent or persistent\"`.",
-      "isGlobal": false
-    },
     {
       "key": "modal",
       "className": "MuiDrawer-modal",
       "description": "Styles applied to the Modal component.",
       "isGlobal": false
     },
-    {
-      "key": "paper",
-      "className": "MuiDrawer-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
-    },
     {
       "key": "paperAnchorBottom",
       "className": "MuiDrawer-paperAnchorBottom",
@@ -147,12 +190,6 @@
       "description": "Styles applied to the Paper component if `anchor=\"top\"`.",
       "isGlobal": false,
       "isDeprecated": true
-    },
-    {
-      "key": "root",
-      "className": "MuiDrawer-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json
@@ -30,7 +30,25 @@
     "hysteresis": { "type": { "name": "number" }, "default": "0.52" },
     "minFlingVelocity": { "type": { "name": "number" }, "default": "450" },
     "open": { "type": { "name": "bool" }, "default": "false" },
-    "SwipeAreaProps": { "type": { "name": "object" } },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, docked?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, swipeArea?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, swipeArea?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
+    "SwipeAreaProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.swipeArea</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" },
     "transitionDuration": {
       "type": {
@@ -45,6 +63,14 @@
     "import SwipeableDrawer from '@mui/material/SwipeableDrawer';",
     "import { SwipeableDrawer } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "swipeArea",
+      "description": "The component used for the swipeArea slot.",
+      "default": "div",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "anchorBottom",

diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json
@@ -23,6 +23,8 @@
     "SlideProps": {
       "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/slide/\"><code>Slide</code></a> element."
     },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -52,19 +54,10 @@
       "nodeName": "the root element",
       "conditions": "<code>anchor=\"top\"</code>"
     },
-    "docked": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"permanent or persistent\"</code>"
-    },
     "modal": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Modal component"
     },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
     "paperAnchorBottom": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
@@ -112,7 +105,13 @@
       "nodeName": "the Paper component",
       "conditions": "<code>anchor=\"top\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "backdrop": "The component used for the Modal backdrop.",
+    "docked": "The component used for the root element when the variant is <code>permanent</code> or <code>persistent</code>.",
+    "paper": "The component used for the paper.",
+    "root": "The component used for the root when the variant is <code>temporary</code>.",
+    "transition": "The component used for the transition. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }
diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
@@ -29,6 +29,8 @@
       "typeDescriptions": { "event": "The event source of the callback." }
     },
     "open": { "description": "If <code>true</code>, the component is shown." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "SwipeAreaProps": {
       "description": "The element is used to intercept the touch events on the edge."
     },
@@ -122,5 +124,6 @@
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "root": { "description": "Styles applied to the root element." }
-  }
+  },
+  "slotDescriptions": { "swipeArea": "The component used for the swipeArea slot." }
 }
diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx
@@ -644,7 +644,7 @@ function testSlotPropsCallbackWithPropsAsOwnerState(
       const { queryByTestId } = await render(
         React.cloneElement(element, { slotProps, className: 'custom' }),
       );
-      const slotComponent = queryByTestId('custom');
+      const slotComponent = queryByTestId('custom', { exact: false });
       expect(slotComponent).not.to.equal(null);
     });
   });

diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
@@ -39,6 +39,7 @@ import transformMobileStepperProps from '../mobile-stepper-props';
 import transformSnackbarProps from '../snackbar-props';
 import transformerTabsProps from '../tabs-props';
 import transformerTabsClasses from '../tabs-classes';
+import transformDrawerProps from '../drawer-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -86,6 +87,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformSnackbarProps(file, api, options);
   file.source = transformerTabsProps(file, api, options);
   file.source = transformerTabsClasses(file, api, options);
+  file.source = transformDrawerProps(file, api, options);
 
   return file.source;
 }