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

docs/pages/material-ui/api/speed-dial-action.json

@@ -6,6 +6,20 @@
     "icon": { "type": { "name": "node" } },
     "id": { "type": { "name": "string" } },
     "open": { "type": { "name": "bool" } },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ fab?: func<br>&#124;&nbsp;object, staticTooltip?: func<br>&#124;&nbsp;object, staticTooltipLabel?: func<br>&#124;&nbsp;object, tooltip?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ fab?: elementType, staticTooltip?: elementType, staticTooltipLabel?: elementType, tooltip?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -29,37 +43,45 @@
     "import SpeedDialAction from '@mui/material/SpeedDialAction';",
     "import { SpeedDialAction } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "fab",
-      "className": "MuiSpeedDialAction-fab",
-      "description": "Styles applied to the Fab component.",
-      "isGlobal": false
+      "name": "fab",
+      "description": "The component that renders the fab.",
+      "default": "Fab",
+      "class": "MuiSpeedDialAction-fab"
+    },
+    {
+      "name": "tooltip",
+      "description": "The component that renders the tooltip.",
+      "default": "Tooltip",
+      "class": null
+    },
+    {
+      "name": "staticTooltip",
+      "description": "The component that renders the static tooltip.",
+      "default": "'span'",
+      "class": "MuiSpeedDialAction-staticTooltip"
     },
+    {
+      "name": "staticTooltipLabel",
+      "description": "The component that renders the static tooltip label.",
+      "default": "'span'",
+      "class": "MuiSpeedDialAction-staticTooltipLabel"
+    }
+  ],
+  "classes": [
     {
       "key": "fabClosed",
       "className": "MuiSpeedDialAction-fabClosed",
       "description": "Styles applied to the Fab component if `open={false}`.",
       "isGlobal": false
     },
-    {
-      "key": "staticTooltip",
-      "className": "MuiSpeedDialAction-staticTooltip",
-      "description": "Styles applied to the root element if `tooltipOpen={true}`.",
-      "isGlobal": false
-    },
     {
       "key": "staticTooltipClosed",
       "className": "MuiSpeedDialAction-staticTooltipClosed",
       "description": "Styles applied to the root element if `tooltipOpen={true}` and `open={false}`.",
       "isGlobal": false
     },
-    {
-      "key": "staticTooltipLabel",
-      "className": "MuiSpeedDialAction-staticTooltipLabel",
-      "description": "Styles applied to the static tooltip label if `tooltipOpen={true}`.",
-      "isGlobal": false
-    },
     {
       "key": "tooltipPlacementLeft",
       "className": "MuiSpeedDialAction-tooltipPlacementLeft",

docs/translations/api-docs/speed-dial-action/speed-dial-action.json

@@ -13,6 +13,8 @@
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."
     },
     "open": { "description": "If <code>true</code>, the component is shown." },
+    "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."
     },
@@ -24,32 +26,27 @@
     "tooltipTitle": { "description": "Label to display in the tooltip." }
   },
   "classDescriptions": {
-    "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" },
     "fabClosed": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Fab component",
       "conditions": "<code>open={false}</code>"
     },
-    "staticTooltip": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>tooltipOpen={true}</code>"
-    },
     "staticTooltipClosed": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>tooltipOpen={true}</code> and <code>open={false}</code>"
     },
-    "staticTooltipLabel": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the static tooltip label",
-      "conditions": "<code>tooltipOpen={true}</code>"
-    },
     "tooltipPlacementLeft": {
       "description": "Styles applied to the root element if <code>tooltipOpen={true}</code> and `tooltipPlacement=&quot;left&quot;``"
     },
     "tooltipPlacementRight": {
       "description": "Styles applied to the root element if <code>tooltipOpen={true}</code> and `tooltipPlacement=&quot;right&quot;``"
     }
