[material-ui][MobileStepper] deprecate LinearProgressProps and comp…

…lete `slots`, `slotProps` (@siriwatknp) (#45242)

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

@@ -1548,6 +1548,25 @@ Here's how to migrate:
  }
 ```
 
+## MobileStepper
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#mobile-stepper-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/mobile-stepper-props <path>
+```
+
+### LinearProgressProps
+
+The MobileStepper's `LinearProgressProps` prop was deprecated in favor of `slotProps.progress`:
+
+```diff
+ <MobileStepper
+-  LinearProgressProps={{ color: 'primary' }}
++  slotProps={{ progress: { color: 'primary' } }}
+ />
+```
+
 ## Modal
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#modal-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/mobile-stepper.json

@@ -4,7 +4,11 @@
     "activeStep": { "type": { "name": "custom", "description": "integer" }, "default": "0" },
     "backButton": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "LinearProgressProps": { "type": { "name": "object" } },
+    "LinearProgressProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.progress</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."
+    },
     "nextButton": { "type": { "name": "node" } },
     "position": {
       "type": {
@@ -13,6 +17,20 @@
       },
       "default": "'bottom'"
     },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ dot?: func<br>&#124;&nbsp;object, dots?: func<br>&#124;&nbsp;object, progress?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ dot?: elementType, dots?: elementType, progress?: elementType, root?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -33,25 +51,39 @@
     "import MobileStepper from '@mui/material/MobileStepper';",
     "import { MobileStepper } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "dot",
-      "className": "MuiMobileStepper-dot",
-      "description": "Styles applied to each dot if `variant=\"dots\"`.",
-      "isGlobal": false
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "Paper",
+      "class": "MuiMobileStepper-root"
+    },
+    {
+      "name": "progress",
+      "description": "The component that renders the progress slot.",
+      "default": "LinearProgress",
+      "class": "MuiMobileStepper-progress"
+    },
+    {
+      "name": "dots",
+      "description": "The component that renders the dots slot.",
+      "default": "'div'",
+      "class": "MuiMobileStepper-dots"
     },
+    {
+      "name": "dot",
+      "description": "The component that renders the dot slot.",
+      "default": "'div'",
+      "class": "MuiMobileStepper-dot"
+    }
+  ],
+  "classes": [
     {
       "key": "dotActive",
       "className": "MuiMobileStepper-dotActive",
       "description": "Styles applied to a dot if `variant=\"dots\"` and this is the active step.",
       "isGlobal": false
     },
-    {
-      "key": "dots",
-      "className": "MuiMobileStepper-dots",
-      "description": "Styles applied to the dots container if `variant=\"dots\"`.",
-      "isGlobal": false
-    },
     {
       "key": "positionBottom",
       "className": "MuiMobileStepper-positionBottom",
@@ -69,24 +101,11 @@
       "className": "MuiMobileStepper-positionTop",
       "description": "Styles applied to the root element if `position=\"top\"`.",
       "isGlobal": false
-    },
-    {
-      "key": "progress",
-      "className": "MuiMobileStepper-progress",
-      "description": "Styles applied to the Linear Progress component if `variant=\"progress\"`.",
-      "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiMobileStepper-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiMobileStepper",
-  "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-material/src/MobileStepper/MobileStepper.js",
   "inheritance": { "component": "Paper", "pathname": "/material-ui/api/paper/" },
   "demos": "<ul><li><a href=\"/material-ui/react-stepper/\">Stepper</a></li></ul>",

docs/translations/api-docs/mobile-stepper/mobile-stepper.json

@@ -15,28 +15,20 @@
       "description": "A next button element. For instance, it can be a <code>Button</code> or an <code>IconButton</code>."
     },
     "position": { "description": "Set the positioning type." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "steps": { "description": "The total steps." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
     "variant": { "description": "The variant to use." }
   },
   "classDescriptions": {
-    "dot": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "each dot",
-      "conditions": "<code>variant=\"dots\"</code>"
-    },
     "dotActive": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "a dot",
       "conditions": "<code>variant=\"dots\"</code> and this is the active step"
     },
-    "dots": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the dots container",
-      "conditions": "<code>variant=\"dots\"</code>"
-    },
     "positionBottom": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -51,12 +43,12 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"top\"</code>"
-    },
-    "progress": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the Linear Progress component",
-      "conditions": "<code>variant=\"progress\"</code>"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "dot": "The component that renders the dot slot.",
+    "dots": "The component that renders the dots slot.",
+    "progress": "The component that renders the progress slot.",
+    "root": "The component that renders the root slot."
   }
 }

packages/mui-codemod/README.md

@@ -1400,6 +1400,19 @@ npx @mui/codemod@latest deprecations/linear-progress-classes <path>
 npx @mui/codemod@latest deprecations/modal-props <path>
 ```
 
+#### `mobile-stepper-props`
+
+```diff
+ <MobileStepper
+-  LinearProgressProps={{ color: 'primary' }}
++  slotProps={{ progress: { color: 'primary' } }}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/mobile-stepper-props <path>
+```
+
 #### `pagination-item-classes`
 
 JS transforms:

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

@@ -34,6 +34,7 @@ import transformTooltipProps from '../tooltip-props';
 import transformTablePaginationProps from '../table-pagination-props';
 import transformCardHeaderProps from '../card-header-props';
 import transformSliderClasses from '../slider-classes';
+import transformMobileStepperProps from '../mobile-stepper-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -76,6 +77,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformTablePaginationProps(file, api, options);
   file.source = transformCardHeaderProps(file, api, options);
   file.source = transformSliderClasses(file, api, options);
+  file.source = transformMobileStepperProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/mobile-stepper-props/index.js

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

packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.js

@@ -0,0 +1,20 @@
+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;
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'MobileStepper',
+    propName: 'LinearProgressProps',
+    slotName: 'progress',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.test.js

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './mobile-stepper-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'mobile-stepper-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/actual.js

@@ -0,0 +1,15 @@
+import MobileStepper from '@mui/material/MobileStepper';
+import { MobileStepper as MyMobileStepper } from '@mui/material';
+
+<MobileStepper variant="progress" LinearProgressProps={{ variant: 'determinate' }} />;
+<MyMobileStepper
+  variant="progress"
+  LinearProgressProps={{ variant: 'determinate' }}
+  slotProps={{
+    progress: {
+      sx: { width: '100%' },
+    },
+  }}
+/>;
+
+<CustomMobileStepper LinearProgressProps={{ variant: 'determinate' }} />;

packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/expected.js

@@ -0,0 +1,19 @@
+import MobileStepper from '@mui/material/MobileStepper';
+import { MobileStepper as MyMobileStepper } from '@mui/material';
+
+<MobileStepper variant="progress" slotProps={{
+  progress: { variant: 'determinate' }
+}} />;
+<MyMobileStepper
+  variant="progress"
+  slotProps={{
+    progress: {
+      ...{ variant: 'determinate' },
+
+      ...{
+        sx: { width: '100%' },
+      }
+    },
+  }} />;
+
+<CustomMobileStepper LinearProgressProps={{ variant: 'determinate' }} />;

packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/theme.actual.js

@@ -0,0 +1,7 @@
+fn({
+  MuiMobileStepper: {
+    defaultProps: {
+      LinearProgressProps: { variant: 'determinate' },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/theme.expected.js

@@ -0,0 +1,9 @@
+fn({
+  MuiMobileStepper: {
+    defaultProps: {
+      slotProps: {
+        progress: { variant: 'determinate' }
+      },
+    },
+  },
+});