From 8f6b38ab05e0f953153f2c30a637c98cfa5b952e Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Fri, 12 Feb 2021 17:39:11 -0500 Subject: [PATCH] [Table] Migrate TableCell to emotion (#24663) --- docs/pages/api-docs/table-cell.json | 4 +- docs/pages/performance/table-emotion.js | 13 +- .../api-docs/table-cell/table-cell.json | 6 + .../material-ui/src/CardMedia/CardMedia.d.ts | 2 +- .../material-ui/src/Checkbox/Checkbox.d.ts | 2 +- .../CircularProgress/CircularProgress.d.ts | 2 +- .../src/ImageListItem/ImageListItem.d.ts | 2 +- .../ImageListItemBar/ImageListItemBar.d.ts | 2 +- .../src/ListItemText/ListItemText.d.ts | 2 +- packages/material-ui/src/Step/Step.d.ts | 2 +- packages/material-ui/src/Tab/Tab.d.ts | 2 +- .../src/TabScrollButton/TabScrollButton.d.ts | 2 +- packages/material-ui/src/Table/Table.d.ts | 2 +- .../material-ui/src/TableBody/TableBody.d.ts | 2 +- .../material-ui/src/TableCell/TableCell.d.ts | 9 +- .../material-ui/src/TableCell/TableCell.js | 163 +++++++++++------- .../src/TableCell/TableCell.test.js | 26 ++- packages/material-ui/src/TableCell/index.d.ts | 3 + packages/material-ui/src/TableCell/index.js | 3 + .../src/TableCell/tableCellClasses.d.ts | 7 + .../src/TableCell/tableCellClasses.js | 23 +++ .../src/TableContainer/TableContainer.d.ts | 2 +- .../src/TableFooter/TableFooter.d.ts | 2 +- .../material-ui/src/TableHead/TableHead.d.ts | 2 +- .../material-ui/src/TableRow/TableRow.d.ts | 2 +- .../test/integration/TableCell.test.js | 9 +- 26 files changed, 200 insertions(+), 96 deletions(-) create mode 100644 packages/material-ui/src/TableCell/tableCellClasses.d.ts create mode 100644 packages/material-ui/src/TableCell/tableCellClasses.js diff --git a/docs/pages/api-docs/table-cell.json b/docs/pages/api-docs/table-cell.json index 3fa3e28a1f9502..2c795c54337897 100644 --- a/docs/pages/api-docs/table-cell.json +++ b/docs/pages/api-docs/table-cell.json @@ -21,6 +21,7 @@ "sortDirection": { "type": { "name": "enum", "description": "'asc'
| 'desc'
| false" } }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "enum", @@ -36,6 +37,7 @@ "body", "footer", "sizeSmall", + "sizeMedium", "paddingCheckbox", "paddingNone", "alignLeft", @@ -52,6 +54,6 @@ "filename": "/packages/material-ui/src/TableCell/TableCell.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/pages/performance/table-emotion.js b/docs/pages/performance/table-emotion.js index be4a58eab12d47..00350540001e8d 100644 --- a/docs/pages/performance/table-emotion.js +++ b/docs/pages/performance/table-emotion.js @@ -1,22 +1,25 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; +// import { experimentalStyled as styled } from '@material-ui/core/styles'; import NoSsr from '@material-ui/core/NoSsr'; const createComponent = (defaultComponent) => { + const Root = styled('div')` + background: pink; + `; + const MyComponent = React.forwardRef(function MyComponent(props, ref) { - const { component: Component = defaultComponent, ...other } = props; + const { component = defaultComponent, ...other } = props; - return ; + return ; }); MyComponent.propTypes = { component: PropTypes.elementType, }; - return styled(MyComponent)` - background: pink; - `; + return MyComponent; }; const Table = createComponent('table'); diff --git a/docs/translations/api-docs/table-cell/table-cell.json b/docs/translations/api-docs/table-cell/table-cell.json index 12ccb4a50f0c11..05148c1c1c3fbb 100644 --- a/docs/translations/api-docs/table-cell/table-cell.json +++ b/docs/translations/api-docs/table-cell/table-cell.json @@ -9,6 +9,7 @@ "scope": "Set scope attribute.", "size": "Specify the size of the cell. The prop defaults to the value ('medium') inherited from the parent Table component.", "sortDirection": "Set aria-sort direction.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components." }, "classDescriptions": { @@ -33,6 +34,11 @@ "nodeName": "the root element", "conditions": "size=\"small\"" }, + "sizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\"" + }, "paddingCheckbox": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/material-ui/src/CardMedia/CardMedia.d.ts b/packages/material-ui/src/CardMedia/CardMedia.d.ts index 3ec63fbf834e55..32c1525ccd1f68 100644 --- a/packages/material-ui/src/CardMedia/CardMedia.d.ts +++ b/packages/material-ui/src/CardMedia/CardMedia.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index 0b0d1f17693e40..9379e860536432 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { SwitchBaseProps } from '../internal/SwitchBase'; diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index e353e23106aa1e..8187fc8c08de35 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { InternalStandardProps as StandardProps, Theme } from '..'; export interface CircularProgressProps diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts index 5e654e98f6f699..0810cac1a48fb2 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts +++ b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts index c8ba29a783466e..e947b56ba3fe5e 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { InternalStandardProps as StandardProps, Theme } from '..'; export interface ImageListItemBarProps diff --git a/packages/material-ui/src/ListItemText/ListItemText.d.ts b/packages/material-ui/src/ListItemText/ListItemText.d.ts index fbf0506599f59a..61f38b1bafb7df 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.d.ts +++ b/packages/material-ui/src/ListItemText/ListItemText.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { TypographyProps } from '../Typography'; diff --git a/packages/material-ui/src/Step/Step.d.ts b/packages/material-ui/src/Step/Step.d.ts index d1055c08c2ae6a..ecd3e8f1c9d829 100644 --- a/packages/material-ui/src/Step/Step.d.ts +++ b/packages/material-ui/src/Step/Step.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { InternalStandardProps as StandardProps, Theme } from '..'; export interface StepProps extends StandardProps> { diff --git a/packages/material-ui/src/Tab/Tab.d.ts b/packages/material-ui/src/Tab/Tab.d.ts index e540237e6b1f73..2c44f9f1d335bc 100644 --- a/packages/material-ui/src/Tab/Tab.d.ts +++ b/packages/material-ui/src/Tab/Tab.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts b/packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts index a07f7806add488..1911d79d6ac497 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { InternalStandardProps as StandardProps, Theme } from '..'; export interface TabScrollButtonProps extends StandardProps> { diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts index 8086ef592031e8..fa2534e8ed3013 100644 --- a/packages/material-ui/src/Table/Table.d.ts +++ b/packages/material-ui/src/Table/Table.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/TableBody/TableBody.d.ts b/packages/material-ui/src/TableBody/TableBody.d.ts index 51c578449d8871..85b79757ac5199 100644 --- a/packages/material-ui/src/TableBody/TableBody.d.ts +++ b/packages/material-ui/src/TableBody/TableBody.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/TableCell/TableCell.d.ts b/packages/material-ui/src/TableCell/TableCell.d.ts index 1e17cd9f190cee..12987f3dedeacb 100644 --- a/packages/material-ui/src/TableCell/TableCell.d.ts +++ b/packages/material-ui/src/TableCell/TableCell.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; -import { InternalStandardProps as StandardProps } from '..'; +import { SxProps } from '@material-ui/system'; +import { InternalStandardProps as StandardProps, Theme } from '..'; import { Padding, Size } from '../Table'; export { Padding, Size }; @@ -39,6 +40,8 @@ export interface TableCellProps extends StandardProps; /** * Specify the cell type. * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index a2ca04d3f472b7..3b8c32aae6439c 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -1,102 +1,141 @@ 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 capitalize from '../utils/capitalize'; import { darken, alpha, lighten } from '../styles/colorManipulator'; import TableContext from '../Table/TableContext'; import Tablelvl2Context from '../Table/Tablelvl2Context'; +import useThemeProps from '../styles/useThemeProps'; +import experimentalStyled from '../styles/experimentalStyled'; +import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses'; -export const styles = (theme) => ({ +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...styles[styleProps.variant], + ...styles[`size${capitalize(styleProps.size)}`], + ...(styleProps.padding !== 'default' && styles[`padding${capitalize(styleProps.padding)}`]), + ...(styleProps.align !== 'inherit' && styles[`align${capitalize(styleProps.align)}`]), + ...(styleProps.stickyHeader && styles.stickyHeader), + }); +}; + +const useUtilityClasses = (styleProps) => { + const { classes, variant, align, padding, size, stickyHeader } = styleProps; + + const slots = { + root: [ + 'root', + variant, + stickyHeader && 'stickyHeader', + align !== 'inherit' && `align${capitalize(align)}`, + padding !== 'default' && `padding${capitalize(padding)}`, + `size${capitalize(size)}`, + ], + }; + + return composeClasses(slots, getTableCellUtilityClass, classes); +}; + +const TableCellRoot = experimentalStyled( + 'td', + {}, + { + name: 'MuiTableCell', + slot: 'Root', + overridesResolver, + }, +)(({ theme, styleProps }) => ({ /* Styles applied to the root element. */ - root: { - ...theme.typography.body2, - display: 'table-cell', - verticalAlign: 'inherit', - // Workaround for a rendering bug with spanned columns in Chrome 62.0. - // Removes the alpha (sets it to 1), and lightens or darkens the theme color. - borderBottom: `1px solid + ...theme.typography.body2, + display: 'table-cell', + verticalAlign: 'inherit', + // Workaround for a rendering bug with spanned columns in Chrome 62.0. + // Removes the alpha (sets it to 1), and lightens or darkens the theme color. + borderBottom: `1px solid ${ theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68) }`, - textAlign: 'left', - padding: 16, - }, + textAlign: 'left', + padding: 16, /* Styles applied to the root element if `variant="head"` or `context.table.head`. */ - head: { + ...(styleProps.variant === 'head' && { color: theme.palette.text.primary, lineHeight: theme.typography.pxToRem(24), fontWeight: theme.typography.fontWeightMedium, - }, + }), /* Styles applied to the root element if `variant="body"` or `context.table.body`. */ - body: { + ...(styleProps.variant === 'body' && { color: theme.palette.text.primary, - }, + }), /* Styles applied to the root element if `variant="footer"` or `context.table.footer`. */ - footer: { + ...(styleProps.variant === 'footer' && { color: theme.palette.text.secondary, lineHeight: theme.typography.pxToRem(21), fontSize: theme.typography.pxToRem(12), - }, + }), /* Styles applied to the root element if `size="small"`. */ - sizeSmall: { + ...(styleProps.size === 'small' && { padding: '6px 16px', - '&$paddingCheckbox': { + [`&.${tableCellClasses.paddingCheckbox}`]: { width: 24, // prevent the checkbox column from growing padding: '0 12px 0 16px', '& > *': { padding: 0, }, }, - }, + }), /* Styles applied to the root element if `padding="checkbox"`. */ - paddingCheckbox: { + ...(styleProps.padding === 'checkbox' && { width: 48, // prevent the checkbox column from growing padding: '0 0 0 4px', - }, + }), /* Styles applied to the root element if `padding="none"`. */ - paddingNone: { + ...(styleProps.padding === 'none' && { padding: 0, - }, + }), /* Styles applied to the root element if `align="left"`. */ - alignLeft: { + ...(styleProps.align === 'left' && { textAlign: 'left', - }, + }), /* Styles applied to the root element if `align="center"`. */ - alignCenter: { + ...(styleProps.align === 'center' && { textAlign: 'center', - }, + }), /* Styles applied to the root element if `align="right"`. */ - alignRight: { + ...(styleProps.align === 'right' && { textAlign: 'right', flexDirection: 'row-reverse', - }, + }), /* Styles applied to the root element if `align="justify"`. */ - alignJustify: { + ...(styleProps.align === 'justify' && { textAlign: 'justify', - }, + }), /* Styles applied to the root element if `context.table.stickyHeader={true}`. */ - stickyHeader: { + ...(styleProps.stickyHeader && { position: 'sticky', top: 0, left: 0, zIndex: 2, backgroundColor: theme.palette.background.default, - }, -}); + }), +})); /** * The component renders a `` element when the parent context is a header * or otherwise a `` element. */ -const TableCell = React.forwardRef(function TableCell(props, ref) { +const TableCell = React.forwardRef(function TableCell(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTableCell' }); const { align = 'inherit', - classes, className, - component, + component: componentProp, padding: paddingProp, scope: scopeProp, size: sizeProp, @@ -110,44 +149,48 @@ const TableCell = React.forwardRef(function TableCell(props, ref) { const isHeadCell = tablelvl2 && tablelvl2.variant === 'head'; let role; - let Component; - if (component) { - Component = component; + let component; + if (componentProp) { + component = componentProp; role = isHeadCell ? 'columnheader' : 'cell'; } else { - Component = isHeadCell ? 'th' : 'td'; + component = isHeadCell ? 'th' : 'td'; } let scope = scopeProp; if (!scope && isHeadCell) { scope = 'col'; } - const padding = paddingProp || (table && table.padding ? table.padding : 'default'); - const size = sizeProp || (table && table.size ? table.size : 'medium'); + const variant = variantProp || (tablelvl2 && tablelvl2.variant); + const styleProps = { + ...props, + align, + component, + padding: paddingProp || (table && table.padding ? table.padding : 'default'), + size: sizeProp || (table && table.size ? table.size : 'medium'), + sortDirection, + stickyHeader: variant === 'head' && table && table.stickyHeader, + variant, + }; + + const classes = useUtilityClasses(styleProps); + let ariaSort = null; if (sortDirection) { ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending'; } return ( - ); @@ -201,6 +244,10 @@ TableCell.propTypes = { * Set aria-sort direction. */ sortDirection: PropTypes.oneOf(['asc', 'desc', false]), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * Specify the cell type. * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. @@ -208,4 +255,4 @@ TableCell.propTypes = { variant: PropTypes.oneOf(['body', 'footer', 'head']), }; -export default withStyles(styles, { name: 'MuiTableCell' })(TableCell); +export default TableCell; diff --git a/packages/material-ui/src/TableCell/TableCell.test.js b/packages/material-ui/src/TableCell/TableCell.test.js index 480f923ea67eaa..3d6fff97c11d15 100644 --- a/packages/material-ui/src/TableCell/TableCell.test.js +++ b/packages/material-ui/src/TableCell/TableCell.test.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils'; +import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; import TableCell from './TableCell'; +import classes from './tableCellClasses'; describe('', () => { const mount = createMount(); - let classes; const render = createClientRender(); function renderInTable(node) { return render( @@ -17,11 +17,7 @@ describe('', () => { ); } - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'td', mount: (node) => { @@ -34,14 +30,26 @@ describe('', () => { ); return wrapper.find('tr').childAt(0); }, - + render: (node) => { + const { container, ...rest } = render( + + + {node} + +
, + ); + return { container: container.firstChild.firstChild.firstChild, ...rest }; + }, + muiName: 'MuiTableCell', + testVariantProps: { variant: 'body' }, refInstanceof: window.HTMLTableCellElement, // invalid nesting otherwise testComponentPropWith: 'td', + skip: ['componentsProp'], })); describe('prop: padding', () => { - it('doesn not have a class for padding by default', () => { + it("doesn't not have a class for padding by default", () => { const { container } = renderInTable(); expect(container.querySelector('td')).to.not.have.class(classes.paddingDefault); }); diff --git a/packages/material-ui/src/TableCell/index.d.ts b/packages/material-ui/src/TableCell/index.d.ts index 6e6bcb6ded9a47..c1f71ad1206189 100644 --- a/packages/material-ui/src/TableCell/index.d.ts +++ b/packages/material-ui/src/TableCell/index.d.ts @@ -1,2 +1,5 @@ export { default } from './TableCell'; export * from './TableCell'; + +export { default as tableCellClasses } from './tableCellClasses'; +export * from './tableCellClasses'; diff --git a/packages/material-ui/src/TableCell/index.js b/packages/material-ui/src/TableCell/index.js index f168744dde66e8..d02d3290bf6dab 100644 --- a/packages/material-ui/src/TableCell/index.js +++ b/packages/material-ui/src/TableCell/index.js @@ -1 +1,4 @@ export { default } from './TableCell'; + +export { default as tableCellClasses } from './tableCellClasses'; +export * from './tableCellClasses'; diff --git a/packages/material-ui/src/TableCell/tableCellClasses.d.ts b/packages/material-ui/src/TableCell/tableCellClasses.d.ts new file mode 100644 index 00000000000000..57b3601ac3c742 --- /dev/null +++ b/packages/material-ui/src/TableCell/tableCellClasses.d.ts @@ -0,0 +1,7 @@ +import { TableCellClassKey } from './TableCell'; + +declare const tableCellClasses: TableCellClassKey; + +export function getTableCellUtilityClass(slot: string): string; + +export default tableCellClasses; diff --git a/packages/material-ui/src/TableCell/tableCellClasses.js b/packages/material-ui/src/TableCell/tableCellClasses.js new file mode 100644 index 00000000000000..9c41570777f786 --- /dev/null +++ b/packages/material-ui/src/TableCell/tableCellClasses.js @@ -0,0 +1,23 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTableCellUtilityClass(slot) { + return generateUtilityClass('MuiTableCell', slot); +} + +const tableCellClasses = generateUtilityClasses('MuiTableCell', [ + 'root', + 'head', + 'body', + 'footer', + 'sizeSmall', + 'sizeMedium', + 'paddingCheckbox', + 'paddingNone', + 'alignLeft', + 'alignCenter', + 'alignRight', + 'alignJustify', + 'stickyHeader', +]); + +export default tableCellClasses; diff --git a/packages/material-ui/src/TableContainer/TableContainer.d.ts b/packages/material-ui/src/TableContainer/TableContainer.d.ts index 436e0908451e67..14124d8bf0b99e 100644 --- a/packages/material-ui/src/TableContainer/TableContainer.d.ts +++ b/packages/material-ui/src/TableContainer/TableContainer.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/TableFooter/TableFooter.d.ts b/packages/material-ui/src/TableFooter/TableFooter.d.ts index 80f68df1ff50a4..87e79fcb60aea4 100644 --- a/packages/material-ui/src/TableFooter/TableFooter.d.ts +++ b/packages/material-ui/src/TableFooter/TableFooter.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/TableHead/TableHead.d.ts b/packages/material-ui/src/TableHead/TableHead.d.ts index 24a731b6fa4b0e..209dc501e93b83 100644 --- a/packages/material-ui/src/TableHead/TableHead.d.ts +++ b/packages/material-ui/src/TableHead/TableHead.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/src/TableRow/TableRow.d.ts b/packages/material-ui/src/TableRow/TableRow.d.ts index 2ce57f447ede4e..92e3ace35d6bd5 100644 --- a/packages/material-ui/src/TableRow/TableRow.d.ts +++ b/packages/material-ui/src/TableRow/TableRow.d.ts @@ -1,5 +1,5 @@ -import { SxProps } from '@material-ui/system'; import * as React from 'react'; +import { SxProps } from '@material-ui/system'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; diff --git a/packages/material-ui/test/integration/TableCell.test.js b/packages/material-ui/test/integration/TableCell.test.js index 2665955c77203f..bd81ff6d82fa19 100644 --- a/packages/material-ui/test/integration/TableCell.test.js +++ b/packages/material-ui/test/integration/TableCell.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; -import { getClasses, createClientRender } from 'test/utils'; -import TableCell from '@material-ui/core/TableCell'; +import { createClientRender } from 'test/utils'; +import TableCell, { tableCellClasses as classes } from '@material-ui/core/TableCell'; import Table from '@material-ui/core/Table'; import TableFooter from '@material-ui/core/TableFooter'; import TableHead from '@material-ui/core/TableHead'; @@ -9,7 +9,6 @@ import TableRow from '@material-ui/core/TableRow'; import TableBody from '@material-ui/core/TableBody'; describe(' integration', () => { - let classes; const render = createClientRender(); function renderInTable(node, Variant) { return render( @@ -21,10 +20,6 @@ describe(' integration', () => { ); } - before(() => { - classes = getClasses(); - }); - it('should render a th with the head class when in the context of a table head', () => { const { getByTestId } = renderInTable(, TableHead); expect(getByTestId('cell')).to.have.tagName('th');