[Table] Migrate TableRow to emotion

docs/pages/api-docs/table-row.json

@@ -4,7 +4,8 @@
     "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "hover": { "type": { "name": "bool" } },
-    "selected": { "type": { "name": "bool" } }
+    "selected": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TableRow",
   "styles": {
@@ -17,6 +18,6 @@
   "filename": "/packages/material-ui/src/TableRow/TableRow.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-row/table-row.json

@@ -5,7 +5,8 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "hover": "If <code>true</code>, the table row will shade on hover.",
-    "selected": "If <code>true</code>, the table row will have the selected shading."
+    "selected": "If <code>true</code>, the table row will have the selected shading.",
+    "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/TableRow/TableRow.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 interface TableRowTypeMap<P = {}, D extends React.ElementType = 'tr'> {
@@ -32,6 +34,10 @@ export interface TableRowTypeMap<P = {}, D extends React.ElementType = 'tr'> {
      * @default false
      */
     selected?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }

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

@@ -1,65 +1,91 @@
 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 Tablelvl2Context from '../Table/Tablelvl2Context';
 import { alpha } from '../styles/colorManipulator';
 
-export const styles = (theme) => ({
+import useThemeProps from '../styles/useThemeProps';
+import experimentalStyled from '../styles/experimentalStyled';
+import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses';
+
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.head && styles.head),
+    ...(styleProps.footer && styles.footer),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, selected, hover, head, footer } = styleProps;
+
+  const slots = {
+    root: ['root', selected && 'selected', hover && 'hover', head && 'head', footer && 'footer'],
+  };
+
+  return composeClasses(slots, getTableRowUtilityClass, classes);
+};
+
+const TableRowRoot = experimentalStyled(
+  'tr',
+  {},
+  {
+    name: 'MuiTableRow',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme }) => ({
   /* Styles applied to the root element. */
-  root: {
-    color: 'inherit',
-    display: 'table-row',
-    verticalAlign: 'middle',
-    // We disable the focus ring for mouse, touch and keyboard users.
-    outline: 0,
-    '&$hover:hover': {
-      backgroundColor: theme.palette.action.hover,
-    },
-    '&$selected, &$selected:hover': {
-      backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity),
-    },
+  color: 'inherit',
+  display: 'table-row',
+  verticalAlign: 'middle',
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  [`&.${tableRowClasses.hover}:hover`]: {
+    backgroundColor: theme.palette.action.hover,
   },
-  /* Pseudo-class applied to the root element if `selected={true}`. */
-  selected: {},
-  /* Pseudo-class applied to the root element if `hover={true}`. */
-  hover: {},
-  /* Styles applied to the root element if table variant="head". */
-  head: {},
-  /* Styles applied to the root element if table variant="footer". */
-  footer: {},
-});
+  '&.Mui-selected, &.Mui-selected:hover': {
+    backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity),
+  },
+}));
 
 const defaultComponent = 'tr';
 /**
  * Will automatically set dynamic row height
  * based on the material table element parent (head, body, etc).
  */
-const TableRow = React.forwardRef(function TableRow(props, ref) {
+const TableRow = React.forwardRef(function TableRow(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiTableRow' });
   const {
-    classes,
     className,
-    component: Component = defaultComponent,
+    component = defaultComponent,
     hover = false,
     selected = false,
     ...other
   } = props;
   const tablelvl2 = React.useContext(Tablelvl2Context);
 
+  const styleProps = {
+    ...props,
+    component,
+    hover,
+    selected,
+    head: tablelvl2 && tablelvl2.variant === 'head',
+    footer: tablelvl2 && tablelvl2.variant === 'footer',
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <Component
+    <TableRowRoot
+      as={component}
       ref={ref}
-      className={clsx(
-        classes.root,
-        {
-          [classes.head]: tablelvl2 && tablelvl2.variant === 'head',
-          [classes.footer]: tablelvl2 && tablelvl2.variant === 'footer',
-          [classes.hover]: hover,
-          [classes.selected]: selected,
-        },
-        className,
-      )}
-      role={Component === defaultComponent ? null : 'row'}
+      className={clsx(classes.root, className)}
+      role={component === defaultComponent ? null : 'row'}
+      styleProps={styleProps}
       {...other}
     />
   );
@@ -97,6 +123,10 @@ TableRow.propTypes = {
    * @default false
    */
   selected: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiTableRow' })(TableRow);
+export default TableRow;

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

@@ -1,11 +1,11 @@
 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 TableRow from './TableRow';
+import classes from './tableRowClasses';
 
 describe('<TableRow />', () => {
   const mount = createMount();
-  let classes;
   const render = createClientRender();
 
   function renderInTable(node) {
@@ -16,11 +16,7 @@ describe('<TableRow />', () => {
     );
   }
 
-  before(() => {
-    classes = getClasses(<TableRow />);
-  });
-
-  describeConformance(<TableRow />, () => ({
+  describeConformanceV5(<TableRow />, () => ({
     classes,
     inheritComponent: 'tr',
     mount: (node) => {
@@ -31,9 +27,19 @@ describe('<TableRow />', () => {
       );
       return wrapper.find('tbody').childAt(0);
     },
-
+    render: (node) => {
+      const { container, ...rest } = render(
+        <table>
+          <tbody>{node}</tbody>
+        </table>,
+      );
+      return { container: container.firstChild.firstChild, ...rest };
+    },
+    muiName: 'MuiTableRow',
+    testVariantProps: { variant: 'foo' },
     refInstanceof: window.HTMLTableRowElement,
     testComponentPropWith: 'tr',
+    skip: ['componentsProp'],
   }));
 
   it('should render children', () => {

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

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

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

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

packages/material-ui/src/TableRow/tableRowClasses.d.ts

@@ -0,0 +1,7 @@
+import { TableRowClassKey } from './TableRow';
+
+declare const tableRowClasses: Record<TableRowClassKey, string>;
+
+export function getTableRowUtilityClass(slot: string): string;
+
+export default tableRowClasses;

packages/material-ui/src/TableRow/tableRowClasses.js

@@ -0,0 +1,15 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTableRowUtilityClass(slot) {
+  return generateUtilityClass('MuiTableRow', slot);
+}
+
+const tableRowClasses = generateUtilityClasses('MuiTableRow', [
+  'root',
+  'selected',
+  'hover',
+  'head',
+  'footer',
+]);
+
+export default tableRowClasses;

packages/material-ui/test/integration/TableRow.test.js

@@ -1,18 +1,13 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createClientRender } from 'test/utils';
+import { createClientRender } from 'test/utils';
 import TableFooter from '@material-ui/core/TableFooter';
 import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
+import TableRow, { tableRowClasses as classes } from '@material-ui/core/TableRow';
 
 describe('<TableRow> integration', () => {
-  let classes;
   const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<TableRow />);
-  });
-
   it('should render with the head class when in the context of a table head', () => {
     const { getByRole } = render(
       <table>