[TabPanel] Migrate to emotion (#25646)

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": "<ul><li><a href=\"/components/tabs/\">Tabs</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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 <a href=\"#css\">CSS API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "value": "The <code>value</code> of the corresponding <code>Tab</code>. Must use the index of the <code>Tab</code> when no <code>value</code> was passed to <code>Tab</code>."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

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<TabPanelProps['classes']>;
 
@@ -15,6 +17,10 @@ export interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDi
     /** Styles applied to the root element. */
     root?: string;
   };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
    * no `value` was passed to `Tab`.

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 (
-    <div
+    <TabPanelRoot
       aria-labelledby={tabId}
       className={clsx(classes.root, className)}
       hidden={value !== context.value}
       id={id}
       ref={ref}
       role="tabpanel"
+      styleProps={styleProps}
       {...other}
     >
       {value === context.value && children}
-    </div>
+    </TabPanelRoot>
   );
 });
 
@@ -54,11 +84,15 @@ 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`.
    */
   value: PropTypes.string.isRequired,
 };
 
-export default withStyles(styles, { name: 'MuiTabPanel' })(TabPanel);
+export default TabPanel;

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('<TabPanel />', () => {
   const mount = createMount();
-  let classes: Record<string, string>;
   const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<TabPanel value="0" />);
-  });
-
-  describeConformance(<TabPanel value="0" />, () => ({
+  describeConformanceV5(<TabPanel value="0" />, () => ({
     classes,
     inheritComponent: 'div',
-    mount: (node) => mount(<TabContext value="0">{node}</TabContext>),
+    render: (node: any) => render(<TabContext value="0">{node}</TabContext>),
+    mount: (node: any) => mount(<TabContext value="0">{node}</TabContext>),
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp', 'reactTestRenderer'],
+    muiName: 'MuiTabPanel',
+    skip: [
+      'componentProp',
+      'componentsProp',
+      'reactTestRenderer',
+      'themeDefaultProps',
+      'themeVariants',
+    ],
   }));
 
   it('renders a [role="tabpanel"]', () => {

packages/material-ui-lab/src/TabPanel/index.js

@@ -1 +1,4 @@
 export { default } from './TabPanel';
+
+export { default as tabPanelClasses } from './tabPanelClasses';
+export * from './tabPanelClasses';

packages/material-ui-lab/src/TabPanel/tabPanelClasses.d.ts

@@ -0,0 +1,9 @@
+import { TabPanelClassKey } from './TabPanel';
+
+export type TabPanelClasses = Record<TabPanelClassKey, string>;
+
+declare const tabPanelClasses: TabPanelClasses;
+
+export function getTabPanelUtilityClass(slot: string): string;
+
+export default tabPanelClasses;

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;