Skip to content

Commit 820a76c

Browse files
yash49yash49
authored
[material-ui][Drawer] Deprecate composed classes (#44870)
1 parent b97a3de commit 820a76c

File tree

28 files changed

+757
-61
lines changed

28 files changed

+757
-61
lines changed

‎docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

+79
Original file line numberDiff line numberDiff line change
@@ -1134,6 +1134,85 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
11341134
/>
11351135
```
11361136

1137+
## Drawer
1138+
1139+
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:
1140+
1141+
```bash
1142+
npx @mui/codemod@latest deprecations/drawer-classes <path>
1143+
```
1144+
1145+
### Composed CSS classes
1146+
1147+
The CSS classes that composed the following props were deprecated:
1148+
1149+
- `paper` and `anchor`
1150+
- `paper`, `anchor` and `docked`
1151+
1152+
Here's how to migrate:
1153+
1154+
```diff
1155+
-.MuiDrawer-paperAnchorBottom
1156+
+.MuiDrawer-anchorBottom > .MuiDrawer-paper
1157+
-.MuiDrawer-paperAnchorLeft
1158+
+.MuiDrawer-anchorLeft > .MuiDrawer-paper
1159+
-.MuiDrawer-paperAnchorRight
1160+
+.MuiDrawer-anchorRight > .MuiDrawer-paper
1161+
-.MuiDrawer-paperAnchorTop
1162+
+.MuiDrawer-anchorTop > .MuiDrawer-paper
1163+
-.MuiDrawer-paperAnchorDockedBottom
1164+
+.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper
1165+
-.MuiDrawer-paperAnchorDockedLeft
1166+
+.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper
1167+
-.MuiDrawer-paperAnchorDockedRight
1168+
+.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper
1169+
-.MuiDrawer-paperAnchorDockedTop
1170+
+.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper
1171+
```
1172+
1173+
```diff
1174+
import { drawerClasses } from '@mui/material/Drawer';
1175+
1176+
MuiDrawer: {
1177+
styleOverrides: {
1178+
root: {
1179+
- [`.${drawerClasses.paperAnchorBottom}`]: {
1180+
+ [`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: {
1181+
color: 'red',
1182+
},
1183+
- [`.${drawerClasses.paperAnchorLeft}`]: {
1184+
+ [`&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: {
1185+
color: 'red',
1186+
},
1187+
- [`.${drawerClasses.paperAnchorRight}`]: {
1188+
+ [`&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: {
1189+
color: 'red',
1190+
},
1191+
- [`.${drawerClasses.paperAnchorTop}`]: {
1192+
+ [`&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: {
1193+
color: 'red',
1194+
},
1195+
- [`.${drawerClasses.paperAnchorDockedBottom}`]: {
1196+
+ [`&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: {
1197+
color: 'red',
1198+
},
1199+
- [`.${drawerClasses.paperAnchorDockedLeft}`]: {
1200+
+ [`&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: {
1201+
color: 'red',
1202+
},
1203+
- [`.${drawerClasses.paperAnchorDockedRight}`]: {
1204+
+ [`&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: {
1205+
color: 'red',
1206+
},
1207+
- [`.${drawerClasses.paperAnchorDockedTop}`]: {
1208+
+ [`&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: {
1209+
color: 'red',
1210+
},
1211+
},
1212+
},
1213+
},
1214+
```
1215+
11371216
## FilledInput
11381217

11391218
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:

‎docs/pages/material-ui/api/drawer.json

+40-8
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,30 @@
5050
"import { Drawer } from '@mui/material';"
5151
],
5252
"classes": [
53+
{
54+
"key": "anchorBottom",
55+
"className": "MuiDrawer-anchorBottom",
56+
"description": "Styles applied to the root element if `anchor=\"bottom\"`.",
57+
"isGlobal": false
58+
},
59+
{
60+
"key": "anchorLeft",
61+
"className": "MuiDrawer-anchorLeft",
62+
"description": "Styles applied to the root element if `anchor=\"left\"`.",
63+
"isGlobal": false
64+
},
65+
{
66+
"key": "anchorRight",
67+
"className": "MuiDrawer-anchorRight",
68+
"description": "Styles applied to the root element if `anchor=\"right\"`.",
69+
"isGlobal": false
70+
},
71+
{
72+
"key": "anchorTop",
73+
"className": "MuiDrawer-anchorTop",
74+
"description": "Styles applied to the root element if `anchor=\"top\"`.",
75+
"isGlobal": false
76+
},
5377
{
5478
"key": "docked",
5579
"className": "MuiDrawer-docked",
@@ -72,49 +96,57 @@
7296
"key": "paperAnchorBottom",
7397
"className": "MuiDrawer-paperAnchorBottom",
7498
"description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
75-
"isGlobal": false
99+
"isGlobal": false,
100+
"isDeprecated": true
76101
},
77102
{
78103
"key": "paperAnchorDockedBottom",
79104
"className": "MuiDrawer-paperAnchorDockedBottom",
80105
"description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
81-
"isGlobal": false
106+
"isGlobal": false,
107+
"isDeprecated": true
82108
},
83109
{
84110
"key": "paperAnchorDockedLeft",
85111
"className": "MuiDrawer-paperAnchorDockedLeft",
86112
"description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
87-
"isGlobal": false
113+
"isGlobal": false,
114+
"isDeprecated": true
88115
},
89116
{
90117
"key": "paperAnchorDockedRight",
91118
"className": "MuiDrawer-paperAnchorDockedRight",
92119
"description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
93-
"isGlobal": false
120+
"isGlobal": false,
121+
"isDeprecated": true
94122
},
95123
{
96124
"key": "paperAnchorDockedTop",
97125
"className": "MuiDrawer-paperAnchorDockedTop",
98126
"description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
99-
"isGlobal": false
127+
"isGlobal": false,
128+
"isDeprecated": true
100129
},
101130
{
102131
"key": "paperAnchorLeft",
103132
"className": "MuiDrawer-paperAnchorLeft",
104133
"description": "Styles applied to the Paper component if `anchor=\"left\"`.",
105-
"isGlobal": false
134+
"isGlobal": false,
135+
"isDeprecated": true
106136
},
107137
{
108138
"key": "paperAnchorRight",
109139
"className": "MuiDrawer-paperAnchorRight",
110140
"description": "Styles applied to the Paper component if `anchor=\"right\"`.",
111-
"isGlobal": false
141+
"isGlobal": false,
142+
"isDeprecated": true
112143
},
113144
{
114145
"key": "paperAnchorTop",
115146
"className": "MuiDrawer-paperAnchorTop",
116147
"description": "Styles applied to the Paper component if `anchor=\"top\"`.",
117-
"isGlobal": false
148+
"isGlobal": false,
149+
"isDeprecated": true
118150
},
119151
{
120152
"key": "root",

‎docs/pages/material-ui/api/swipeable-drawer.json

+52-20
Original file line numberDiff line numberDiff line change
@@ -46,75 +46,107 @@
4646
"import { SwipeableDrawer } from '@mui/material';"
4747
],
4848
"classes": [
49+
{
50+
"key": "anchorBottom",
51+
"className": "MuiDrawer-anchorBottom",
52+
"description": "Styles applied to the root element if `anchor=\"bottom\"`.",
53+
"isGlobal": false
54+
},
55+
{
56+
"key": "anchorLeft",
57+
"className": "MuiDrawer-anchorLeft",
58+
"description": "Styles applied to the root element if `anchor=\"left\"`.",
59+
"isGlobal": false
60+
},
61+
{
62+
"key": "anchorRight",
63+
"className": "MuiDrawer-anchorRight",
64+
"description": "Styles applied to the root element if `anchor=\"right\"`.",
65+
"isGlobal": false
66+
},
67+
{
68+
"key": "anchorTop",
69+
"className": "MuiDrawer-anchorTop",
70+
"description": "Styles applied to the root element if `anchor=\"top\"`.",
71+
"isGlobal": false
72+
},
4973
{
5074
"key": "docked",
51-
"className": "MuiSwipeableDrawer-docked",
75+
"className": "MuiDrawer-docked",
5276
"description": "Styles applied to the root element if `variant=\"permanent or persistent\"`.",
5377
"isGlobal": false
5478
},
5579
{
5680
"key": "modal",
57-
"className": "MuiSwipeableDrawer-modal",
81+
"className": "MuiDrawer-modal",
5882
"description": "Styles applied to the Modal component.",
5983
"isGlobal": false
6084
},
6185
{
6286
"key": "paper",
63-
"className": "MuiSwipeableDrawer-paper",
87+
"className": "MuiDrawer-paper",
6488
"description": "Styles applied to the Paper component.",
6589
"isGlobal": false
6690
},
6791
{
6892
"key": "paperAnchorBottom",
69-
"className": "MuiSwipeableDrawer-paperAnchorBottom",
93+
"className": "MuiDrawer-paperAnchorBottom",
7094
"description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
71-
"isGlobal": false
95+
"isGlobal": false,
96+
"isDeprecated": true
7297
},
7398
{
7499
"key": "paperAnchorDockedBottom",
75-
"className": "MuiSwipeableDrawer-paperAnchorDockedBottom",
100+
"className": "MuiDrawer-paperAnchorDockedBottom",
76101
"description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
77-
"isGlobal": false
102+
"isGlobal": false,
103+
"isDeprecated": true
78104
},
79105
{
80106
"key": "paperAnchorDockedLeft",
81-
"className": "MuiSwipeableDrawer-paperAnchorDockedLeft",
107+
"className": "MuiDrawer-paperAnchorDockedLeft",
82108
"description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
83-
"isGlobal": false
109+
"isGlobal": false,
110+
"isDeprecated": true
84111
},
85112
{
86113
"key": "paperAnchorDockedRight",
87-
"className": "MuiSwipeableDrawer-paperAnchorDockedRight",
114+
"className": "MuiDrawer-paperAnchorDockedRight",
88115
"description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
89-
"isGlobal": false
116+
"isGlobal": false,
117+
"isDeprecated": true
90118
},
91119
{
92120
"key": "paperAnchorDockedTop",
93-
"className": "MuiSwipeableDrawer-paperAnchorDockedTop",
121+
"className": "MuiDrawer-paperAnchorDockedTop",
94122
"description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
95-
"isGlobal": false
123+
"isGlobal": false,
124+
"isDeprecated": true
96125
},
97126
{
98127
"key": "paperAnchorLeft",
99-
"className": "MuiSwipeableDrawer-paperAnchorLeft",
128+
"className": "MuiDrawer-paperAnchorLeft",
100129
"description": "Styles applied to the Paper component if `anchor=\"left\"`.",
101-
"isGlobal": false
130+
"isGlobal": false,
131+
"isDeprecated": true
102132
},
103133
{
104134
"key": "paperAnchorRight",
105-
"className": "MuiSwipeableDrawer-paperAnchorRight",
135+
"className": "MuiDrawer-paperAnchorRight",
106136
"description": "Styles applied to the Paper component if `anchor=\"right\"`.",
107-
"isGlobal": false
137+
"isGlobal": false,
138+
"isDeprecated": true
108139
},
109140
{
110141
"key": "paperAnchorTop",
111-
"className": "MuiSwipeableDrawer-paperAnchorTop",
142+
"className": "MuiDrawer-paperAnchorTop",
112143
"description": "Styles applied to the Paper component if `anchor=\"top\"`.",
113-
"isGlobal": false
144+
"isGlobal": false,
145+
"isDeprecated": true
114146
},
115147
{
116148
"key": "root",
117-
"className": "MuiSwipeableDrawer-root",
149+
"className": "MuiDrawer-root",
118150
"description": "Styles applied to the root element.",
119151
"isGlobal": false
120152
}

‎docs/translations/api-docs/drawer/drawer.json

+36-8
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,26 @@
3232
"variant": { "description": "The variant to use." }
3333
},
3434
"classDescriptions": {
35+
"anchorBottom": {
36+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
37+
"nodeName": "the root element",
38+
"conditions": "<code>anchor=\"bottom\"</code>"
39+
},
40+
"anchorLeft": {
41+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
42+
"nodeName": "the root element",
43+
"conditions": "<code>anchor=\"left\"</code>"
44+
},
45+
"anchorRight": {
46+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
47+
"nodeName": "the root element",
48+
"conditions": "<code>anchor=\"right\"</code>"
49+
},
50+
"anchorTop": {
51+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
52+
"nodeName": "the root element",
53+
"conditions": "<code>anchor=\"top\"</code>"
54+
},
3555
"docked": {
3656
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
3757
"nodeName": "the root element",
@@ -48,42 +68,50 @@
4868
"paperAnchorBottom": {
4969
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
5070
"nodeName": "the Paper component",
51-
"conditions": "<code>anchor=\"bottom\"</code>"
71+
"conditions": "<code>anchor=\"bottom\"</code>",
72+
"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>"
5273
},
5374
"paperAnchorDockedBottom": {
5475
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
5576
"nodeName": "the Paper component",
56-
"conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;"
77+
"conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;",
78+
"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>"
5779
},
5880
"paperAnchorDockedLeft": {
5981
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
6082
"nodeName": "the Paper component",
61-
"conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;"
83+
"conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;",
84+
"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>"
6285
},
6386
"paperAnchorDockedRight": {
6487
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
6588
"nodeName": "the Paper component",
66-
"conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;"
89+
"conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;",
90+
"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>"
6791
},
6892
"paperAnchorDockedTop": {
6993
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
7094
"nodeName": "the Paper component",
71-
"conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;"
95+
"conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;",
96+
"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>"
7297
},
7398
"paperAnchorLeft": {
7499
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
75100
"nodeName": "the Paper component",
76-
"conditions": "<code>anchor=\"left\"</code>"
101+
"conditions": "<code>anchor=\"left\"</code>",
102+
"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>"
77103
},
78104
"paperAnchorRight": {
79105
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
80106
"nodeName": "the Paper component",
81-
"conditions": "<code>anchor=\"right\"</code>"
107+
"conditions": "<code>anchor=\"right\"</code>",
108+
"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>"
82109
},
83110
"paperAnchorTop": {
84111
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
85112
"nodeName": "the Paper component",
86-
"conditions": "<code>anchor=\"top\"</code>"
113+
"conditions": "<code>anchor=\"top\"</code>",
114+
"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>"
87115
},
88116
"root": { "description": "Styles applied to the root element." }
89117
}

0 commit comments

Comments
 (0)