[TableCell] Enable size prop overrides via module augmentation (#33816)

Author: brentertz

docs/pages/material-ui/api/table-cell.json

@@ -17,7 +17,12 @@
       }
     },
     "scope": { "type": { "name": "string" } },
-    "size": { "type": { "name": "enum", "description": "'small'<br>&#124;&nbsp;'medium'" } },
+    "size": {
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      }
+    },
     "sortDirection": {
       "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'<br>&#124;&nbsp;false" }
     },

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TableCellClasses } from './tableCellClasses';
 
+export interface TableCellPropsSizeOverrides {}
+
 /**
  * `<TableCell>` will be rendered as an `<th>`or `<td>` depending
  * on the context it is used in. Where context literally is the
@@ -46,7 +49,7 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
    * Specify the size of the cell.
    * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
    */
-  size?: 'small' | 'medium';
+  size?: OverridableStringUnion<'small' | 'medium', TableCellPropsSizeOverrides>;
   /**
    * Set aria-sort direction.
    */

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

@@ -220,7 +220,10 @@ TableCell.propTypes /* remove-proptypes */ = {
    * Specify the size of the cell.
    * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
    */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['medium', 'small']),
+    PropTypes.string,
+  ]),
   /**
    * Set aria-sort direction.
    */

packages/mui-material/test/typescript/moduleAugmentation/tableCellCustomProps.spec.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableCell from '@mui/material/TableCell';
+import { createTheme } from '@mui/material/styles';
+
+declare module '@mui/material/Table' {
+  interface TablePropsSizeOverrides {
+    large: true;
+  }
+}
+
+declare module '@mui/material/TableCell' {
+  interface TableCellPropsSizeOverrides {
+    large: true;
+  }
+}
+
+// theme typings should work as expected
+const theme = createTheme({
+  components: {
+    MuiTableCell: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.size === 'large' && {
+            paddingBlock: '1rem',
+          }),
+        }),
+      },
+    },
+  },
+});
+
+<Table size="large">
+  <TableCell size="large" />
+</Table>;

packages/mui-material/test/typescript/moduleAugmentation/tableCellCustomProps.tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig",
+  "files": ["tableCellCustomProps.spec.tsx"]
+}