From 6ee0cb0979d65883b4f0f2ba77a604722241a50a Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Thu, 28 Jan 2021 02:35:26 -0500 Subject: [PATCH] [Table] Migrate TableContainer to emotion (#24666) --- docs/pages/api-docs/table-container.json | 5 +- .../table-container/table-container.json | 3 +- .../src/TableContainer/TableContainer.d.ts | 6 ++ .../src/TableContainer/TableContainer.js | 63 +++++++++++++++---- .../src/TableContainer/TableContainer.test.js | 13 ++-- .../material-ui/src/TableContainer/index.d.ts | 3 + .../material-ui/src/TableContainer/index.js | 3 + .../TableContainer/tableContainerClasses.d.ts | 9 +++ .../TableContainer/tableContainerClasses.js | 9 +++ 9 files changed, 93 insertions(+), 21 deletions(-) create mode 100644 packages/material-ui/src/TableContainer/tableContainerClasses.d.ts create mode 100644 packages/material-ui/src/TableContainer/tableContainerClasses.js diff --git a/docs/pages/api-docs/table-container.json b/docs/pages/api-docs/table-container.json index 950abe5730e42d..0b72a0b83cd4b6 100644 --- a/docs/pages/api-docs/table-container.json +++ b/docs/pages/api-docs/table-container.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "component": { "type": { "name": "elementType" } } + "component": { "type": { "name": "elementType" } }, + "sx": { "type": { "name": "object" } } }, "name": "TableContainer", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTableContainer" }, @@ -11,6 +12,6 @@ "filename": "/packages/material-ui/src/TableContainer/TableContainer.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/table-container/table-container.json b/docs/translations/api-docs/table-container/table-container.json index d2c2d1ad71074a..e9f75a7479c581 100644 --- a/docs/translations/api-docs/table-container/table-container.json +++ b/docs/translations/api-docs/table-container/table-container.json @@ -3,7 +3,8 @@ "propDescriptions": { "children": "The content of the component, normally Table.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", - "component": "The component used for the root node. Either a string to use a HTML element or a component." + "component": "The component used for the root node. Either a string to use a HTML element or a component.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } } } diff --git a/packages/material-ui/src/TableContainer/TableContainer.d.ts b/packages/material-ui/src/TableContainer/TableContainer.d.ts index 3ed1e5e399b715..436e0908451e67 100644 --- a/packages/material-ui/src/TableContainer/TableContainer.d.ts +++ b/packages/material-ui/src/TableContainer/TableContainer.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 TableContainerTypeMap

{ @@ -14,6 +16,10 @@ export interface TableContainerTypeMap

styles.root || {}; + +const useUtilityClasses = (styleProps) => { + const { classes } = styleProps; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getTableContainerUtilityClass, classes); }; -const TableContainer = React.forwardRef(function TableContainer(props, ref) { - const { classes, className, component: Component = 'div', ...other } = props; +const TableContainerRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiTableContainer', + slot: 'Root', + overridesResolver, + }, +)({ + /* Styles applied to the root element. */ + width: '100%', + overflowX: 'auto', +}); + +const TableContainer = React.forwardRef(function TableContainer(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTableContainer' }); + const { className, component = 'div', ...other } = props; + + const styleProps = { + ...props, + component, + }; - return ; + const classes = useUtilityClasses(styleProps); + + return ( + + ); }); TableContainer.propTypes = { @@ -39,6 +76,10 @@ TableContainer.propTypes = { * Either a string to use a HTML element or a component. */ component: PropTypes.elementType, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiTableContainer' })(TableContainer); +export default TableContainer; diff --git a/packages/material-ui/src/TableContainer/TableContainer.test.js b/packages/material-ui/src/TableContainer/TableContainer.test.js index be6115226bf6c8..049689f6a500f0 100644 --- a/packages/material-ui/src/TableContainer/TableContainer.test.js +++ b/packages/material-ui/src/TableContainer/TableContainer.test.js @@ -1,20 +1,19 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance } from 'test/utils'; +import { createMount, describeConformanceV5 } from 'test/utils'; import TableContainer from './TableContainer'; +import classes from './tableContainerClasses'; describe('', () => { const mount = createMount(); - let classes; - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'div', mount, + muiName: 'MuiTableContainer', + testVariantProps: { variant: 'foo' }, refInstanceof: window.HTMLDivElement, testComponentPropWith: 'span', + skip: ['componentsProp'], })); }); diff --git a/packages/material-ui/src/TableContainer/index.d.ts b/packages/material-ui/src/TableContainer/index.d.ts index 16d9e906fa092b..509adcea1ae86a 100644 --- a/packages/material-ui/src/TableContainer/index.d.ts +++ b/packages/material-ui/src/TableContainer/index.d.ts @@ -1,2 +1,5 @@ export { default } from './TableContainer'; export * from './TableContainer'; + +export { default as tableContainerClasses } from './tableContainerClasses'; +export * from './tableContainerClasses'; diff --git a/packages/material-ui/src/TableContainer/index.js b/packages/material-ui/src/TableContainer/index.js index 891964a7c8afa3..094fb1fd2e1fb4 100644 --- a/packages/material-ui/src/TableContainer/index.js +++ b/packages/material-ui/src/TableContainer/index.js @@ -1 +1,4 @@ export { default } from './TableContainer'; + +export { default as tableContainerClasses } from './tableContainerClasses'; +export * from './tableContainerClasses'; diff --git a/packages/material-ui/src/TableContainer/tableContainerClasses.d.ts b/packages/material-ui/src/TableContainer/tableContainerClasses.d.ts new file mode 100644 index 00000000000000..482888119d2845 --- /dev/null +++ b/packages/material-ui/src/TableContainer/tableContainerClasses.d.ts @@ -0,0 +1,9 @@ +export interface TableContainerClasses { + root: string; +} + +declare const tableContainerClasses: TableContainerClasses; + +export function getTableContainerUtilityClass(slot: string): string; + +export default tableContainerClasses; diff --git a/packages/material-ui/src/TableContainer/tableContainerClasses.js b/packages/material-ui/src/TableContainer/tableContainerClasses.js new file mode 100644 index 00000000000000..9db5137d2758f1 --- /dev/null +++ b/packages/material-ui/src/TableContainer/tableContainerClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTableContainerUtilityClass(slot) { + return generateUtilityClass('MuiTableContainer', slot); +} + +const tableContainerClasses = generateUtilityClasses('MuiTableContainer', ['root']); + +export default tableContainerClasses;