Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][docs] Add deprecations migration guide #40767

Merged
merged 9 commits into from
Feb 6, 2024
Merged
Show file tree
Hide file tree
Changes from 5 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
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Migrating deprecations
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

<p class="description">This guide explains how to migrate current deprecated APIs.</p>
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

## Why you should migrate

Deprecations are added as APIs are improved.
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
Migrating to these improved APIs results in a better developer experience.
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
The sooner you migrate, the smoother future major updates become.
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

## Migrating

The easiest way to migrate is running the `deprecations/all` codemod:
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

```bash
npx @mui/codemod@latest deprecations/all <path>
```

This command runs all the current [deprecations codemods](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#deprecations), automatically migrating to the updated API.
This codemod can be run multiple times to keep up with new deprecations.
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

:::info

If you need to migrate a deprecation manually, examples on how to do so are listed below for each current deprecation.
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
If you need to run a specific codemod, those are also linked below.

:::

## Accordion

### TransitionComponent

Deprecated in favor of `slots.transition` ([Codemod](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#accordion-props)).
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

```diff
<Accordion
- TransitionComponent={CustomTransition}
+ slots={{ transition: CustomTransition }}
/>
```

### TransitionProps

Deprecated in favor of `slotProps.transition` ([Codemod](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#accordion-props)).
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved

```diff
<Accordion
- TransitionProps={{ unmountOnExit: true }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>
```
4 changes: 4 additions & 0 deletions docs/data/material/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,10 @@ const pages: MuiPage[] = [
pathname: '/material-ui/migration',
title: 'Migration',
children: [
{
pathname: '/material-ui/migration/migrating-deprecations',
title: 'Migrating deprecations',
},
{
pathname: '/material-ui/migration/migration-grid-v2',
title: 'Migrating to Grid v2',
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/material-ui/api/accordion.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@
"TransitionComponent": {
"type": { "name": "elementType" },
"deprecated": true,
"deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7."
"deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-deprecations/\">How to migrate</a>."
},
"TransitionProps": {
"type": { "name": "object" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7."
"deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-deprecations/\">How to migrate</a>."
}
},
"name": "Accordion",
Expand Down
7 changes: 7 additions & 0 deletions docs/pages/material-ui/migration/migrating-deprecations.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
import * as pageProps from 'docs/data/material/migration/migrating-deprecations/migrating-deprecations.md?@mui/markdown';

export default function Page() {
return <MarkdownDocs {...pageProps} />;
}
1 change: 1 addition & 0 deletions docs/translations/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -473,6 +473,7 @@
"/material-ui/discover-more/vision": "Vision",
"/material-ui/discover-more/changelog": "Changelog",
"/material-ui/migration": "Migration",
"/material-ui/migration/migrating-deprecations": "Migrating deprecations",
"/material-ui/migration/migration-grid-v2": "Migrating to Grid v2",
"Upgrade to v5": "Upgrade to v5",
"/material-ui/migration/migration-v4": "Migrating to v5: getting started",
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/Accordion/Accordion.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,15 @@ export type AccordionTypeMap<
/**
* The component used for the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @deprecated Use `slots.transition` instead. This prop will be removed in v7.
* @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-deprecations/).
*/
TransitionComponent?: React.JSXElementConstructor<
TransitionProps & { children?: React.ReactElement<any, any> }
>;
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-deprecations/).
*/
TransitionProps?: TransitionProps;
} & AccordionSlotsAndSlotProps;
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/Accordion/Accordion.js
Original file line number Diff line number Diff line change
Expand Up @@ -293,13 +293,13 @@ Accordion.propTypes /* remove-proptypes */ = {
/**
* The component used for the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @deprecated Use `slots.transition` instead. This prop will be removed in v7.
* @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-deprecations/).
*/
TransitionComponent: PropTypes.elementType,
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-deprecations/).
*/
TransitionProps: PropTypes.object,
};
Expand Down
Loading