[Tabs] Migrate Tabs to emotion

docs/pages/api-docs/tabs.json

@@ -23,8 +23,9 @@
       "default": "'auto'"
     },
     "selectionFollowsFocus": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "TabIndicatorProps": { "type": { "name": "object" }, "default": "{}" },
-    "TabScrollButtonProps": { "type": { "name": "object" } },
+    "TabScrollButtonProps": { "type": { "name": "object" }, "default": "{}" },
     "textColor": {
       "type": {
         "name": "enum",
@@ -67,6 +68,6 @@
   "filename": "/packages/material-ui/src/Tabs/Tabs.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/tabs/\">Tabs</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/tabs/tabs.json

@@ -15,6 +15,7 @@
     "ScrollButtonComponent": "The component used to render the scroll buttons.",
     "scrollButtons": "Determine behavior of scroll buttons when tabs are set to scroll:<br>- <code>auto</code> will only present them when not all the items are visible. - <code>true</code> will always present them. - <code>false</code> will never present them.<br>By default the scroll buttons are hidden on mobile. This behavior can be disabled with <code>allowScrollButtonsMobile</code>.",
     "selectionFollowsFocus": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation.",
+    "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.",
     "TabIndicatorProps": "Props applied to the tab indicator element.",
     "TabScrollButtonProps": "Props applied to the <a href=\"/api/tab-scroll-button/\"><code>TabScrollButton</code></a> element.",
     "textColor": "Determines the color of the <code>Tab</code>.",

framer/scripts/framerConfig.js

@@ -314,6 +314,7 @@ export const componentSettings = {
   },
   Tabs: {
     ignoredProps: [
+      'sx',
       'action',
       'children',
       'onChange',

packages/material-ui-lab/src/TabList/TabList.test.js

@@ -1,24 +1,16 @@
 // @ts-check
 import * as React from 'react';
 import { expect } from 'chai';
-import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
+import { createClientRender, createMount, describeConformance } from 'test/utils';
 import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
+import Tabs, { tabsClasses as classes } from '@material-ui/core/Tabs';
 import TabList from './TabList';
 import TabContext from '../TabContext';
 
 describe('<TabList />', () => {
   const mount = createMount();
-  /**
-   * @type {Record<string, string>}
-   */
-  let classes;
   const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<Tabs />);
-  });
-
   /**
    *
    * @param {React.ReactNode} node

packages/material-ui/src/Tabs/Tabs.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '../styles';
 import ButtonBase from '../ButtonBase';
 import { TabScrollButtonProps } from '../TabScrollButton';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
@@ -115,6 +117,7 @@ export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof Button
     TabIndicatorProps?: Partial<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element.
+     * @default {}
      */
     TabScrollButtonProps?: Partial<TabScrollButtonProps>;
     /**
@@ -144,6 +147,10 @@ export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof Button
      * @default false
      */
     visibleScrollbar?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }