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

docs/pages/material-ui/api/chip.json

@@ -25,6 +25,17 @@
       "default": "'medium'"
     },
     "skipFocusWhenDisabled": { "type": { "name": "bool" }, "default": "false" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ label?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ label?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -42,6 +53,20 @@
   },
   "name": "Chip",
   "imports": ["import Chip from '@mui/material/Chip';", "import { Chip } from '@mui/material';"],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "div",
+      "class": "MuiChip-root"
+    },
+    {
+      "name": "label",
+      "description": "The component that renders the label.",
+      "default": "span",
+      "class": "MuiChip-label"
+    }
+  ],
   "classes": [
     {
       "key": "avatar",
@@ -287,12 +312,6 @@
       "isGlobal": false,
       "isDeprecated": true
     },
-    {
-      "key": "label",
-      "className": "MuiChip-label",
-      "description": "Styles applied to the label `span` element.",
-      "isGlobal": false
-    },
     {
       "key": "labelMedium",
       "className": "MuiChip-labelMedium",
@@ -327,12 +346,6 @@
       "isGlobal": false,
       "isDeprecated": true
     },
-    {
-      "key": "root",
-      "className": "MuiChip-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "sizeMedium",
       "className": "MuiChip-sizeMedium",

docs/translations/api-docs/chip/chip.json

@@ -28,6 +28,8 @@
     "skipFocusWhenDisabled": {
       "description": "If <code>true</code>, allows the disabled chip to escape focus. If <code>false</code>, allows the disabled chip to receive focus."
     },
+    "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."
     },
@@ -235,10 +237,6 @@
       "conditions": "<code>size=\"small\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-icon\">.MuiChip-icon</a> and <a href=\"/material-ui/api/chip/#chip-classes-sizeSmall\">.MuiChip-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
-    "label": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the label <code>span</code> element"
-    },
     "labelMedium": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the label <code>span</code> element",
@@ -268,7 +266,6 @@
       "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-outlined\">.MuiChip-outlined</a> and <a href=\"/material-ui/api/chip/#chip-classes-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
-    "root": { "description": "Styles applied to the root element." },
     "sizeMedium": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -279,5 +276,9 @@
       "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "label": "The component that renders the label.",
+    "root": "The component that renders the root."
   }
 }

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

@@ -1,10 +1,42 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
+import { CreateSlotsAndSlotProps, SlotProps } from '..';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ChipClasses } from './chipClasses';
 
+export interface ChipSlots {
+  /**
+   * The component that renders the root.
+   * @default div
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label: React.ElementType;
+}
+
+export type ChipSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ChipSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the div element.
+     */
+    root: SlotProps<'div', {}, ChipOwnerState>;
+    /**
+     * Props forwarded to the label slot.
+     * By default, the avaible props are based on the span element.
+     */
+    label: SlotProps<'span', {}, ChipOwnerState>;
+  }
+>;
+
+export interface ChipOwnerState extends Omit<ChipProps, 'slots' | 'slotProps'> {}
+
 export interface ChipPropsVariantOverrides {}
 
 export interface ChipPropsSizeOverrides {}
@@ -96,7 +128,7 @@ export interface ChipTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & ChipOwnProps;
+  props: AdditionalProps & ChipOwnProps & ChipSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }
 

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

@@ -14,6 +14,7 @@ import memoTheme from '../utils/memoTheme';
 import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, disabled, size, color, iconColor, onDelete, clickable, variant } = ownerState;
@@ -400,6 +401,8 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     variant = 'filled',
     tabIndex,
     skipFocusWhenDisabled = false, // TODO v6: Rename to `focusableWhenDisabled`.
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -503,26 +506,57 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     }
   }
 
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: ChipRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    ownerState,
+    // The `component` prop is preserved because `Chip` relies on it for internal logic. If `shouldForwardComponentProp` were `false`, `useSlot` would remove the `component` prop, potentially breaking the component's behavior.
+    shouldForwardComponentProp: true,
+    ref: handleRef,
+    className: clsx(classes.root, className),
+    additionalProps: {
+      disabled: clickable && disabled ? true : undefined,
+      tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
+      ...moreProps,
+    },
+    getSlotProps: (handlers) => ({
+      ...handlers,
+      onClick: (event) => {
+        handlers.onClick?.(event);
+        onClick(event);
+      },
+      onKeyDown: (event) => {
+        handlers.onKeyDown?.(event);
+        handleKeyDown(event);
+      },
+      onKeyUp: (event) => {
+        handlers.onKeyUp?.(event);
+        handleKeyUp(event);
+      },
+    }),
+  });
+
+  const [LabelSlot, labelProps] = useSlot('label', {
+    elementType: ChipLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label,
+  });
+
   return (
-    <ChipRoot
-      as={component}
-      className={clsx(classes.root, className)}
-      disabled={clickable && disabled ? true : undefined}
-      onClick={onClick}
-      onKeyDown={handleKeyDown}
-      onKeyUp={handleKeyUp}
-      ref={handleRef}
-      tabIndex={skipFocusWhenDisabled && disabled ? -1 : tabIndex}
-      ownerState={ownerState}
-      {...moreProps}
-      {...other}
-    >
+    <RootSlot as={component} {...rootProps}>
       {avatar || icon}
-      <ChipLabel className={classes.label} ownerState={ownerState}>
-        {label}
-      </ChipLabel>
+      <LabelSlot {...labelProps}>{label}</LabelSlot>
       {deleteIcon}
-    </ChipRoot>
+    </RootSlot>
   );
 });
 
@@ -620,6 +654,22 @@ Chip.propTypes /* remove-proptypes */ = {
    * @default false
    */
   skipFocusWhenDisabled: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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

@@ -30,6 +30,14 @@ describe('<Chip />', () => {
     refInstanceof: window.HTMLDivElement,
     testComponentPropWith: 'span',
     skip: ['componentsProp'],
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+      },
+      label: {
+        expectedClassName: classes.label,
+      },
+    },
   }));
 
   describe('text only', () => {