+  },
+  "slotDescriptions": {
+    "fab": "The component that renders the fab.",
+    "staticTooltip": "The component that renders the static tooltip.",
+    "staticTooltipLabel": "The component that renders the static tooltip label.",
+    "tooltip": "The component that renders the tooltip."
   }
 }

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

@@ -5,8 +5,81 @@ import { InternalStandardProps as StandardProps } from '..';
 import { FabProps } from '../Fab';
 import { TooltipProps } from '../Tooltip';
 import { SpeedDialActionClasses } from './speedDialActionClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface SpeedDialActionProps extends StandardProps<Partial<TooltipProps>, 'children'> {
+export interface SpeedDialActionSlots {
+  /**
+   * The component that renders the fab.
+   * @default Fab
+   */
+  fab?: React.ElementType;
+  /**
+   * The component that renders the tooltip.
+   * @default Tooltip
+   */
+  tooltip?: React.ElementType;
+  /**
+   * The component that renders the static tooltip.
+   * @default 'span'
+   */
+  staticTooltip?: React.ElementType;
+  /**
+   * The component that renders the static tooltip label.
+   * @default 'span'
+   */
+  staticTooltipLabel?: React.ElementType;
+}
+
+export interface SpeedDialActionFabSlotPropsOverrides {}
+export interface SpeedDialActionTooltipSlotPropsOverrides {}
+export interface SpeedDialActionStaticTooltipSlotPropsOverrides {}
+export interface SpeedDialActionStaticTooltipLabelSlotPropsOverrides {}
+
+export type SpeedDialActionSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  SpeedDialActionSlots,
+  {
+    /**
+     * Props forwarded to the fab slot.
+     * By default, the avaible props are based on the [Fab](https://mui.com/material-ui/api/fab/#props) component.
+     */
+    fab: SlotProps<
+      React.ElementType<FabProps>,
+      SpeedDialActionFabSlotPropsOverrides,
+      SpeedDialActionOwnerState
+    >;
+    /**
+     * Props forwarded to the tooltip slot.
+     * By default, the avaible props are based on the [Tooltip](https://mui.com/material-ui/api/tooltip/#props) component.
+     */
+    tooltip: SlotProps<
+      React.ElementType<TooltipProps>,
+      SpeedDialActionTooltipSlotPropsOverrides,
+      SpeedDialActionOwnerState
+    >;
+    /**
+     * Props forwarded to the static tooltip slot.
+     * By default, the avaible props are based on a span element.
+     */
+    staticTooltip: SlotProps<
+      'span',
+      SpeedDialActionStaticTooltipSlotPropsOverrides,
+      SpeedDialActionOwnerState
+    >;
+    /**
+     * Props forwarded to the static tooltip label slot.
+     * By default, the avaible props are based on a span element.
+     */
+    staticTooltipLabel: SlotProps<
+      'span',
+      SpeedDialActionStaticTooltipLabelSlotPropsOverrides,
+      SpeedDialActionOwnerState
+    >;
+  }
+>;
+
+export interface SpeedDialActionProps
+  extends Omit<StandardProps<Partial<TooltipProps>, 'children'>, 'slotProps' | 'slots'>,
+    SpeedDialActionSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -61,3 +134,6 @@ export interface SpeedDialActionProps extends StandardProps<Partial<TooltipProps
  * - inherits [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
 export default function SpeedDialAction(props: SpeedDialActionProps): React.JSX.Element;
+
+export interface SpeedDialActionOwnerState
+  extends Omit<SpeedDialActionProps, 'slots' | 'slotProps'> {}

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

@@ -12,6 +12,7 @@ import Fab from '../Fab';
 import Tooltip from '../Tooltip';
 import capitalize from '../utils/capitalize';
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { open, tooltipPlacement, classes } = ownerState;
@@ -155,6 +156,8 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref)
     tooltipOpen: tooltipOpenProp = false,
     tooltipPlacement = 'left',
     tooltipTitle,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -173,44 +176,81 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref)
 
   const transitionStyle = { transitionDelay: `${delay}ms` };
 
