deprecate drawer classes

mui · Dec 27, 2024 · 846dfdc · 846dfdc
1 parent a5c7b8b
commit 846dfdc
Show file tree

Hide file tree

Showing 19 changed files with 708 additions and 41 deletions.
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
@@ -1104,6 +1104,85 @@ 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-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/drawer-classes <path>
+```
+
+### Composed CSS classes
+
+The CSS classes that composed the following props were deprecated:
+
+- `paper` and `anchor`
+- `paper`, `anchor` and `docked`
+
+Here's how to migrate:
+
+```diff
+-.MuiDrawer-paperAnchorBottom
++.MuiDrawer-anchorBottom > .MuiDrawer-paper
+-.MuiDrawer-paperAnchorLeft
++.MuiDrawer-anchorLeft > .MuiDrawer-paper
+-.MuiDrawer-paperAnchorRight
++.MuiDrawer-anchorRight > .MuiDrawer-paper
+-.MuiDrawer-paperAnchorTop
++.MuiDrawer-anchorTop > .MuiDrawer-paper
+-.MuiDrawer-paperAnchorDockedBottom
++.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper
+-.MuiDrawer-paperAnchorDockedLeft
++.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper
+-.MuiDrawer-paperAnchorDockedRight
++.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper
+-.MuiDrawer-paperAnchorDockedTop
++.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper
+```
+
+```diff
+ import { drawerClasses } from '@mui/material/Drawer';
+
+ MuiDrawer: {
+   styleOverrides: {
+     root: {
+-      [`&.${drawerClasses.paperAnchorBottom}`]: {
++      [`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`&.${drawerClasses.paperAnchorLeft}`]: {
++      [`&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`&.${drawerClasses.paperAnchorRight}`]: {
++      [`&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`&.${drawerClasses.paperAnchorTop}`]: {
++      [`&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`&.${drawerClasses.paperAnchorDockedBottom}`]: {
++      [`&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`&.${drawerClasses.paperAnchorDockedLeft}`]: {
++      [`&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`&.${drawerClasses.paperAnchorDockedRight}`]: {
++      [`&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`&.${drawerClasses.paperAnchorDockedTop}`]: {
++      [`&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: {
+         color: 'red',
+       },
+     },
+   },
+ },
+```
+
 ## FilledInput
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#filled-input-props) 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
@@ -50,6 +50,30 @@
     "import { Drawer } from '@mui/material';"
   ],
   "classes": [
+    {
+      "key": "anchorBottom",
+      "className": "MuiDrawer-anchorBottom",
+      "description": "Styles applied to the root element if `anchor=\"bottom\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorLeft",
+      "className": "MuiDrawer-anchorLeft",
+      "description": "Styles applied to the root element if `anchor=\"left\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorRight",
+      "className": "MuiDrawer-anchorRight",
+      "description": "Styles applied to the root element if `anchor=\"right\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorTop",
+      "className": "MuiDrawer-anchorTop",
+      "description": "Styles applied to the root element if `anchor=\"top\"`.",
+      "isGlobal": false
+    },
     {
       "key": "docked",
       "className": "MuiDrawer-docked",
@@ -72,49 +96,57 @@
       "key": "paperAnchorBottom",
       "className": "MuiDrawer-paperAnchorBottom",
       "description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedBottom",
       "className": "MuiDrawer-paperAnchorDockedBottom",
       "description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedLeft",
       "className": "MuiDrawer-paperAnchorDockedLeft",
       "description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedRight",
       "className": "MuiDrawer-paperAnchorDockedRight",
       "description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedTop",
       "className": "MuiDrawer-paperAnchorDockedTop",
       "description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorLeft",
       "className": "MuiDrawer-paperAnchorLeft",
       "description": "Styles applied to the Paper component if `anchor=\"left\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorRight",
       "className": "MuiDrawer-paperAnchorRight",
       "description": "Styles applied to the Paper component if `anchor=\"right\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorTop",
       "className": "MuiDrawer-paperAnchorTop",
       "description": "Styles applied to the Paper component if `anchor=\"top\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "root",

diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json
@@ -46,6 +46,30 @@
     "import { SwipeableDrawer } from '@mui/material';"
   ],
   "classes": [
+    {
+      "key": "anchorBottom",
+      "className": "MuiSwipeableDrawer-anchorBottom",
+      "description": "Styles applied to the root element if `anchor=\"bottom\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorLeft",
+      "className": "MuiSwipeableDrawer-anchorLeft",
+      "description": "Styles applied to the root element if `anchor=\"left\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorRight",
+      "className": "MuiSwipeableDrawer-anchorRight",
+      "description": "Styles applied to the root element if `anchor=\"right\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "anchorTop",
+      "className": "MuiSwipeableDrawer-anchorTop",
+      "description": "Styles applied to the root element if `anchor=\"top\"`.",
+      "isGlobal": false
+    },
     {
       "key": "docked",
       "className": "MuiSwipeableDrawer-docked",
@@ -68,49 +92,57 @@
       "key": "paperAnchorBottom",
       "className": "MuiSwipeableDrawer-paperAnchorBottom",
       "description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedBottom",
       "className": "MuiSwipeableDrawer-paperAnchorDockedBottom",
       "description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedLeft",
       "className": "MuiSwipeableDrawer-paperAnchorDockedLeft",
       "description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedRight",
       "className": "MuiSwipeableDrawer-paperAnchorDockedRight",
       "description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorDockedTop",
       "className": "MuiSwipeableDrawer-paperAnchorDockedTop",
       "description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorLeft",
       "className": "MuiSwipeableDrawer-paperAnchorLeft",
       "description": "Styles applied to the Paper component if `anchor=\"left\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorRight",
       "className": "MuiSwipeableDrawer-paperAnchorRight",
       "description": "Styles applied to the Paper component if `anchor=\"right\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "paperAnchorTop",
       "className": "MuiSwipeableDrawer-paperAnchorTop",
       "description": "Styles applied to the Paper component if `anchor=\"top\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "root",

diff --git a/docs/translations/api-docs/drawer/drawer.json b/docs/translations/api-docs/drawer/drawer.json
@@ -32,6 +32,26 @@
     "variant": { "description": "The variant to use." }
   },
   "classDescriptions": {
+    "anchorBottom": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchor=\"bottom\"</code>"
+    },
+    "anchorLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchor=\"left\"</code>"
+    },
+    "anchorRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchor=\"right\"</code>"
+    },
+    "anchorTop": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchor=\"top\"</code>"
+    },
     "docked": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -48,42 +68,50 @@
     "paperAnchorBottom": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"bottom\"</code>"
+      "conditions": "<code>anchor=\"bottom\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</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>"
     },
     "paperAnchorDockedBottom": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;"
+      "conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a>, <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked\">.MuiDrawer-docked</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>"
     },
     "paperAnchorDockedLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;"
+      "conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a>, <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked\">.MuiDrawer-docked</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>"
     },
     "paperAnchorDockedRight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;"
+      "conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a>, <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked\">.MuiDrawer-docked</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>"
     },
     "paperAnchorDockedTop": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;"
+      "conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a>, <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked\">.MuiDrawer-docked</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>"
     },
     "paperAnchorLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"left\"</code>"
+      "conditions": "<code>anchor=\"left\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</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>"
     },
     "paperAnchorRight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"right\"</code>"
+      "conditions": "<code>anchor=\"right\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</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>"
     },
     "paperAnchorTop": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
-      "conditions": "<code>anchor=\"top\"</code>"
+      "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." }
   }