Skip to content

Commit a41e93a

Browse files
silviuaavramsilviuaavram
committed
[dialog][modal][drawer][swipeabledrawer] Remove deprecated props and classes
1 parent 04816a1 commit a41e93a

31 files changed

Lines changed: 293 additions & 480 deletions

File tree

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

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -894,6 +894,110 @@ If you were using these deprecated class names as `styleOverrides` keys in your
894894
});
895895
```
896896

897+
#### Dialog deprecated CSS classes removed
898+
899+
Use the [dialog-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#dialog-classes) below to migrate the code as described in the following section:
900+
901+
```bash
902+
npx @mui/codemod@latest deprecations/dialog-classes <path>
903+
```
904+
905+
The following deprecated `Dialog` CSS classes have been removed:
906+
907+
- `paperScrollPaper` → use `.MuiDialog-scrollPaper > .MuiDialog-paper`
908+
- `paperScrollBody` → use `.MuiDialog-scrollBody > .MuiDialog-paper`
909+
910+
If you were using these classes in `styleOverrides`, use the `variants` array in the `paper` slot instead:
911+
912+
```diff
913+
const theme = createTheme({
914+
components: {
915+
MuiDialog: {
916+
styleOverrides: {
917+
- paperScrollPaper: {
918+
- maxHeight: '80vh',
919+
- },
920+
- paperScrollBody: {
921+
- verticalAlign: 'bottom',
922+
- },
923+
+ paper: {
924+
+ variants: [
925+
+ {
926+
+ props: { scroll: 'paper' },
927+
+ style: {
928+
+ maxHeight: '80vh',
929+
+ },
930+
+ },
931+
+ {
932+
+ props: { scroll: 'body' },
933+
+ style: {
934+
+ verticalAlign: 'bottom',
935+
+ },
936+
+ },
937+
+ ],
938+
+ },
939+
},
940+
},
941+
},
942+
});
943+
```
944+
945+
#### Dialog deprecated props removed
946+
947+
Use the [dialog-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#dialog-props) below to migrate the code as described in the following section:
948+
949+
```bash
950+
npx @mui/codemod@latest deprecations/dialog-props <path>
951+
```
952+
953+
The following deprecated props have been removed from the `Dialog` component:
954+
955+
- `BackdropComponent` → use `slots.backdrop`
956+
- `BackdropProps` → use `slotProps.backdrop`
957+
- `PaperProps` → use `slotProps.paper`
958+
- `TransitionComponent` → use `slots.transition`
959+
- `TransitionProps` → use `slotProps.transition`
960+
961+
```diff
962+
<Dialog
963+
- BackdropComponent={CustomBackdrop}
964+
- BackdropProps={{ invisible: true }}
965+
- PaperProps={{ elevation: 3 }}
966+
- TransitionComponent={CustomTransition}
967+
- TransitionProps={{ timeout: 500 }}
968+
+ slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
969+
+ slotProps={{ backdrop: { invisible: true }, paper: { elevation: 3 }, transition: { timeout: 500 } }}
970+
/>
971+
```
972+
973+
#### Drawer deprecated props removed
974+
975+
Use the [drawer-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following section:
976+
977+
```bash
978+
npx @mui/codemod@latest deprecations/drawer-props <path>
979+
```
980+
981+
The following deprecated props have been removed from the `Drawer` component:
982+
983+
- `BackdropComponent` → use `slots.backdrop`
984+
- `BackdropProps` → use `slotProps.backdrop`
985+
- `PaperProps` → use `slotProps.paper`
986+
- `SlideProps` → use `slotProps.transition`
987+
- `TransitionComponent` → use `slots.transition`
988+
989+
```diff
990+
<Drawer
991+
- BackdropComponent={CustomBackdrop}
992+
- BackdropProps={{ invisible: true }}
993+
- PaperProps={{ elevation: 2 }}
994+
- SlideProps={{ timeout: 500 }}
995+
- TransitionComponent={CustomTransition}
996+
+ slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
997+
+ slotProps={{ backdrop: { invisible: true }, paper: { elevation: 2 }, transition: { timeout: 500 } }}
998+
/>
999+
```
1000+
8971001
#### Divider deprecated props removed
8981002

8991003
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:
@@ -1368,6 +1472,32 @@ The following deprecated props have been removed:
13681472
/>
13691473
```
13701474

