[material-ui][Modal] Add migration guide and codemod for deprecated p…

…rops (mui#45021)
sai6855 · Jan 15, 2025 · 767c2a4 · 767c2a4
1 parent f9949a8
commit 767c2a4
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 0 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
@@ -1499,6 +1499,28 @@ The Modal's `componentsProps` prop was deprecated in favor of `slotProps`:
  >
 ```
 
+### BackdropProps
+
+The Modal's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:
+
+```diff
+ <Modal
+-  BackdropProps={{ timeout: 500 }}
++  slotProps={{ backdrop: { timeout: 500 } }}
+ >
+```
+
+### BackdropComponent
+
+The Modal's `BackdropComponent` prop was deprecated in favor of `slots.backdrop`:
+
+```diff
+ <Modal
+-  BackdropComponent={Backdrop}
++  slots={{ backdrop: Backdrop }}
+ >
+```
+
 ## OutlinedInput
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#outlined-input-props) below to migrate the code as described in the following sections:

diff --git a/packages/mui-codemod/src/deprecations/modal-props/modal-props.js b/packages/mui-codemod/src/deprecations/modal-props/modal-props.js
@@ -1,3 +1,5 @@
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+import movePropIntoSlots from '../utils/movePropIntoSlots';
 import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
 
 /**
@@ -11,5 +13,19 @@ export default function transformer(file, api, options) {
 
   replaceComponentsWithSlots(j, { root, componentName: 'Modal' });
 
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Modal',
+    propName: 'BackdropComponent',
+    slotName: 'backdrop',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Modal',
+    propName: 'BackdropProps',
+    slotName: 'backdrop',
+  });
+
   return root.toSource(printOptions);
 }
diff --git a/packages/mui-codemod/src/deprecations/modal-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/modal-props/test-cases/actual.js
@@ -18,3 +18,9 @@ import Modal from '@mui/material/Modal';
   slotProps={{ root: slotsRootProps }}
   componentsProps={{ root: componentsRootProps }}
 />;
+<Modal
+  BackdropComponent={Backdrop}
+  BackdropProps={{
+    timeout: 500,
+  }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/modal-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/modal-props/test-cases/expected.js
@@ -22,3 +22,13 @@ import Modal from '@mui/material/Modal';
     ...componentsRootProps,
     ...slotsRootProps
   } }} />;
+<Modal
+  slots={{
+    backdrop: Backdrop
+  }}
+  slotProps={{
+    backdrop: {
+      timeout: 500,
+    }
+  }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/modal-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/modal-props/test-cases/theme.actual.js
@@ -35,3 +35,14 @@ fn({
     },
   },
 });
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      BackdropProps: {
+        timeout: 500,
+      },
+      BackdropComponent: Backdrop,
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/modal-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/modal-props/test-cases/theme.expected.js
@@ -52,3 +52,19 @@ fn({
     },
   },
 });
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      slots: {
+        backdrop: Backdrop
+      },
+
+      slotProps: {
+        backdrop: {
+          timeout: 500,
+        }
+      }
+    },
+  },
+});