[material-ui][StepLabel] Add missing root slot (#45603)

Author: sai6855

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

@@ -14,12 +14,15 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ label?: func<br>&#124;&nbsp;object, stepIcon?: func<br>&#124;&nbsp;object }"
+        "description": "{ label?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, stepIcon?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ label?: elementType, stepIcon?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ label?: elementType, root?: elementType, stepIcon?: elementType }"
+      },
       "default": "{}"
     },
     "StepIconComponent": {
@@ -46,6 +49,12 @@
     "import { StepLabel } from '@mui/material';"
   ],
   "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "span",
+      "class": "MuiStepLabel-root"
+    },
     {
       "name": "label",
       "description": "The component that renders the label.",
@@ -107,12 +116,6 @@
       "description": "Styles applied to the container element which wraps label and `optional`.",
       "isGlobal": false
     },
-    {
-      "key": "root",
-      "className": "MuiStepLabel-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "vertical",
       "className": "MuiStepLabel-vertical",

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

@@ -60,7 +60,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the container element which wraps label and <code>optional</code>"
     },
-    "root": { "description": "Styles applied to the root element." },
     "vertical": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -69,6 +68,7 @@
   },
   "slotDescriptions": {
     "label": "The component that renders the label.",
+    "root": "The component that renders the root.",
     "stepIcon": "The component to render in place of the <a href=\"https://mui.com/material-ui/api/step-icon/\"><code>StepIcon</code></a>."
   }
 }

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

@@ -7,6 +7,11 @@ import { StepLabelClasses } from './stepLabelClasses';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface StepLabelSlots {
+  /**
+   * The component that renders the root.
+   * @default span
+   */
+  root: React.ElementType;
   /**
    * The component that renders the label.
    * @default span
@@ -21,7 +26,20 @@ export interface StepLabelSlots {
 export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
   StepLabelSlots,
   {
-    label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>;
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the span element.
+     */
+    root: SlotProps<'span', {}, StepLabelOwnerState>;
+    /**
+     * Props forwarded to the label slot.
+     * By default, the avaible props are based on the span element.
+     */
+    label: SlotProps<'span', {}, StepLabelOwnerState>;
+    /**
+     * Props forwarded to the stepIcon slot.
+     * By default, the avaible props are based on the div element.
+     */
     stepIcon: SlotProps<React.ElementType<StepIconProps>, {}, StepLabelOwnerState>;
   }
 >;

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

@@ -175,6 +175,17 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) {
     },
   };
 
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: StepLabelRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    ownerState,
+    ref,
+    className: clsx(classes.root, className),
+  });
+
   const [LabelSlot, labelProps] = useSlot('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
@@ -188,12 +199,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) {
   });
 
   return (
-    <StepLabelRoot
-      className={clsx(classes.root, className)}
-      ref={ref}
-      ownerState={ownerState}
-      {...other}
-    >
+    <RootSlot {...rootProps}>
       {icon || StepIconSlot ? (
         <StepLabelIconContainer className={classes.iconContainer} ownerState={ownerState}>
           <StepIconSlot
@@ -213,7 +219,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) {
         ) : null}
         {optional}
       </StepLabelLabelContainer>
-    </StepLabelRoot>
+    </RootSlot>
   );
 });
 
@@ -261,6 +267,7 @@ StepLabel.propTypes /* remove-proptypes */ = {
    */
   slotProps: PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     stepIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
@@ -269,6 +276,7 @@ StepLabel.propTypes /* remove-proptypes */ = {
    */
   slots: PropTypes.shape({
     label: PropTypes.elementType,
+    root: PropTypes.elementType,
     stepIcon: PropTypes.elementType,
   }),
   /**

packages/mui-material/src/StepLabel/StepLabel.test.js

@@ -20,6 +20,7 @@ describe('<StepLabel />', () => {
     testVariantProps: { error: true },
     slots: {
       label: { expectedClassName: classes.label },
+      root: { expectedClassName: classes.root },
     },
     skip: ['componentProp', 'componentsProp'],
   }));