[TableCell] Enable variant overrides via TypeScript module augmentati…

…on (mui#33856) * [TableCell] Enable variant overrides (mui#33793) * added prettier (mui#33793) * fix redundant module declaration
daniel-rabe · Nov 29, 2022 · 9e9df5c · 9e9df5c
1 parent e007319
commit 9e9df5c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/docs/pages/material-ui/api/table-cell.json b/docs/pages/material-ui/api/table-cell.json
@@ -34,8 +34,8 @@
     },
     "variant": {
       "type": {
-        "name": "enum",
-        "description": "'body'<br>&#124;&nbsp;'footer'<br>&#124;&nbsp;'head'"
+        "name": "union",
+        "description": "'body'<br>&#124;&nbsp;'footer'<br>&#124;&nbsp;'head'<br>&#124;&nbsp;string"
       }
     }
   },

diff --git a/packages/mui-material/src/TableCell/TableCell.d.ts b/packages/mui-material/src/TableCell/TableCell.d.ts
@@ -5,6 +5,7 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TableCellClasses } from './tableCellClasses';
 
 export interface TableCellPropsSizeOverrides {}
+export interface TableCellPropsVariantOverrides {}
 
 /**
  * `<TableCell>` will be rendered as an `<th>`or `<td>` depending
@@ -62,7 +63,7 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
    * Specify the cell type.
    * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
    */
-  variant?: 'head' | 'body' | 'footer';
+  variant?: OverridableStringUnion<'head' | 'body' | 'footer', TableCellPropsVariantOverrides>;
 }
 
 export type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableCellElement> &

diff --git a/packages/mui-material/src/TableCell/TableCell.js b/packages/mui-material/src/TableCell/TableCell.js
@@ -240,7 +240,10 @@ TableCell.propTypes /* remove-proptypes */ = {
    * Specify the cell type.
    * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
    */
-  variant: PropTypes.oneOf(['body', 'footer', 'head']),
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['body', 'footer', 'head']),
+    PropTypes.string,
+  ]),
 };
 
 export default TableCell;
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/tableCellCustomProps.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/tableCellCustomProps.spec.tsx
@@ -13,6 +13,9 @@ declare module '@mui/material/TableCell' {
   interface TableCellPropsSizeOverrides {
     large: true;
   }
+  interface TableCellPropsVariantOverrides {
+    tableBody: true;
+  }
 }
 
 // theme typings should work as expected
@@ -26,10 +29,28 @@ const theme = createTheme({
           }),
         }),
       },
+      variants: [
+        {
+          props: { variant: 'tableBody' },
+          style: {
+            fontSize: '1.2em',
+            color: '#C1D3FF',
+          },
+        },
+      ],
     },
   },
 });
 
 <Table size="large">
   <TableCell size="large" />
 </Table>;
+
+<Table size="large">
+  <TableCell variant="tableBody">Foo</TableCell>;
+</Table>;
+
+<Table size="large">
+  {/* @ts-expect-error unknown variant */}
+  <TableCell variant="tableHeading">Bar</TableCell>;
+</Table>;