1475+
#### Modal deprecated props removed
1476+
1477+
Use the [modal-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#modal-props) below to migrate the code as described in the following section:
1478+
1479+
```bash
1480+
npx @mui/codemod@latest deprecations/modal-props <path>
1481+
```
1482+
1483+
The following deprecated props have been removed from the `Modal` component:
1484+
1485+
- `BackdropComponent` → use `slots.backdrop`
1486+
- `BackdropProps` → use `slotProps.backdrop`
1487+
- `components` → use `slots`
1488+
- `componentsProps` → use `slotProps`
1489+
1490+
```diff
1491+
<Modal
1492+
- BackdropComponent={CustomBackdrop}
1493+
- BackdropProps={{ invisible: true }}
1494+
- components={{ Root: CustomRoot }}
1495+
- componentsProps={{ root: { className: 'custom' } }}
1496+
+ slots={{ backdrop: CustomBackdrop, root: CustomRoot }}
1497+
+ slotProps={{ backdrop: { invisible: true }, root: { className: 'custom' } }}
1498+
/>
1499+
```
1500+
13711501
#### Popover deprecated props removed
13721502

13731503
The following deprecated props have been removed:
@@ -1434,6 +1564,30 @@ The following deprecated `Switch` props have been removed:
14341564
/>
14351565
```
14361566

1567+
#### SwipeableDrawer deprecated props removed
1568+
1569+
Use the [drawer-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-props) below to migrate the code as described in the following section:
1570+
1571+
```bash
1572+
npx @mui/codemod@latest deprecations/drawer-props <path>
1573+
```
1574+
1575+
The following deprecated props have been removed from the `SwipeableDrawer` component:
1576+
1577+
- `BackdropComponent` → use `slots.backdrop`
1578+
- `BackdropProps` → use `slotProps.backdrop`
1579+
- `SwipeAreaProps` → use `slotProps.swipeArea`
1580+
1581+
```diff
1582+
<SwipeableDrawer
1583+
- BackdropComponent={CustomBackdrop}
1584+
- BackdropProps={{ invisible: true }}
1585+
- SwipeAreaProps={{ className: 'custom' }}
1586+
+ slots={{ backdrop: CustomBackdrop }}
1587+
+ slotProps={{ backdrop: { invisible: true }, swipeArea: { className: 'custom' } }}
1588+
/>
1589+
```
1590+
14371591
#### Tabs deprecated props removed
14381592

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

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

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@
1010
},
1111
"default": "true"
1212
},
13-
"BackdropComponent": {
14-
"type": { "name": "elementType" },
15-
"default": "styled(Backdrop, {\n name: 'MuiModal',\n slot: 'Backdrop',\n})({\n zIndex: -1,\n})",
16-
"deprecated": true,
17-
"deprecationInfo": "Use <code>slots.backdrop</code> instead. While this prop currently works, it will be removed in the next major version."
18-
},
1913
"children": { "type": { "name": "node" } },
2014
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
2115
"fullScreen": { "type": { "name": "bool" }, "default": "false" },
@@ -35,12 +29,6 @@
3529
}
3630
},
3731
"PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
38-
"PaperProps": {
39-
"type": { "name": "object" },
40-
"default": "{}",
41-
"deprecated": true,
42-
"deprecationInfo": "Use <code>slotProps.paper</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
43-
},
4432
"scroll": {
4533
"type": { "name": "enum", "description": "'body'<br>&#124;&nbsp;'paper'" },
4634
"default": "'paper'"
@@ -66,23 +54,12 @@
6654
},
6755
"additionalInfo": { "sx": true }
6856
},
69-
"TransitionComponent": {
70-
"type": { "name": "elementType" },
71-
"default": "Fade",
72-
"deprecated": true,
73-
"deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
74-
},
7557
"transitionDuration": {
7658
"type": {
7759
"name": "union",
7860
"description": "number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
7961
},
8062
"default": "{\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n}"
81-
},
82-
"TransitionProps": {
83-
"type": { "name": "object" },
84-
"deprecated": true,
85-
"deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
8663
}
8764
},
8865
"name": "Dialog",
@@ -132,20 +109,6 @@
132109
"description": "Styles applied to the Paper component if `fullWidth={true}`.",
133110
"isGlobal": false
134111
},
135-
{
136-
"key": "paperScrollBody",
137-
"className": "MuiDialog-paperScrollBody",
138-
"description": "Styles applied to the Paper component if `scroll=\"body\"`.",
139-
"isGlobal": false,
140-
"isDeprecated": true
141-
},
142-
{
143-
"key": "paperScrollPaper",
144-
"className": "MuiDialog-paperScrollPaper",
145-
"description": "Styles applied to the Paper component if `scroll=\"paper\"`.",
146-
"isGlobal": false,
147-
"isDeprecated": true
148-
},
149112
{
150113
"key": "paperWidthFalse",
151114
"className": "MuiDialog-paperWidthFalse",

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,6 @@
2020
}
2121
},
2222
"open": { "type": { "name": "bool" }, "default": "false" },
23-
"PaperProps": {
24-
"type": { "name": "object" },
25-
"default": "{}",
26-
"deprecated": true,
27-
"deprecationInfo": "use the <code>slotProps.paper</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
28-
},
29-
"SlideProps": {
30-
"type": { "name": "object" },
31-
"deprecated": true,
32-
"deprecationInfo": "use the <code>slotProps.transition</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
33-
},
3423
"slotProps": {
3524
"type": {
3625
"name": "shape",

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

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,9 @@
22
"props": {
33
"children": { "type": { "name": "custom", "description": "element" }, "required": true },
44
"open": { "type": { "name": "bool" }, "required": true },
5-
"BackdropComponent": {
6-
"type": { "name": "elementType" },
7-
"default": "styled(Backdrop, {\n name: 'MuiModal',\n slot: 'Backdrop',\n})({\n zIndex: -1,\n})",
8-
"deprecated": true,
9-
"deprecationInfo": "Use <code>slots.backdrop</code> instead. While this prop currently works, it will be removed in the next major version."
10-
},
11-
"BackdropProps": {
12-
"type": { "name": "object" },
13-
"deprecated": true,
14-
"deprecationInfo": "Use <code>slotProps.backdrop</code> instead."
15-
},
165
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
176
"closeAfterTransition": { "type": { "name": "bool" }, "default": "false" },
187
"component": { "type": { "name": "elementType" } },
19-
"components": {
20-
"type": { "name": "shape", "description": "{ Backdrop?: elementType, Root?: elementType }" },
21-
"default": "{}",
22-
"deprecated": true,
23-
"deprecationInfo": "Use the <code>slots</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
24-
},
25-
"componentsProps": {
26-
"type": {
27-
"name": "shape",
28-
"description": "{ backdrop?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
29-
},
30-
"default": "{}",
31-
"deprecated": true,
32-
"deprecationInfo": "Use the <code>slotProps</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
33-
},
348
"container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
359
"disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
3610
"disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,6 @@
4444
},
4545
"default": "{}"
4646
},
47-
"SwipeAreaProps": {
48-
"type": { "name": "object" },
49-
"deprecated": true,
50-
"deprecationInfo": "use the <code>slotProps.swipeArea</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
51-
},
5247
"swipeAreaWidth": { "type": { "name": "number" }, "default": "20" },
5348
"transitionDuration": {
5449
"type": {

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

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
"aria-modal": {
77
"description": "Informs assistive technologies that the element is modal. It&#39;s added on the element with role=&quot;dialog&quot;."
88
},
9-
"BackdropComponent": {
10-
"description": "A backdrop component. This prop enables custom backdrop rendering."
11-
},
129
"children": { "description": "Dialog children, usually the included sub-components." },
1310
"classes": { "description": "Override or extend the styles applied to the component." },
1411
"fullScreen": { "description": "If <code>true</code>, the dialog is full-screen." },
@@ -30,23 +27,14 @@
3027
},
3128
"open": { "description": "If <code>true</code>, the component is shown." },
3229
"PaperComponent": { "description": "The component used to render the body of the dialog." },
33-
"PaperProps": {
34-
"description": "Props applied to the <a href=\"https://mui.com/material-ui/api/paper/\"><code>Paper</code></a> element."
35-
},
3630
"scroll": { "description": "Determine the container for scrolling the dialog." },
3731
"slotProps": { "description": "The props used for each slot inside." },
3832
"slots": { "description": "The components used for each slot inside." },
3933
"sx": {
4034
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
4135
},
42-
"TransitionComponent": {
43-
"description": "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."
44-
},
4536
"transitionDuration": {
4637
"description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
47-
},
48-
"TransitionProps": {
49-
"description": "Props applied to the transition element. By default, the element is based on this <a href=\"https://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
5038
}
5139
},
5240
"classDescriptions": {
@@ -60,18 +48,6 @@
6048
"nodeName": "the Paper component",
6149
"conditions": "<code>fullWidth={true}</code>"
6250
},
63-
"paperScrollBody": {
64-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
65-
"nodeName": "the Paper component",
66-
"conditions": "<code>scroll=\"body\"</code>",
67-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/dialog/#Dialog-css-MuiDialog-paper\">.MuiDialog-paper</a> and <a href=\"/material-ui/api/dialog/#dialog-classes-MuiDialog-scrollBody\">.MuiDialog-scrollBody</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
68-
},
69-
"paperScrollPaper": {
70-
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
71-
"nodeName": "the Paper component",
72-
"conditions": "<code>scroll=\"paper\"</code>",
73-
"deprecationInfo": "Combine the <a href=\"/material-ui/api/dialog/#Dialog-css-MuiDialog-paper\">.MuiDialog-paper</a> and <a href=\"/material-ui/api/dialog/#dialog-classes-MuiDialog-scrollPaper\">.MuiDialog-scrollPaper</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
74-
},
7551
"paperWidthFalse": {
7652
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
7753
"nodeName": "the Paper component",

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@
2020
}
2121
},
2222
"open": { "description": "If <code>true</code>, the component is shown." },
23-
"PaperProps": {
24-
"description": "Props applied to the <a href=\"https://mui.com/material-ui/api/paper/\"><code>Paper</code></a> element."
25-
},
26-
"SlideProps": {
27-
"description": "Props applied to the <a href=\"https://mui.com/material-ui/api/slide/\"><code>Slide</code></a> element."
28-
},
2923
"slotProps": { "description": "The props used for each slot inside." },
3024
"slots": { "description": "The components used for each slot inside." },
3125
"sx": {

0 commit comments

Comments
 (0)