Skip to content

Commit 54eb93d

Browse files
siriwatknpsiriwatknp
authored
[Drawer] Remove deprecated CSS classes (#48077)
1 parent 9139ae2 commit 54eb93d

7 files changed

Lines changed: 30 additions & 265 deletions

File tree

‎docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -998,6 +998,33 @@ The following deprecated props have been removed from the `Drawer` component:
998998
/>
999999
```
10001000

1001+
#### Drawer deprecated classes removed
1002+
1003+
Use the [drawer-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-classes) below to migrate the code as described in the following section:
1004+
1005+
```bash
1006+
npx @mui/codemod@latest deprecations/drawer-classes <path>
1007+
```
1008+
1009+
The following deprecated classes have been removed:
1010+
1011+
- `paperAnchorLeft` — combine `.MuiDrawer-anchorLeft` and `.MuiDrawer-paper` instead
1012+
- `paperAnchorRight` — combine `.MuiDrawer-anchorRight` and `.MuiDrawer-paper` instead
1013+
- `paperAnchorTop` — combine `.MuiDrawer-anchorTop` and `.MuiDrawer-paper` instead
1014+
- `paperAnchorBottom` — combine `.MuiDrawer-anchorBottom` and `.MuiDrawer-paper` instead
1015+
- `paperAnchorDockedLeft` — combine `.MuiDrawer-anchorLeft`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead
1016+
- `paperAnchorDockedRight` — combine `.MuiDrawer-anchorRight`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead
1017+
- `paperAnchorDockedTop` — combine `.MuiDrawer-anchorTop`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead
1018+
- `paperAnchorDockedBottom` — combine `.MuiDrawer-anchorBottom`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead
1019+
1020+
```diff
1021+
-.MuiDrawer-paperAnchorLeft
1022+
+.MuiDrawer-anchorLeft > .MuiDrawer-paper
1023+
1024+
-.MuiDrawer-paperAnchorDockedLeft
1025+
+.MuiDrawer-anchorLeft.MuiDrawer-docked > .MuiDrawer-paper
1026+
```
1027+
10011028
#### Divider deprecated props removed
10021029

10031030
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections:

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

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -123,62 +123,6 @@
123123
"className": "MuiDrawer-modal",
124124
"description": "Styles applied to the Modal component.",
125125
"isGlobal": false
126-
},
127-
{
128-
"key": "paperAnchorBottom",
129-
"className": "MuiDrawer-paperAnchorBottom",
130-
"description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
131-
"isGlobal": false,
132-
"isDeprecated": true
133-
},
134-
{
135-
"key": "paperAnchorDockedBottom",
136-
"className": "MuiDrawer-paperAnchorDockedBottom",
137-
"description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
138-
"isGlobal": false,
139-
"isDeprecated": true
140-
},
141-
{
142-
"key": "paperAnchorDockedLeft",
143-
"className": "MuiDrawer-paperAnchorDockedLeft",
144-
"description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
145-
"isGlobal": false,
146-
"isDeprecated": true
147-
},
148-
{
149-
"key": "paperAnchorDockedRight",
150-
"className": "MuiDrawer-paperAnchorDockedRight",
151-
"description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
152-
"isGlobal": false,
153-
"isDeprecated": true
154-
},
155-
{
156-
"key": "paperAnchorDockedTop",
157-
"className": "MuiDrawer-paperAnchorDockedTop",
158-
"description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
159-
"isGlobal": false,
160-
"isDeprecated": true
161-
},
162-
{
163-
"key": "paperAnchorLeft",
164-
"className": "MuiDrawer-paperAnchorLeft",
165-
"description": "Styles applied to the Paper component if `anchor=\"left\"`.",
166-
"isGlobal": false,
167-
"isDeprecated": true
168-
},
169-
{
170-
"key": "paperAnchorRight",
171-
"className": "MuiDrawer-paperAnchorRight",
172-
"description": "Styles applied to the Paper component if `anchor=\"right\"`.",
173-
"isGlobal": false,
174-
"isDeprecated": true
175-
},
176-
{
177-
"key": "paperAnchorTop",
178-
"className": "MuiDrawer-paperAnchorTop",
179-
"description": "Styles applied to the Paper component if `anchor=\"top\"`.",
180-
"isGlobal": false,
181-
"isDeprecated": true
182126
}
183127
],
184128
"spread": true,

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

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -109,62 +109,6 @@
109109
"description": "Styles applied to the Paper component.",
110110
"isGlobal": false
111111
},
112-
{
113-
"key": "paperAnchorBottom",
114-
"className": "MuiDrawer-paperAnchorBottom",
115-
"description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
116-
"isGlobal": false,
117-
"isDeprecated": true
118-
},
119-
{
120-
"key": "paperAnchorDockedBottom",
121-
"className": "MuiDrawer-paperAnchorDockedBottom",
122-
"description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
123-
"isGlobal": false,
124-
"isDeprecated": true
125-
},
126-
{
127-
"key": "paperAnchorDockedLeft",
128-
"className": "MuiDrawer-paperAnchorDockedLeft",
129-
"description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
130-
"isGlobal": false,
131-
"isDeprecated": true
132-
},
133-
{
134-
"key": "paperAnchorDockedRight",
135-
"className": "MuiDrawer-paperAnchorDockedRight",
136-
"description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
137-
"isGlobal": false,
138-
"isDeprecated": true
139-
},
140-
{
141-
"key": "paperAnchorDockedTop",
142-
"className": "MuiDrawer-paperAnchorDockedTop",
143-
"description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
144-
"isGlobal": false,
145-
"isDeprecated": true
146-
},
147-
{
148-
"key": "paperAnchorLeft",
149-
"className": "MuiDrawer-paperAnchorLeft",
150-
"description": "Styles applied to the Paper component if `anchor=\"left\"`.",
151-
"isGlobal": false,
152-
"isDeprecated": true
153-
},
154-
{
155-
"key": "paperAnchorRight",
156-
"className": "MuiDrawer-paperAnchorRight",
157-
"description": "Styles applied to the Paper component if `anchor=\"right\"`.",
158-
"isGlobal": false,
159-
"isDeprecated": true
160-
},
161-
{
162-
"key": "paperAnchorTop",
163-
"className": "MuiDrawer-paperAnchorTop",
164-
"description": "Styles applied to the Paper component if `anchor=\"top\"`.",
165-
"isGlobal": false,
166-
"isDeprecated": true
167-
},
168112
{
169113
"key": "root",
170114
"className": "MuiDrawer-root",

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

Lines changed: 1 addition & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -51,58 +51,7 @@
5151
"nodeName": "the root element",
5252
"conditions": "<code>anchor=\"top\"</code>"
5353
},
54-
"modal": {
55-
"description": "Styles applied to {{nodeName}}.",
56-
"nodeName": "the Modal component"
57-
},
58-
"paperAnchorBottom": {
59-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
60-
"nodeName": "the Paper component",
61-
"conditions": "<code>anchor=\"bottom\"</code>",
62-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
63-
},
64-
"paperAnchorDockedBottom": {
65-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
66-
"nodeName": "the Paper component",
67-
"conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;",
68-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
69-
},
70-
"paperAnchorDockedLeft": {
71-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
72-
"nodeName": "the Paper component",
73-
"conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;",
74-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
75-
},
76-
"paperAnchorDockedRight": {
77-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
78-
"nodeName": "the Paper component",
79-
"conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;",
80-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
81-
},
82-
"paperAnchorDockedTop": {
83-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
84-
"nodeName": "the Paper component",
85-
"conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;",
86-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
87-
},
88-
"paperAnchorLeft": {
89-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
90-
"nodeName": "the Paper component",
91-
"conditions": "<code>anchor=\"left\"</code>",
92-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
93-
},
94-
"paperAnchorRight": {
95-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
96-
"nodeName": "the Paper component",
97-
"conditions": "<code>anchor=\"right\"</code>",
98-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
99-
},
100-
"paperAnchorTop": {
101-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
102-
"nodeName": "the Paper component",
103-
"conditions": "<code>anchor=\"top\"</code>",
104-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
105-
}
54+
"modal": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Modal component" }
10655
},
10756
"slotDescriptions": {
10857
"backdrop": "The component used for the Modal backdrop.",

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

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -76,54 +76,6 @@
7676
"description": "Styles applied to {{nodeName}}.",
7777
"nodeName": "the Paper component"
7878
},
79-
"paperAnchorBottom": {
80-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
81-
"nodeName": "the Paper component",
82-
"conditions": "<code>anchor=\"bottom\"</code>",
83-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
84-
},
85-
"paperAnchorDockedBottom": {
86-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
87-
"nodeName": "the Paper component",
88-
"conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;",
89-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
90-
},
91-
"paperAnchorDockedLeft": {
92-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
93-
"nodeName": "the Paper component",
94-
"conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;",
95-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
96-
},
97-
"paperAnchorDockedRight": {
98-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
99-
"nodeName": "the Paper component",
100-
"conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;",
101-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
102-
},
103-
"paperAnchorDockedTop": {
104-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
105-
"nodeName": "the Paper component",
106-
"conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;",
107-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
108-
},
109-
"paperAnchorLeft": {
110-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
111-
"nodeName": "the Paper component",
112-
"conditions": "<code>anchor=\"left\"</code>",
113-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
114-
},
115-
"paperAnchorRight": {
116-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
117-
"nodeName": "the Paper component",
118-
"conditions": "<code>anchor=\"right\"</code>",
119-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
120-
},
121-
"paperAnchorTop": {
122-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
123-
"nodeName": "the Paper component",
124-
"conditions": "<code>anchor=\"top\"</code>",
125-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
126-
},
12779
"root": { "description": "Styles applied to the root element." }
12880
},
12981
"slotDescriptions": { "swipeArea": "The component used for the swipeArea slot." }

‎packages/mui-material/src/Drawer/Drawer.js‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,7 @@ const useUtilityClasses = (ownerState) => {
3434
root: ['root', `anchor${capitalize(anchor)}`],
3535
docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
3636
modal: ['modal'],
37-
paper: [
38-
'paper',
39-
`paperAnchor${capitalize(anchor)}`,
40-
variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`,
41-
],
37+
paper: ['paper'],
4238
};
4339

4440
return composeClasses(slots, getDrawerUtilityClass, classes);
@@ -68,14 +64,7 @@ const DrawerPaper = styled(Paper, {
6864
name: 'MuiDrawer',
6965
slot: 'Paper',
7066
overridesResolver: (props, styles) => {
71-
const { ownerState } = props;
72-
73-
return [
74-
styles.paper,
75-
styles[`paperAnchor${capitalize(ownerState.anchor)}`],
76-
ownerState.variant !== 'temporary' &&
77-
styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`],
78-
];
67+
return [styles.paper];
7968
},
8069
})(
8170
memoTheme(({ theme }) => ({

0 commit comments

Comments
 (0)