[material-ui][StepContent] Add slots and slotProps

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1868,6 +1868,36 @@ Here's how to migrate:
  },
 ```
 
+## StepContent
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-content-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/step-content-props <path>
+```
+
+### TransitionComponent
+
+The StepContent's `TransitionComponent` prop was deprecated in favor of `slots.transition`:
+
+```diff
+ <StepContent
+-  TransitionComponent={CustomTransition}
++  slots={{ transition: CustomTransition }}
+ />
+```
+
+### TransitionProps
+
+The StepContent's `TransitionProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <StepContent
+-  TransitionProps={{ unmountOnExit: true }}
++  slotProps={{ transition: { unmountOnExit: true } }}
+ />
+```
+
 ## SpeedDial
 
 Use the [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 sections:

docs/pages/material-ui/api/step-content.json

@@ -2,28 +2,53 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" },
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "default": "Collapse",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "transitionDuration": {
       "type": {
         "name": "union",
         "description": "'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "default": "'auto'"
     },
-    "TransitionProps": { "type": { "name": "object" } }
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
   },
   "name": "StepContent",
   "imports": [
     "import StepContent from '@mui/material/StepContent';",
     "import { StepContent } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "transition",
+      "description": "The component that renders the transition slot.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Collapse",
+      "class": "MuiStepContent-transition"
+    }
+  ],
   "classes": [
     {
       "key": "last",
@@ -36,12 +61,6 @@
       "className": "MuiStepContent-root",
       "description": "Styles applied to the root element.",
       "isGlobal": false
-    },
-    {
-      "key": "transition",
-      "className": "MuiStepContent-transition",
-      "description": "Styles applied to the Transition component.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/step-content/step-content.json

@@ -3,6 +3,8 @@
   "propDescriptions": {
     "children": { "description": "The content of the component." },
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -22,10 +24,9 @@
       "nodeName": "the root element",
       "conditions": "<code>last={true}</code> (controlled by <code>Step</code>)"
     },
-    "root": { "description": "Styles applied to the root element." },
-    "transition": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Transition component"
-    }
+    "root": { "description": "Styles applied to the root element." }
+  },
+  "slotDescriptions": {
+    "transition": "The component that renders the transition slot. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

packages/mui-codemod/README.md

@@ -1509,6 +1509,21 @@ JS transforms:
 npx @mui/codemod@next deprecations/step-connector-classes <path>
 ```
 
+#### `step-content-props`
+
+```diff
+ <StepContent
+-  TransitionComponent={CustomTransition}
+-  TransitionProps={{ unmountOnExit: true }}
++  slots={{ transition: CustomTransition }}
++  slotProps={{ transition: { unmountOnExit: true } }}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/step-content-props <path>
+```
+
 #### `step-label-props`
 
 ```diff

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -22,6 +22,7 @@ import transformPaginationItemClasses from '../pagination-item-classes';
 import transformSpeedDialProps from '../speed-dial-props';
 import transformTableSortLabelClasses from '../table-sort-label-classes';
 import transformStepConnectorClasses from '../step-connector-classes';
+import transformStepContentProps from '../step-content-props';
 import transformStepLabelProps from '../step-label-props';
 import transformTextFieldProps from '../text-field-props';
 import transformTabClasses from '../tab-classes';
@@ -56,6 +57,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformPaginationItemClasses(file, api, options);
   file.source = transformSpeedDialProps(file, api, options);
   file.source = transformStepConnectorClasses(file, api, options);
+  file.source = transformStepContentProps(file, api, options);
   file.source = transformStepLabelProps(file, api, options);
   file.source = transformTableSortLabelClasses(file, api, options);
   file.source = transformTextFieldProps(file, api, options);

packages/mui-codemod/src/deprecations/step-content-props/index.js

@@ -0,0 +1 @@
+export { default } from './step-content-props';

packages/mui-codemod/src/deprecations/step-content-props/step-content-props.js

@@ -0,0 +1,28 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'StepContent',
+    propName: 'TransitionComponent',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'StepContent',
+    propName: 'TransitionProps',
+    slotName: 'transition',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/step-content-props/step-content-props.test.js

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './step-content-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('step-content-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] step-content-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/step-content-props/test-cases/actual.js

@@ -0,0 +1,32 @@
+import StepContent from '@mui/material/StepContent';
+import { StepContent as MyStepContent } from '@mui/material';
+
+<StepContent TransitionComponent={CustomTransition} TransitionProps={{ unmountOnExit: true }} />;
+<MyStepContent TransitionComponent={CustomTransition} TransitionProps={transitionVars} />;
+<StepContent
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    root: 'div',
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+  }}
+/>;
+<MyStepContent
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    ...outerSlots,
+  }}
+  slotProps={{
+    ...outerSlotProps,
+  }}
+/>;
+<StepContent TransitionComponent={ComponentTransition} slots={{ transition: SlotTransition }} />;
+<StepContent TransitionProps={{ unmountOnExit: true }} slotProps={{ transition: { id: 'test' } }} />;
+// should skip non MUI components
+<NonMuiStepContent
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

packages/mui-codemod/src/deprecations/step-content-props/test-cases/expected.js

@@ -0,0 +1,42 @@
+import StepContent from '@mui/material/StepContent';
+import { StepContent as MyStepContent } from '@mui/material';
+
+<StepContent slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: { unmountOnExit: true }
+}} />;
+<MyStepContent slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: transitionVars
+}} />;
+<StepContent
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+    transition: { unmountOnExit: true }
+  }} />;
+<MyStepContent
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+    transition: { unmountOnExit: true }
+  }} />;
+<StepContent slots={{ transition: SlotTransition }} />;
+<StepContent
+  slotProps={{ transition: {
+    ...{ unmountOnExit: true },
+    ...{ id: 'test' }
+  } }} />;
+// should skip non MUI components
+<NonMuiStepContent
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

packages/mui-codemod/src/deprecations/step-content-props/test-cases/theme.actual.js

@@ -0,0 +1,26 @@
+fn({
+  MuiStepContent: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: { unmountOnExit: true },
+    },
+  },
+});
+
+fn({
+  MuiStepContent: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      slots: { transition: SlotTransition },
+    },
+  },
+});
+
+fn({
+  MuiStepContent: {
+    defaultProps: {
+      slotProps: { transition: { id: 'test' } },
+      TransitionProps: { unmountOnExit: true },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/step-content-props/test-cases/theme.expected.js

@@ -0,0 +1,32 @@
+fn({
+  MuiStepContent: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+
+      slotProps: {
+        transition: { unmountOnExit: true }
+      }
+    },
+  },
+});
+
+fn({
+  MuiStepContent: {
+    defaultProps: {
+      slots: { transition: SlotTransition }
+    },
+  },
+});
+
+fn({
+  MuiStepContent: {
+    defaultProps: {
+      slotProps: { transition: {
+        ...{ unmountOnExit: true },
+        ...{ id: 'test' }
+      } }
+    },
+  },
+});