Add migration guide

mui · Feb 15, 2024 · be6b94d · be6b94d
1 parent 8e41e7f
commit be6b94d
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -90,6 +90,36 @@ Bear in mind that the `.MuiAccordionSummary-gutters` class is applied to the com
  },
 ```
 
+## Alert
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/alert-props <path>
+```
+
+### components
+
+The Alert's `components` was deprecated in favor of `slots`:
+
+```diff
+ <Alert
+-  components={{ CloseButton: CustomButton }}
++  slots={{ closeButton: CustomButton }}
+ />
+```
+
+### componentsProps
+
+The Alert's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Alert
+-  componentsProps={{ closeButton: { testid: 'test-id' } }}
++  slotProps={{ closeButton: { testid: 'test-id' } }}
+ />
+```
+
 ## Avatar
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-props) below to migrate the code as described in the following sections:

diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
@@ -136,6 +136,32 @@ CSS transforms:
 npx @mui/codemod@latest deprecations/accordion-summary-classes <path>
 ```
 
+#### `alert-props`
+
+```diff
+ <Alert
+-  components={{ CloseButton: CustomButton }}
++  slots={{ closeButton: CustomButton }}
+-  componentsProps={{ closeButton: { testid: 'test-id' } }}
++  slotProps={{ closeButton: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiAlert: {
+   defaultProps: {
+-    components: { CloseButton: CustomButton }
++    slots: { closeButton: CustomButton },
+-    componentsProps: { closeButton: { testid: 'test-id' }}
++    slotProps: { closeButton: { testid: 'test-id' } },
+  },
+},
+```
+
+```bash
+npx @mui/codemod@latest deprecations/alert-props <path>
+```
+
 #### `avatar-props`
 
 ```diff

diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js
@@ -1,20 +1,18 @@
 import Alert from '@mui/material/Alert';
 
 <Alert
-  slots={{
-    closeButton: ComponentsButton
-  }}
-  slotProps={{ closeButton: componentsButtonProps }}
+  components={{ CloseButton: ComponentsButton }}
+  componentsProps={{ closeButton: componentsButtonProps }}
 />;
 <Alert
-  slots={{
-    closeIcon: SlotsIcon,
-    closeButton: ComponentsButton
-  }}
-  slotProps={{
-    closeIcon: slotsIconProps,
-    closeButton: componentsButtonProps
-  }} />;
+  slots={{ closeIcon: SlotsIcon }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
 <Alert
   slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
-  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }} />;
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;