From 81367ef8ae4280d9930556eb7ade5d9078c2d8ac Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Thu, 28 Jan 2021 01:17:50 -0500 Subject: [PATCH] [Table] Migrate to emotion (#24657) --- docs/pages/api-docs/table.json | 5 +- docs/translations/api-docs/table/table.json | 3 +- packages/material-ui/src/Table/Table.d.ts | 6 ++ packages/material-ui/src/Table/Table.js | 94 ++++++++++++++----- packages/material-ui/src/Table/Table.test.js | 13 ++- packages/material-ui/src/Table/index.d.ts | 3 + packages/material-ui/src/Table/index.js | 3 + .../material-ui/src/Table/tableClasses.d.ts | 10 ++ .../material-ui/src/Table/tableClasses.js | 9 ++ 9 files changed, 112 insertions(+), 34 deletions(-) create mode 100644 packages/material-ui/src/Table/tableClasses.d.ts create mode 100644 packages/material-ui/src/Table/tableClasses.js diff --git a/docs/pages/api-docs/table.json b/docs/pages/api-docs/table.json index b22f7ee77afd98..80edad26ece156 100644 --- a/docs/pages/api-docs/table.json +++ b/docs/pages/api-docs/table.json @@ -14,7 +14,8 @@ "type": { "name": "enum", "description": "'medium'
| '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": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/table/table.json b/docs/translations/api-docs/table/table.json index 987c1cd0b18f4a..462ff6a771f9b3 100644 --- a/docs/translations/api-docs/table/table.json +++ b/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.
⚠️ It doesn't work with IE11." + "stickyHeader": "Set the header sticky.
⚠️ It doesn't work with IE11.", + "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/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts index e74738ca8fe366..8086ef592031e8 100644 --- a/packages/material-ui/src/Table/Table.d.ts +++ b/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

{ * @default false */ stickyHeader?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; }; defaultComponent: D; } diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index 8aa0284f0a9663..138049398c0cae 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/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 ( - @@ -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; diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js index 6ad1c58b50d9fa..dab2ee7c652e3b 100644 --- a/packages/material-ui/src/Table/Table.test.js +++ b/packages/material-ui/src/Table/Table.test.js @@ -1,19 +1,15 @@ 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('', () => { const mount = createMount(); const render = createClientRender(); - let classes; - before(() => { - classes = getClasses(
foo
); - }); - - describeConformance( + describeConformanceV5(
, @@ -21,9 +17,12 @@ describe('', () => { 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'], }), ); diff --git a/packages/material-ui/src/Table/index.d.ts b/packages/material-ui/src/Table/index.d.ts index 7427f5de0fb0ba..cdf274181d3e44 100644 --- a/packages/material-ui/src/Table/index.d.ts +++ b/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'; diff --git a/packages/material-ui/src/Table/index.js b/packages/material-ui/src/Table/index.js index ae769447ae5c96..dea2be8d78f2a0 100644 --- a/packages/material-ui/src/Table/index.js +++ b/packages/material-ui/src/Table/index.js @@ -1 +1,4 @@ export { default } from './Table'; + +export { default as tableClasses } from './tableClasses'; +export * from './tableClasses'; diff --git a/packages/material-ui/src/Table/tableClasses.d.ts b/packages/material-ui/src/Table/tableClasses.d.ts new file mode 100644 index 00000000000000..1ffe066b1ac0b9 --- /dev/null +++ b/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; diff --git a/packages/material-ui/src/Table/tableClasses.js b/packages/material-ui/src/Table/tableClasses.js new file mode 100644 index 00000000000000..6af10ab6993801 --- /dev/null +++ b/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;