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

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1024,6 +1024,25 @@ Here's how to migrate:
   },
 ```
 
+## TableSortLabel
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#table-sort-label-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/table-sort-label-props <path>
+```
+
+### IconComponent
+
+The TableSortLabel's `IconComponent` was deprecated in favor of `slots.icon`:
+
+```diff
+ <TableSortLabel
+-  IconComponent={IconComponent}
++  slots={{ icon: IconComponent }}
+ />
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/table-sort-label.json

@@ -8,7 +8,20 @@
       "default": "'asc'"
     },
     "hideSortIcon": { "type": { "name": "bool" }, "default": "false" },
-    "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDownwardIcon" },
+    "IconComponent": {
+      "type": { "name": "elementType" },
+      "default": "ArrowDownwardIcon",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.icon</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."
+    },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ icon?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ icon?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -22,19 +35,21 @@
     "import TableSortLabel from '@mui/material/TableSortLabel';",
     "import { TableSortLabel } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "icon",
+      "description": "Sort icon to use.",
+      "default": "ArrowDownwardIcon",
+      "class": "MuiTableSortLabel-icon"
+    }
+  ],
   "classes": [
     {
       "key": "active",
       "className": "Mui-active",
       "description": "State class applied to the root element if `active={true}`.",
       "isGlobal": true
     },
-    {
-      "key": "icon",
-      "className": "MuiTableSortLabel-icon",
-      "description": "Styles applied to the icon component.",
-      "isGlobal": false
-    },
     {
       "key": "iconDirectionAsc",
       "className": "MuiTableSortLabel-iconDirectionAsc",

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."
     }
@@ -19,7 +21,6 @@
       "nodeName": "the root element",
       "conditions": "<code>active={true}</code>"
     },
-    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" },
     "iconDirectionAsc": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the icon component",
@@ -31,5 +32,6 @@
       "conditions": "<code>direction=\"desc\"</code>"
     },
     "root": { "description": "Styles applied to the root element." }
-  }
+  },
+  "slotDescriptions": { "icon": "Sort icon to use." }
 }

packages/mui-codemod/README.md

@@ -1061,6 +1061,29 @@ npx @mui/codemod@latest deprecations/step-label-props <path>
 
 ```
 
+#### `table-sort-label-props`
+
+```diff
+ <TableSortLabel
+-  IconComponent={IconComponent}
++  slots={{ icon: IconComponent }}
+ />
+```
+
+```diff
+ MuiTableSortLabel: {
+   defaultProps: {
+-  IconComponent:IconComponent
++  slots:{ icon: IconComponent }
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/table-sort-label-props <path>
+
+```
+
 #### `step-connector-classes`
 
 JS transforms:

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -1,4 +1,5 @@
 import transformAccordionProps from '../accordion-props';
+import transformTableSortLabelProps from '../table-sort-label-props';
 import transformFormControlLabelProps from '../form-control-label-props';
 import transformAvatarProps from '../avatar-props';
 import transformDividerProps from '../divider-props';
@@ -20,6 +21,7 @@ import transformSpeedDialProps from '../speed-dial-props';
  */
 export default function deprecationsAll(file, api, options) {
   file.source = transformAccordionProps(file, api, options);
+  file.source = transformTableSortLabelProps(file, api, options);
   file.source = transformFormControlLabelProps(file, api, options);
   file.source = transformAvatarProps(file, api, options);
   file.source = transformDividerProps(file, api, options);

packages/mui-codemod/src/deprecations/table-sort-label-props/index.js

@@ -0,0 +1 @@
+export { default } from './table-sort-label-props';

packages/mui-codemod/src/deprecations/table-sort-label-props/table-sort-label-props.js

@@ -0,0 +1,23 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'TableSortLabel' });
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'TableSortLabel',
+    propName: 'IconComponent',
+    slotName: 'icon',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/table-sort-label-props/table-sort-label-props.test.js

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './table-sort-label-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('table-sort-label-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] table-sort-label-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: true } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/table-sort-label-props/test-cases/actual.js

@@ -0,0 +1,3 @@
+import TableSortLabel from '@mui/material/TableSortLabel';
+
+<TableSortLabel IconComponent={IconComponent} />;

packages/mui-codemod/src/deprecations/table-sort-label-props/test-cases/expected.js

@@ -0,0 +1,5 @@
+import TableSortLabel from '@mui/material/TableSortLabel';
+
+<TableSortLabel slots={{
+  icon: IconComponent
+}} />;

packages/mui-codemod/src/deprecations/table-sort-label-props/test-cases/theme.actual.js

@@ -0,0 +1,7 @@
+fn({
+  MuiTableSortLabel: {
+    defaultProps: {
+      IconComponent: IconComponent,
+    },
+  },
+});

packages/mui-codemod/src/deprecations/table-sort-label-props/test-cases/theme.expected.js

@@ -0,0 +1,9 @@
+fn({
+  MuiTableSortLabel: {
+    defaultProps: {
+      slots: {
+        icon: IconComponent,
+      },
+    },
+  },
+});

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

@@ -4,8 +4,28 @@ import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { TableSortLabelClasses } from './tableSortLabelClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface TableSortLabelOwnProps {
+export interface TableSortLabelSlots {
+  /**
+   * Sort icon to use.
+   * @default ArrowDownwardIcon
+   */
+  icon?: React.ElementType;
+}
+
+export type TableSortLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TableSortLabelSlots,
+  {
+    icon: SlotProps<
+      React.ElementType<React.SVGAttributes<SVGSVGElement>>,
+      {},
+      TableSortLabelOwnerState
+    >;
+  }
+>;
+
+export interface TableSortLabelOwnProps extends TableSortLabelSlotsAndSlotProps {
   /**
    * If `true`, the label will have the active styling (should be true for the sorted column).
    * @default false
@@ -32,6 +52,7 @@ export interface TableSortLabelOwnProps {
   /**
    * Sort icon to use.
    * @default ArrowDownwardIcon
+   * @deprecated Use `slots.icon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   IconComponent?: React.JSXElementConstructor<{
     className: string;
@@ -71,4 +92,6 @@ export type TableSortLabelProps<
   component?: React.ElementType;
 };
 
+export interface TableSortLabelOwnerState extends TableSortLabelProps {}
+
 export default TableSortLabel;

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

@@ -9,6 +9,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, direction, active } = ownerState;
@@ -102,6 +103,8 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) {
     direction = 'asc',
     hideSortIcon = false,
     IconComponent = ArrowDownwardIcon,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -115,6 +118,17 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [IconSlot, iconProps] = useSlot('icon', {
+    elementType: IconComponent,
+    externalForwardedProps,
+    ownerState,
+  });
+
   return (
     <TableSortLabelRoot
       className={clsx(classes.root, className)}
@@ -126,11 +140,7 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) {
     >
       {children}
       {hideSortIcon && !active ? null : (
-        <TableSortLabelIcon
-          as={IconComponent}
-          className={clsx(classes.icon)}
-          ownerState={ownerState}
-        />
+        <TableSortLabelIcon as={IconSlot} className={clsx(classes.icon)} {...iconProps} />
       )}
     </TableSortLabelRoot>
   );
@@ -171,8 +181,23 @@ TableSortLabel.propTypes /* remove-proptypes */ = {
   /**
    * Sort icon to use.
    * @default ArrowDownwardIcon
+   * @deprecated Use `slots.icon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   IconComponent: PropTypes.elementType,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    icon: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */