[material-ui][MobileStepper] deprecate LinearProgressProps and complete slots, slotProps

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

@@ -1469,6 +1469,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/src/deprecations/all/deprecations-all.js

@@ -32,6 +32,7 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformTooltipProps from '../tooltip-props';
 import transformTablePaginationProps from '../table-pagination-props';
 import transformCardHeaderProps from '../card-header-props';
+import transformMobileStepperProps from '../mobile-stepper-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -72,6 +73,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformTooltipProps(file, api, options);
   file.source = transformTablePaginationProps(file, api, options);
   file.source = transformCardHeaderProps(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,13 @@
+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' }],
+    });
+  });
+});

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-material/src/MobileStepper/MobileStepper.d.ts

@@ -4,8 +4,73 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 import { LinearProgressProps } from '../LinearProgress';
 import { MobileStepperClasses } from './mobileStepperClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface MobileStepperProps extends StandardProps<PaperProps, 'children' | 'variant'> {
+export interface MobileStepperSlots {
+  /**
+   * The component that renders the root slot.
+   * @default Paper
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the progress slot.
+   * @default LinearProgress
+   */
+  progress: React.ElementType;
+  /**
+   * The component that renders the dots slot.
+   * @default 'div'
+   */
+  dots: React.ElementType;
+  /**
+   * The component that renders the dot slot.
+   * @default 'div'
+   */
+  dot: React.ElementType;
+}
+
+export interface MobileStepperRootSlotPropsOverrides {}
+export interface MobileStepperProgressSlotPropsOverrides {}
+export interface MobileStepperDotsSlotPropsOverrides {}
+export interface MobileStepperDotSlotPropsOverrides {}
+
+export type MobileStepperSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  MobileStepperSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    root: SlotProps<
+      React.ElementType<PaperProps>,
+      MobileStepperRootSlotPropsOverrides,
+      MobileStepperOwnerState
+    >;
+    /**
+     * Props forwarded to the progress slot.
+     * By default, the avaible props are based on the [LinearProgress](https://mui.com/material-ui/api/linear-progress/#props) component.
+     */
+    progress: SlotProps<
+      React.ElementType<LinearProgressProps>,
+      MobileStepperProgressSlotPropsOverrides,
+      MobileStepperOwnerState
+    >;
+    /**
+     * Props forwarded to the dots slot.
+     * By default, the avaible props are based on the div element.
+     */
+    dots: SlotProps<'div', MobileStepperDotsSlotPropsOverrides, MobileStepperOwnerState>;
+    /**
+     * Props forwarded to the dot slot.
+     * By default, the avaible props are based on the div element.
+     */
+    dot: SlotProps<'div', MobileStepperDotSlotPropsOverrides, MobileStepperOwnerState>;
+  }
+>;
+
+export interface MobileStepperProps
+  extends StandardProps<PaperProps, 'children' | 'variant'>,
+    MobileStepperSlotsAndSlotProps {
   /**
    * Set the active step (zero based index).
    * Defines which dot is highlighted when the variant is 'dots'.
@@ -22,6 +87,7 @@ export interface MobileStepperProps extends StandardProps<PaperProps, 'children'
   classes?: Partial<MobileStepperClasses>;
   /**
    * Props applied to the `LinearProgress` element.
+   * @deprecated Use `slotProps.progress` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   LinearProgressProps?: Partial<LinearProgressProps>;
   /**
@@ -48,6 +114,8 @@ export interface MobileStepperProps extends StandardProps<PaperProps, 'children'
   variant?: 'text' | 'dots' | 'progress';
 }
 
+export interface MobileStepperOwnerState extends Omit<MobileStepperProps, 'slots' | 'slotProps'> {}
+
 /**
  *
  * Demos: