Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
Original file line number Diff line number Diff line change
Expand Up @@ -1277,6 +1277,12 @@ If you were using these deprecated class names as `styleOverrides` keys in your

#### SpeedDial deprecated props removed

Use the [speed-dial-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#speed-dial-props) below to migrate the code as described in the following section:
Comment thread
silviuaavram marked this conversation as resolved.

```bash
npx @mui/codemod@latest deprecations/speed-dial-props <path>
```

The deprecated `SpeedDial` props have been removed.
Use the `slots` and `slotProps` props instead:

Expand All @@ -1291,6 +1297,12 @@ Use the `slots` and `slotProps` props instead:

#### SpeedDialAction deprecated props removed

Use the [speed-dial-action-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#speed-dial-action-props) below to migrate the code as described in the following section:
Comment thread
silviuaavram marked this conversation as resolved.

```bash
npx @mui/codemod@latest deprecations/speed-dial-action-props <path>
```

The deprecated `SpeedDialAction` props have been removed.
Use the `slotProps` prop instead:

Expand All @@ -1313,6 +1325,12 @@ Use the `slotProps` prop instead:

#### Menu deprecated props removed

Use the [menu-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#menu-props) below to migrate the code as described in the following section:
Comment thread
silviuaavram marked this conversation as resolved.

```bash
npx @mui/codemod@latest deprecations/menu-props <path>
```

The following deprecated props have been removed:

- `MenuListProps` — use `slotProps.list` instead
Expand Down Expand Up @@ -1370,6 +1388,12 @@ The following deprecated props have been removed:

#### Popover deprecated props removed

Use the [popover-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popover-props) below to migrate the code as described in the following section:
Comment thread
silviuaavram marked this conversation as resolved.

```bash
npx @mui/codemod@latest deprecations/popover-props <path>
```

The following deprecated props have been removed:

- `BackdropComponent` — use `slots.backdrop` instead
Expand Down
186 changes: 186 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1277,6 +1277,46 @@ CSS transforms:
npx @mui/codemod@next deprecations/drawer-classes <path>
```

#### `drawer-props`

```diff
<Drawer
- BackdropComponent={CustomBackdrop}
- BackdropProps={{ transitionDuration: 300 }}
- PaperProps={{ elevation: 20 }}
- SlideProps={{ direction: 'right' }}
+ slots={{ backdrop: CustomBackdrop }}
+ slotProps={{
+ backdrop: { transitionDuration: 300 },
+ paper: { elevation: 20 },
+ transition: { direction: 'right' },
+ }}
/>
```

The same applies to `SwipeableDrawer`.

```diff
MuiDrawer: {
defaultProps: {
- BackdropComponent: CustomBackdrop,
- BackdropProps: { transitionDuration: 300 },
- PaperProps: { elevation: 20 },
- SlideProps: { direction: 'right' },
+ slots: { backdrop: CustomBackdrop },
+ slotProps: {
+ backdrop: { transitionDuration: 300 },
+ paper: { elevation: 20 },
+ transition: { direction: 'right' },
+ },
},
},
```

```bash
npx @mui/codemod@next deprecations/drawer-props <path>
```

#### `filled-input-props`

```diff
Expand Down Expand Up @@ -1640,6 +1680,40 @@ npx @mui/codemod@next deprecations/modal-props <path>
npx @mui/codemod@next deprecations/mobile-stepper-props <path>
```

#### `menu-props`

```diff
<Menu
- TransitionComponent={CustomTransition}
- MenuListProps={{ disablePadding: true }}
- TransitionProps={{ timeout: 200 }}
+ slots={{ transition: CustomTransition }}
+ slotProps={{
+ list: { disablePadding: true },
+ transition: { timeout: 200 },
+ }}
/>
```

```diff
MuiMenu: {
defaultProps: {
- TransitionComponent: CustomTransition,
- MenuListProps: { disablePadding: true },
- TransitionProps: { timeout: 200 },
+ slots: { transition: CustomTransition },
+ slotProps: {
+ list: { disablePadding: true },
+ transition: { timeout: 200 },
+ },
},
},
```

```bash
npx @mui/codemod@next deprecations/menu-props <path>
```

#### `pagination-item-classes`

JS transforms:
Expand Down Expand Up @@ -1726,6 +1800,46 @@ npx @mui/codemod@next deprecations/pagination-item-classes <path>
npx @mui/codemod@next deprecations/pagination-item-props <path>
```

#### `popover-props`

```diff
<Popover
- BackdropComponent={CustomBackdrop}
- BackdropProps={{ timeout: 200 }}
- PaperProps={{ elevation: 4 }}
- TransitionComponent={CustomTransition}
- TransitionProps={{ timeout: 200 }}
+ slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
+ slotProps={{
+ backdrop: { timeout: 200 },
+ paper: { elevation: 4 },
+ transition: { timeout: 200 },
+ }}
/>
```

```diff
MuiPopover: {
defaultProps: {
- BackdropComponent: 'div',
- BackdropProps: { timeout: 200 },
- PaperProps: { elevation: 8 },
- TransitionComponent: 'em',
- TransitionProps: { timeout: 200 },
+ slots: { backdrop: 'div', transition: 'em' },
+ slotProps: {
+ backdrop: { timeout: 200 },
+ paper: { elevation: 8 },
+ transition: { timeout: 200 },
+ },
},
},
```

```bash
npx @mui/codemod@next deprecations/popover-props <path>
```

#### `popper-props`

```diff
Expand Down Expand Up @@ -1906,6 +2020,78 @@ npx @mui/codemod@next deprecations/slider-props <path>
npx @mui/codemod@next deprecations/snackbar-props <path>
```

#### `speed-dial-props`

```diff
<SpeedDial
- TransitionComponent={CustomTransition}
- TransitionProps={CustomTransitionProps}
+ slots={{ transition: CustomTransition }}
+ slotProps={{ transition: CustomTransitionProps }}
/>
```

```diff
MuiSpeedDial: {
defaultProps: {
- TransitionComponent: CustomTransition,
- TransitionProps: CustomTransitionProps,
+ slots: { transition: CustomTransition },
+ slotProps: { transition: CustomTransitionProps },
},
},
```

```bash
npx @mui/codemod@next deprecations/speed-dial-props <path>
```

#### `speed-dial-action-props`

```diff
<SpeedDialAction
- FabProps={FabProps}
- TooltipClasses={TooltipClasses}
- tooltipOpen={true}
- tooltipPlacement="top"
- tooltipTitle="test"
+ slotProps={{
+ fab: FabProps,
+ tooltip: {
+ classes: TooltipClasses,
+ open: true,
+ placement: 'top',
+ title: 'test',
+ },
+ }}
/>
```

```diff
MuiSpeedDialAction: {
defaultProps: {
- FabProps: { id: 'test' },
- TooltipClasses: classes,
- tooltipOpen: true,
- tooltipPlacement: 'top',
- tooltipTitle: 'test',
+ slotProps: {
+ fab: { id: 'test' },
+ tooltip: {
+ classes: classes,
+ open: true,
+ placement: 'top',
+ title: 'test',
+ },
+ },
},
},
```

```bash
npx @mui/codemod@next deprecations/speed-dial-action-props <path>
```

#### `slider-classes`

JS transforms:
Expand Down
Loading