-  const fab = (
-    <SpeedDialActionFab
-      size="small"
-      className={clsx(classes.fab, className)}
-      tabIndex={-1}
-      role="menuitem"
-      ownerState={ownerState}
-      {...FabProps}
-      style={{
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      fab: FabProps,
+      ...slotProps,
+    },
+  };
+
+  const [FabSlot, fabSlotProps] = useSlot('fab', {
+    elementType: SpeedDialActionFab,
+    externalForwardedProps,
+    ownerState,
+    shouldForwardComponentProp: true,
+    className: clsx(classes.fab, className),
+    additionalProps: {
+      style: {
         ...transitionStyle,
         ...FabProps.style,
-      }}
-    >
-      {icon}
-    </SpeedDialActionFab>
-  );
+      },
+      tabIndex: -1,
+      role: 'menuitem',
+      size: 'small',
+    },
+  });
+
+  const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', {
+    elementType: Tooltip,
+    externalForwardedProps,
+    shouldForwardComponentProp: true,
+    ref,
+    additionalProps: {
+      title: tooltipTitle,
+      placement: tooltipPlacement,
+      onClose: handleTooltipClose,
+      onOpen: handleTooltipOpen,
+      open: open && tooltipOpen,
+      classes: TooltipClasses,
+      id,
+    },
+  });
+
+  const [StaticTooltipSlot, staticTooltipSlotProps] = useSlot('staticTooltip', {
+    elementType: SpeedDialActionStaticTooltip,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.staticTooltip,
+    additionalProps: {
+      id,
+    },
+  });
+
+  const [StaticTooltipLabelSlot, staticTooltipLabelSlotProps] = useSlot('staticTooltipLabel', {
+    elementType: SpeedDialActionStaticTooltipLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.staticTooltipLabel,
+    additionalProps: {
+      style: transitionStyle,
+      id: `${id}-label`,
+    },
+  });
+
+  const fab = <FabSlot {...fabSlotProps}>{icon}</FabSlot>;
 
   if (tooltipOpenProp) {
     return (
-      <SpeedDialActionStaticTooltip
-        id={id}
-        ref={ref}
-        className={classes.staticTooltip}
-        ownerState={ownerState}
-        {...other}
-      >
-        <SpeedDialActionStaticTooltipLabel
-          style={transitionStyle}
-          id={`${id}-label`}
-          className={classes.staticTooltipLabel}
-          ownerState={ownerState}
-        >
+      <StaticTooltipSlot {...staticTooltipSlotProps} {...other}>
+        <StaticTooltipLabelSlot {...staticTooltipLabelSlotProps}>
           {tooltipTitle}
-        </SpeedDialActionStaticTooltipLabel>
+        </StaticTooltipLabelSlot>
         {React.cloneElement(fab, {
           'aria-labelledby': `${id}-label`,
         })}
-      </SpeedDialActionStaticTooltip>
+      </StaticTooltipSlot>
     );
   }
 
@@ -219,19 +259,9 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref)
   }
 
   return (
-    <Tooltip
-      id={id}
-      ref={ref}
-      title={tooltipTitle}
-      placement={tooltipPlacement}
-      onClose={handleTooltipClose}
-      onOpen={handleTooltipOpen}
-      open={open && tooltipOpen}
-      classes={TooltipClasses}
-      {...other}
-    >
+    <TooltipSlot {...tooltipSlotProps} {...other}>
       {fab}
-    </Tooltip>
+    </TooltipSlot>
   );
 });
 
@@ -271,6 +301,26 @@ SpeedDialAction.propTypes /* remove-proptypes */ = {
    * If `true`, the component is shown.
    */
   open: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    fab: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    staticTooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    staticTooltipLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    fab: PropTypes.elementType,
+    staticTooltip: PropTypes.elementType,
+    staticTooltipLabel: PropTypes.elementType,
+    tooltip: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */