From 767c2a490027bd8afd99f98435d95701aa9e4eb0 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Wed, 15 Jan 2025 12:40:19 +0530
Subject: [PATCH] [material-ui][Modal] Add migration guide and codemod for
 deprecated props (#45021)

---
 .../migrating-from-deprecated-apis.md         | 22 +++++++++++++++++++
 .../deprecations/modal-props/modal-props.js   | 16 ++++++++++++++
 .../modal-props/test-cases/actual.js          |  6 +++++
 .../modal-props/test-cases/expected.js        | 10 +++++++++
 .../modal-props/test-cases/theme.actual.js    | 11 ++++++++++
 .../modal-props/test-cases/theme.expected.js  | 16 ++++++++++++++
 6 files changed, 81 insertions(+)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 6e5484cae23ae2..d7a58966f60079 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/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
index 4cb6e5b84c2a47..d1905389c19920 100644
--- 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
index 57880d9133c845..fbbead7801e633 100644
--- 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
index 632e0bb32880fe..5ffd51596cd4b3 100644
--- 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
index 7ed57d57522279..1d8f70b8eeb99d 100644
--- 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
index e1eb6c329fbdb1..f79f68233027b1 100644
--- 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,
+        }
+      }
+    },
+  },
+});