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

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>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."
+    },
     "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.\n[Follow this guide](/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. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

packages/mui-material/src/StepContent/StepContent.d.ts

@@ -4,8 +4,29 @@ import { InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { StepContentClasses } from './stepContentClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface StepContentSlots {
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;
+}
+
+export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  StepContentSlots,
+  {
+    transition: SlotProps<React.ElementType<TransitionProps>, {}, StepContentOwnerState>;
+  }
+>;
+
+export interface StepContentProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    StepContentSlotsAndSlotProps {
   /**
    * The content of the component.
    */
@@ -22,6 +43,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & { children: React.ReactElement<any, any> }
@@ -37,10 +59,13 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps?: TransitionProps;
 }
 
+export interface StepContentOwnerState extends StepContentProps {}
+
 export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>;
 
 /**

packages/mui-material/src/StepContent/StepContent.js

@@ -8,6 +8,7 @@ import Collapse from '../Collapse';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepContentUtilityClass } from './stepContentClasses';
+import useSlot from '../utils/useSlot';
 
 const useThemeProps = createUseThemeProps('MuiStepContent');
 
@@ -60,6 +61,8 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) {
     TransitionComponent = Collapse,
     transitionDuration: transitionDurationProp = 'auto',
     TransitionProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -81,6 +84,17 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) {
     transitionDuration = undefined;
   }
 
+  const externalForwardedProps = {
+    slots: { transition: TransitionComponent, ...slots },
+    slotProps: { transition: TransitionProps, ...slotProps },
+  };
+
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: Collapse,
+    externalForwardedProps,
+    ownerState,
+  });
+
   return (
     <StepContentRoot
       className={clsx(classes.root, className)}
@@ -89,13 +103,12 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) {
       {...other}
     >
       <StepContentTransition
-        as={TransitionComponent}
+        as={TransitionSlot}
         in={active || expanded}
         className={classes.transition}
-        ownerState={ownerState}
         timeout={transitionDuration}
         unmountOnExit
-        {...TransitionProps}
+        {...transitionProps}
       >
         {children}
       </StepContentTransition>
@@ -120,6 +133,20 @@ StepContent.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    transition: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -132,6 +159,7 @@ StepContent.propTypes /* remove-proptypes */ = {
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: PropTypes.elementType,
   /**
@@ -153,6 +181,7 @@ StepContent.propTypes /* remove-proptypes */ = {
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps: PropTypes.object,
 };