[material-ui][TableSortLabel] Add slots and slotProps (#44728)

mui · Jan 3, 2025 · 69f33fc · 69f33fc
1 parent b7c6ced
commit 69f33fc
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 32 deletions.
diff --git a/docs/pages/material-ui/api/table-sort-label.json b/docs/pages/material-ui/api/table-sort-label.json
@@ -9,6 +9,17 @@
     },
     "hideSortIcon": { "type": { "name": "bool" }, "default": "false" },
     "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDownwardIcon" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ icon?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ icon?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -22,6 +33,20 @@
     "import TableSortLabel from '@mui/material/TableSortLabel';",
     "import { TableSortLabel } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "span",
+      "class": "MuiTableSortLabel-root"
+    },
+    {
+      "name": "icon",
+      "description": "The component that renders the icon slot.",
+      "default": "ArrowDownwardIcon",
+      "class": "MuiTableSortLabel-icon"
+    }
+  ],
   "classes": [
     {
       "key": "active",
@@ -41,12 +66,6 @@
       "description": "Styles applied to the root element if `direction=\"desc\"`.",
       "isGlobal": false
     },
-    {
-      "key": "icon",
-      "className": "MuiTableSortLabel-icon",
-      "description": "Styles applied to the icon component.",
-      "isGlobal": false
-    },
     {
       "key": "iconDirectionAsc",
       "className": "MuiTableSortLabel-iconDirectionAsc",
@@ -60,12 +79,6 @@
       "description": "Styles applied to the icon component if `direction=\"desc\"`.",
       "isGlobal": false,
       "isDeprecated": true
-    },
-    {
-      "key": "root",
-      "className": "MuiTableSortLabel-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

diff --git a/docs/translations/api-docs/table-sort-label/table-sort-label.json b/docs/translations/api-docs/table-sort-label/table-sort-label.json
@@ -9,6 +9,8 @@
     "direction": { "description": "The current sort direction." },
     "hideSortIcon": { "description": "Hide sort icon when active is false." },
     "IconComponent": { "description": "Sort icon to use." },
+    "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."
     }
@@ -29,7 +31,6 @@
       "nodeName": "the root element",
       "conditions": "<code>direction=\"desc\"</code>"
     },
-    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" },
     "iconDirectionAsc": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the icon component",
@@ -41,7 +42,10 @@
       "nodeName": "the icon component",
       "conditions": "<code>direction=\"desc\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/table-sort-label/#table-sort-label-classes-icon\">.MuiTableSortLabel-icon</a> and <a href=\"/material-ui/api/table-sort-label/#table-sort-label-classes-direction-desc\">.MuiTableSortLabel-directionDesc</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." }
+    }
+  },
+  "slotDescriptions": {
+    "icon": "The component that renders the icon slot.",
+    "root": "The component that renders the root slot."
   }
 }
diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts
@@ -4,6 +4,48 @@ import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { TableSortLabelClasses } from './tableSortLabelClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface TableSortLabelRootSlotPropsOverrides {}
+
+export interface TableSortLabelIconSlotPropsOverrides {}
+
+export interface TableSortLabelSlots {
+  /**
+   * The component that renders the root slot.
+   * @default span
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the icon slot.
+   * @default ArrowDownwardIcon
+   */
+  icon?: React.ElementType;
+}
+
+export type TableSortLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TableSortLabelSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     */
+    root: SlotProps<
+      React.ElementType<React.HTMLAttributes<HTMLSpanElement>>,
+      TableSortLabelRootSlotPropsOverrides,
+      TableSortLabelOwnerState
+    >;
+    /**
+     * Props forwarded to the icon slot.
+     */
+    icon: SlotProps<
+      React.ElementType<React.SVGAttributes<SVGSVGElement>>,
+      TableSortLabelIconSlotPropsOverrides,
+      TableSortLabelOwnerState
+    >;
+  }
+>;
+
+export interface TableSortLabelOwnerState extends TableSortLabelOwnProps {}
 
 export interface TableSortLabelOwnProps {
   /**
@@ -46,7 +88,7 @@ export type TableSortLabelTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'span',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & TableSortLabelOwnProps;
+  props: AdditionalProps & TableSortLabelOwnProps & TableSortLabelSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }>;
 

diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.js b/packages/mui-material/src/TableSortLabel/TableSortLabel.js
@@ -10,6 +10,7 @@ import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, direction, active } = ownerState;
@@ -107,6 +108,8 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) {
     direction = 'asc',
     hideSortIcon = false,
     IconComponent = ArrowDownwardIcon,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -120,24 +123,31 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: TableSortLabelRoot,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.root, className),
+    ref,
+  });
+
+  const [IconSlot, iconProps] = useSlot('icon', {
+    elementType: TableSortLabelIcon,
+    externalForwardedProps,
+    ownerState,
+    className: classes.icon,
+  });
+
   return (
-    <TableSortLabelRoot
-      className={clsx(classes.root, className)}
-      component="span"
-      disableRipple
-      ownerState={ownerState}
-      ref={ref}
-      {...other}
-    >
+    <RootSlot disableRipple component="span" {...rootProps} {...other}>
       {children}
-      {hideSortIcon && !active ? null : (
-        <TableSortLabelIcon
-          as={IconComponent}
-          className={clsx(classes.icon)}
-          ownerState={ownerState}
-        />
-      )}
-    </TableSortLabelRoot>
+      {hideSortIcon && !active ? null : <IconSlot as={IconComponent} {...iconProps} />}
+    </RootSlot>
   );
 });
 
@@ -178,6 +188,22 @@ TableSortLabel.propTypes /* remove-proptypes */ = {
    * @default ArrowDownwardIcon
    */
   IconComponent: PropTypes.elementType,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    icon: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js b/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js
@@ -20,6 +20,11 @@ describe('<TableSortLabel />', () => {
     testDeepOverrides: { slotName: 'icon', slotClassName: classes.icon },
     refInstanceof: window.HTMLSpanElement,
     skip: ['componentProp', 'componentsProp'],
+    slots: {
+      icon: {
+        expectedClassName: classes.icon,
+      },
+    },
   }));
 
   it('should set the active class when active', () => {