From a11b2df07447c1851020bc0390b80077d34e21ba Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Tue, 9 Feb 2021 19:50:39 -0500 Subject: [PATCH] [Table] Migrate TableHead to emotion (#24686) --- docs/pages/api-docs/table-head.json | 5 +- .../api-docs/table-head/table-head.json | 3 +- .../material-ui/src/TableHead/TableHead.d.ts | 6 ++ .../material-ui/src/TableHead/TableHead.js | 57 +++++++++++++++---- .../src/TableHead/TableHead.test.js | 18 +++--- packages/material-ui/src/TableHead/index.d.ts | 3 + packages/material-ui/src/TableHead/index.js | 3 + .../src/TableHead/tableHeadClasses.d.ts | 7 +++ .../src/TableHead/tableHeadClasses.js | 9 +++ 9 files changed, 89 insertions(+), 22 deletions(-) create mode 100644 packages/material-ui/src/TableHead/tableHeadClasses.d.ts create mode 100644 packages/material-ui/src/TableHead/tableHeadClasses.js diff --git a/docs/pages/api-docs/table-head.json b/docs/pages/api-docs/table-head.json index c0a0f87437f439..7f2db27588cb2a 100644 --- a/docs/pages/api-docs/table-head.json +++ b/docs/pages/api-docs/table-head.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": "TableHead", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTableHead" }, @@ -11,6 +12,6 @@ "filename": "/packages/material-ui/src/TableHead/TableHead.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/table-head/table-head.json b/docs/translations/api-docs/table-head/table-head.json index a97666a1f27185..170e1b7f0c5c68 100644 --- a/docs/translations/api-docs/table-head/table-head.json +++ b/docs/translations/api-docs/table-head/table-head.json @@ -3,7 +3,8 @@ "propDescriptions": { "children": "The content of the component, normally TableRow.", "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/TableHead/TableHead.d.ts b/packages/material-ui/src/TableHead/TableHead.d.ts index 2974874fc15873..24a731b6fa4b0e 100644 --- a/packages/material-ui/src/TableHead/TableHead.d.ts +++ b/packages/material-ui/src/TableHead/TableHead.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 TableHeadTypeMap

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

/** Styles applied to the root element. */ root?: string; }; + /** + * 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/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js index ea7c0a6a79a757..3634548b25ee25 100644 --- a/packages/material-ui/src/TableHead/TableHead.js +++ b/packages/material-ui/src/TableHead/TableHead.js @@ -1,31 +1,62 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import withStyles from '../styles/withStyles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import Tablelvl2Context from '../Table/Tablelvl2Context'; +import useThemeProps from '../styles/useThemeProps'; +import experimentalStyled from '../styles/experimentalStyled'; +import { getTableHeadUtilityClass } from './tableHeadClasses'; -export const styles = { - /* Styles applied to the root element. */ - root: { - display: 'table-header-group', - }, +const overridesResolver = (props, styles) => styles.root || {}; + +const useUtilityClasses = (styleProps) => { + const { classes } = styleProps; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getTableHeadUtilityClass, classes); }; +const TableHeadRoot = experimentalStyled( + 'thead', + {}, + { + name: 'MuiTableHead', + slot: 'Root', + overridesResolver, + }, +)({ + /* Styles applied to the root element. */ + display: 'table-header-group', +}); + const tablelvl2 = { variant: 'head', }; const defaultComponent = 'thead'; -const TableHead = React.forwardRef(function TableHead(props, ref) { - const { classes, className, component: Component = defaultComponent, ...other } = props; +const TableHead = React.forwardRef(function TableHead(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTableHead' }); + const { className, component = defaultComponent, ...other } = props; + + const styleProps = { + ...props, + component, + }; + + const classes = useUtilityClasses(styleProps); return ( - @@ -54,6 +85,10 @@ TableHead.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: 'MuiTableHead' })(TableHead); +export default TableHead; diff --git a/packages/material-ui/src/TableHead/TableHead.test.js b/packages/material-ui/src/TableHead/TableHead.test.js index 361135fdc8e976..b5924a1618fd68 100644 --- a/packages/material-ui/src/TableHead/TableHead.test.js +++ b/packages/material-ui/src/TableHead/TableHead.test.js @@ -1,31 +1,33 @@ 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 TableHead from './TableHead'; import Tablelvl2Context from '../Table/Tablelvl2Context'; +import classes from './tableHeadClasses'; describe('', () => { const mount = createMount(); - let classes; const render = createClientRender(); function renderInTable(node) { return render({node}
); } - before(() => { - classes = getClasses(foo); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'thead', mount: (node) => { const wrapper = mount({node}
); return wrapper.find('table').childAt(0); }, - + render: (node) => { + const { container, ...rest } = render({node}
); + return { container: container.firstChild, ...rest }; + }, + muiName: 'MuiTableHead', + testVariantProps: { variant: 'foo' }, refInstanceof: window.HTMLTableSectionElement, testComponentPropWith: 'tbody', + skip: ['componentsProp'], })); it('should render children', () => { diff --git a/packages/material-ui/src/TableHead/index.d.ts b/packages/material-ui/src/TableHead/index.d.ts index 28fd2bf1f52c65..49a16b6d313cb8 100644 --- a/packages/material-ui/src/TableHead/index.d.ts +++ b/packages/material-ui/src/TableHead/index.d.ts @@ -1,2 +1,5 @@ export { default } from './TableHead'; export * from './TableHead'; + +export { default as tableHeadClasses } from './tableHeadClasses'; +export * from './tableHeadClasses'; diff --git a/packages/material-ui/src/TableHead/index.js b/packages/material-ui/src/TableHead/index.js index 9cc6eda5bfb8ad..c7622e8ab2424f 100644 --- a/packages/material-ui/src/TableHead/index.js +++ b/packages/material-ui/src/TableHead/index.js @@ -1 +1,4 @@ export { default } from './TableHead'; + +export { default as tableHeadClasses } from './tableHeadClasses'; +export * from './tableHeadClasses'; diff --git a/packages/material-ui/src/TableHead/tableHeadClasses.d.ts b/packages/material-ui/src/TableHead/tableHeadClasses.d.ts new file mode 100644 index 00000000000000..b02098c6af4bce --- /dev/null +++ b/packages/material-ui/src/TableHead/tableHeadClasses.d.ts @@ -0,0 +1,7 @@ +import { TableHeadClassKey } from './TableHead'; + +declare const tableHeadClasses: Record; + +export function getTableHeadUtilityClass(slot: string): string; + +export default tableHeadClasses; diff --git a/packages/material-ui/src/TableHead/tableHeadClasses.js b/packages/material-ui/src/TableHead/tableHeadClasses.js new file mode 100644 index 00000000000000..6e2e95eea3a9ed --- /dev/null +++ b/packages/material-ui/src/TableHead/tableHeadClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTableHeadUtilityClass(slot) { + return generateUtilityClass('MuiTableHead', slot); +} + +const tableHeadClasses = generateUtilityClasses('MuiTableHead', ['root']); + +export default tableHeadClasses;