From 6e666a6ea9ed646e946211c9bfe6621f3a549471 Mon Sep 17 00:00:00 2001 From: Tomasz Nguyen Date: Thu, 8 Apr 2021 02:25:48 +0200 Subject: [PATCH] [TabPanel] Migrate to emotion (#25646) --- docs/pages/api-docs/tab-panel.json | 5 +- .../api-docs/tab-panel/tab-panel.json | 1 + .../src/TabPanel/TabPanel.d.ts | 6 ++ .../material-ui-lab/src/TabPanel/TabPanel.js | 58 +++++++++++++++---- .../src/TabPanel/TabPanel.test.tsx | 22 ++++--- .../material-ui-lab/src/TabPanel/index.js | 3 + .../src/TabPanel/tabPanelClasses.d.ts | 9 +++ .../src/TabPanel/tabPanelClasses.js | 9 +++ 8 files changed, 90 insertions(+), 23 deletions(-) create mode 100644 packages/material-ui-lab/src/TabPanel/tabPanelClasses.d.ts create mode 100644 packages/material-ui-lab/src/TabPanel/tabPanelClasses.js diff --git a/docs/pages/api-docs/tab-panel.json b/docs/pages/api-docs/tab-panel.json index 646b283c0b2b89..db725f66750714 100644 --- a/docs/pages/api-docs/tab-panel.json +++ b/docs/pages/api-docs/tab-panel.json @@ -2,7 +2,8 @@ "props": { "value": { "type": { "name": "string" }, "required": true }, "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } } + "classes": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } } }, "name": "TabPanel", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTabPanel" }, @@ -11,6 +12,6 @@ "filename": "/packages/material-ui-lab/src/TabPanel/TabPanel.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/tab-panel/tab-panel.json b/docs/translations/api-docs/tab-panel/tab-panel.json index 2884bfa8016756..d6226385c4e790 100644 --- a/docs/translations/api-docs/tab-panel/tab-panel.json +++ b/docs/translations/api-docs/tab-panel/tab-panel.json @@ -3,6 +3,7 @@ "propDescriptions": { "children": "The content of the component.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The value of the corresponding Tab. Must use the index of the Tab when no value was passed to Tab." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } } diff --git a/packages/material-ui-lab/src/TabPanel/TabPanel.d.ts b/packages/material-ui-lab/src/TabPanel/TabPanel.d.ts index 7617b53bf38b4a..559b06625f9804 100644 --- a/packages/material-ui-lab/src/TabPanel/TabPanel.d.ts +++ b/packages/material-ui-lab/src/TabPanel/TabPanel.d.ts @@ -1,5 +1,7 @@ import * as React from 'react'; import { InternalStandardProps as StandardProps } from '@material-ui/core'; +import { Theme } from '@material-ui/styles'; +import { SxProps } from '@material-ui/system'; export type TabPanelClassKey = keyof NonNullable; @@ -15,6 +17,10 @@ export interface TabPanelProps extends StandardProps; /** * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when * no `value` was passed to `Tab`. diff --git a/packages/material-ui-lab/src/TabPanel/TabPanel.js b/packages/material-ui-lab/src/TabPanel/TabPanel.js index 5d78346eb6207e..47cdfa86840912 100644 --- a/packages/material-ui-lab/src/TabPanel/TabPanel.js +++ b/packages/material-ui-lab/src/TabPanel/TabPanel.js @@ -1,20 +1,49 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import { + experimentalStyled, + unstable_useThemeProps as useThemeProps, +} from '@material-ui/core/styles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { getTabPanelUtilityClass } from './tabPanelClasses'; import { getPanelId, getTabId, useTabContext } from '../TabContext'; -export const styles = (theme) => { - return { - /* Styles applied to the root element. */ - root: { - padding: theme.spacing(3), - }, +const overridesResolver = (props, styles) => styles.root || {}; + +const useUtilityClasses = (styleProps) => { + const { classes } = styleProps; + + const slots = { + root: ['root'], }; + + return composeClasses(slots, getTabPanelUtilityClass, classes); }; -const TabPanel = React.forwardRef(function TabPanel(props, ref) { - const { children, className, classes, value, ...other } = props; +const TabPanelRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiTabPanel', + slot: 'root', + overridesResolver, + }, +)(({ theme }) => ({ + padding: theme.spacing(3), +})); + +const TabPanel = React.forwardRef(function TabPanel(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTabPanel' }); + + const { children, className, value, ...other } = props; + + const styleProps = { + ...props, + }; + + const classes = useUtilityClasses(styleProps); + const context = useTabContext(); if (context === null) { throw new TypeError('No TabContext provided'); @@ -23,17 +52,18 @@ const TabPanel = React.forwardRef(function TabPanel(props, ref) { const tabId = getTabId(context, value); return ( - + ); }); @@ -54,6 +84,10 @@ TabPanel.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when * no `value` was passed to `Tab`. @@ -61,4 +95,4 @@ TabPanel.propTypes /* remove-proptypes */ = { value: PropTypes.string.isRequired, }; -export default withStyles(styles, { name: 'MuiTabPanel' })(TabPanel); +export default TabPanel; diff --git a/packages/material-ui-lab/src/TabPanel/TabPanel.test.tsx b/packages/material-ui-lab/src/TabPanel/TabPanel.test.tsx index 7e75958c6da72f..a4e05895a079cc 100644 --- a/packages/material-ui-lab/src/TabPanel/TabPanel.test.tsx +++ b/packages/material-ui-lab/src/TabPanel/TabPanel.test.tsx @@ -1,24 +1,28 @@ 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 TabPanel from './TabPanel'; +import classes from './tabPanelClasses'; import TabContext from '../TabContext'; describe('', () => { const mount = createMount(); - let classes: Record; const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'div', - mount: (node) => mount({node}), + render: (node: any) => render({node}), + mount: (node: any) => mount({node}), refInstanceof: window.HTMLDivElement, - skip: ['componentProp', 'reactTestRenderer'], + muiName: 'MuiTabPanel', + skip: [ + 'componentProp', + 'componentsProp', + 'reactTestRenderer', + 'themeDefaultProps', + 'themeVariants', + ], })); it('renders a [role="tabpanel"]', () => { diff --git a/packages/material-ui-lab/src/TabPanel/index.js b/packages/material-ui-lab/src/TabPanel/index.js index 637eaf35732515..2e778673ea5df7 100644 --- a/packages/material-ui-lab/src/TabPanel/index.js +++ b/packages/material-ui-lab/src/TabPanel/index.js @@ -1 +1,4 @@ export { default } from './TabPanel'; + +export { default as tabPanelClasses } from './tabPanelClasses'; +export * from './tabPanelClasses'; diff --git a/packages/material-ui-lab/src/TabPanel/tabPanelClasses.d.ts b/packages/material-ui-lab/src/TabPanel/tabPanelClasses.d.ts new file mode 100644 index 00000000000000..ea0d7ca044e4ad --- /dev/null +++ b/packages/material-ui-lab/src/TabPanel/tabPanelClasses.d.ts @@ -0,0 +1,9 @@ +import { TabPanelClassKey } from './TabPanel'; + +export type TabPanelClasses = Record; + +declare const tabPanelClasses: TabPanelClasses; + +export function getTabPanelUtilityClass(slot: string): string; + +export default tabPanelClasses; diff --git a/packages/material-ui-lab/src/TabPanel/tabPanelClasses.js b/packages/material-ui-lab/src/TabPanel/tabPanelClasses.js new file mode 100644 index 00000000000000..085155539cce82 --- /dev/null +++ b/packages/material-ui-lab/src/TabPanel/tabPanelClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTabPanelUtilityClass(slot) { + return generateUtilityClass('MuiTabPanel', slot); +} + +const tabPanelClasses = generateUtilityClasses('MuiTabPanel', ['root']); + +export default tabPanelClasses;