[Table] Migrate to emotion (#24657)

docs/pages/api-docs/table.json

@@ -14,7 +14,8 @@
       "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
       "default": "'medium'"
     },
-    "stickyHeader": { "type": { "name": "bool" } }
+    "stickyHeader": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Table",
   "styles": { "classes": ["root", "stickyHeader"], "globalClasses": {}, "name": "MuiTable" },
@@ -23,6 +24,6 @@
   "filename": "/packages/material-ui/src/Table/Table.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/tables/\">Tables</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/table/table.json

@@ -6,7 +6,8 @@
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "padding": "Allows TableCells to inherit padding of the Table.",
     "size": "Allows TableCells to inherit size of the Table.",
-    "stickyHeader": "Set the header sticky.<br>⚠️ It doesn&#39;t work with IE11."
+    "stickyHeader": "Set the header sticky.<br>⚠️ It doesn&#39;t work with IE11.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

packages/material-ui/src/Table/Table.d.ts

@@ -1,4 +1,6 @@
+import { SxProps } from '@material-ui/system';
 import * as React from 'react';
+import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export type Padding = 'default' | 'checkbox' | 'none';
@@ -37,6 +39,10 @@ export interface TableTypeMap<P = {}, D extends React.ElementType = 'table'> {
      * @default false
      */
     stickyHeader?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }

packages/material-ui/src/Table/Table.js

@@ -1,42 +1,82 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import TableContext from './TableContext';
 
-export const styles = (theme) => ({
+import useThemeProps from '../styles/useThemeProps';
+import experimentalStyled from '../styles/experimentalStyled';
+import { getTableUtilityClass } from './tableClasses';
+
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.stickyHeader && styles.stickyHeader),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, stickyHeader } = styleProps;
+
+  const slots = {
+    root: ['root', stickyHeader && 'stickyHeader'],
+  };
+
+  return composeClasses(slots, getTableUtilityClass, classes);
+};
+
+const TableRoot = experimentalStyled(
+  'table',
+  {},
+  {
+    name: 'MuiTable',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme, styleProps }) => ({
   /* Styles applied to the root element. */
-  root: {
-    display: 'table',
-    width: '100%',
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-    '& caption': {
-      ...theme.typography.body2,
-      padding: theme.spacing(2),
-      color: theme.palette.text.secondary,
-      textAlign: 'left',
-      captionSide: 'bottom',
-    },
+  display: 'table',
+  width: '100%',
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+  '& caption': {
+    ...theme.typography.body2,
+    padding: theme.spacing(2),
+    color: theme.palette.text.secondary,
+    textAlign: 'left',
+    captionSide: 'bottom',
   },
   /* Styles applied to the root element if `stickyHeader={true}`. */
-  stickyHeader: {
+  ...(styleProps.stickyHeader && {
     borderCollapse: 'separate',
-  },
-});
+  }),
+}));
 
 const defaultComponent = 'table';
 
-const Table = React.forwardRef(function Table(props, ref) {
+const Table = React.forwardRef(function Table(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiTable' });
   const {
-    classes,
     className,
-    component: Component = defaultComponent,
+    component = defaultComponent,
     padding = 'default',
     size = 'medium',
     stickyHeader = false,
     ...other
   } = props;
+
+  const styleProps = {
+    ...props,
+    component,
+    padding,
+    size,
+    stickyHeader,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   const table = React.useMemo(() => ({ padding, size, stickyHeader }), [
     padding,
     size,
@@ -45,10 +85,12 @@ const Table = React.forwardRef(function Table(props, ref) {
 
   return (
     <TableContext.Provider value={table}>
-      <Component
-        role={Component === defaultComponent ? null : 'table'}
+      <TableRoot
+        as={component}
+        role={component === defaultComponent ? null : 'table'}
         ref={ref}
-        className={clsx(classes.root, { [classes.stickyHeader]: stickyHeader }, className)}
+        className={clsx(classes.root, className)}
+        styleProps={styleProps}
         {...other}
       />
     </TableContext.Provider>
@@ -94,6 +136,10 @@ Table.propTypes = {
    * @default false
    */
   stickyHeader: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiTable' })(Table);
+export default Table;

packages/material-ui/src/Table/Table.test.js

@@ -1,29 +1,28 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import Table from './Table';
 import TableContext from './TableContext';
+import classes from './tableClasses';
 
 describe('<Table />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<Table>foo</Table>);
-  });
-
-  describeConformance(
+  describeConformanceV5(
     <Table>
       <tbody />
     </Table>,
     () => ({
       classes,
       inheritComponent: 'table',
       mount,
+      muiName: 'MuiTable',
+      testVariantProps: { variant: 'foo' },
       refInstanceof: window.HTMLTableElement,
       // can't test another component with tbody as a child
       testComponentPropWith: 'table',
+      skip: ['componentsProp'],
     }),
   );
 

packages/material-ui/src/Table/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './Table';
 export * from './Table';
+
+export { default as tableClasses } from './tableClasses';
+export * from './tableClasses';

packages/material-ui/src/Table/index.js

@@ -1 +1,4 @@
 export { default } from './Table';
+
+export { default as tableClasses } from './tableClasses';
+export * from './tableClasses';

packages/material-ui/src/Table/tableClasses.d.ts

@@ -0,0 +1,10 @@
+export interface TableClasses {
+  root: string;
+  stickyHeader: string;
+}
+
+declare const tableClasses: TableClasses;
+
+export function getTableUtilityClass(slot: string): string;
+
+export default tableClasses;

packages/material-ui/src/Table/tableClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTableUtilityClass(slot) {
+  return generateUtilityClass('MuiTable', slot);
+}
+
+const tableClasses = generateUtilityClasses('MuiTable', ['root', 'stickyHeader']);
+
+export default tableClasses;