Migrate Tabs to emotion

docs/pages/api-docs/tabs.json

@@ -40,7 +40,8 @@
       },
       "default": "'standard'"
     },
-    "visibleScrollbar": { "type": { "name": "bool" } }
+    "visibleScrollbar": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Tabs",
   "styles": {
@@ -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

@@ -20,7 +20,8 @@
     "textColor": "Determines the color of the <code>Tab</code>.",
     "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>false</code>.",
     "variant": "Determines additional display behavior of the tabs:<br> - <code>scrollable</code> will invoke scrolling properties and allow for horizontally  scrolling (or swiping) of the tab bar.  -<code>fullWidth</code> will make the tabs grow to use all the available space,  which should be used for small views, like on mobile.  - <code>standard</code> will render the default state.",
-    "visibleScrollbar": "If <code>true</code>, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs."
+    "visibleScrollbar": "If <code>true</code>, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs.",
+    "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."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

packages/material-ui/src/Tabs/Tabs.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { refType } from '@material-ui/utils';
+import { deepmerge, refType } from '@material-ui/utils';
+import experimentalStyled from '../styles/experimentalStyled';
 import debounce from '../utils/debounce';
 import ownerWindow from '../utils/ownerWindow';
 import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
@@ -14,6 +15,85 @@ import TabScrollButton from '../TabScrollButton';
 import useEventCallback from '../utils/useEventCallback';
 import useTheme from '../styles/useTheme';
 
+const overridesResolver = (props, style) => {
+  const { styleProps} = props;
+
+  return deepmerge(styles.root || {},
+    {
+      ...(styleProps.orientation && styles[styleProps.orientation]),
+    }
+  )
+}
+
+const TabsRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiTabs',
+    slot: 'Root',
+    overridesResolver
+  }
+)(({theme, styleProps}) => ({
+
+  overflow: 'hidden',
+  minHeight: 48,
+  WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+  display: 'flex',
+
+  ...(styleProps.orientation === 'vertical' && {
+    flexDirection: 'column',
+  }),
+
+  ...(styleProps.flexContainer && {
+    display: 'flex',
+  }),
+
+  ...(styleProps.flexContainerVertical && {
+    flexDirection: 'column',
+  }),
+
+  ...(styleProps.centered && {
+    justifyContent: 'center',
+  }),
+
+  ...(styleProps.scroller && {
+    position: 'relative',
+    display: 'inline-block',
+    flex: '1 1 auto',
+    whiteSpace: 'nowrap',
+  }),
+
+  ...(styleProps.variant === 'scrollable' && {
+    ...(styleProps.orientation === 'vertical' && {
+      overflowY: 'auto',
+      overflowX: 'hidden',
+    }),
+    ...(styleProps.orientation === 'horizontal' && {
+      overflowX: 'auto',
+      overflowY: 'hidden',
+    }),
+
+    ...(styleProps.visibleScrollbar && {
+      // Hide dimensionless scrollbar on MacOS
+      scrollbarWidth: 'none', // Firefox
+      '&::-webkit-scrollbar': {
+        display: 'none', // Safari + Chrome
+      },
+    }),
+
+    ...(styleProps.indicator && {})
+  }),
+
+  ...(styleProps.scrollButtons && {}),
+
+  ...(styleProps.allowScrollButtonsMobile && {
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  }),
+
+}))
+
 export const styles = (theme) => ({
   /* Styles applied to the root element. */
   root: {

packages/material-ui/src/Tabs/classes.js

@@ -0,0 +1,23 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'
+
+export function getUtilityClasses(slot) {
+    return generateUtilityClass('MuiTabs', slot)
+}
+
+const classes = generateUtilityClasses('MuiTabs', [
+    'root',
+    'vertical',
+    'flexContainer',
+    'flexContainerVertical',
+    'centered',
+    'scroller',
+    'fixed',
+    'scrollableX',
+    'scrollableY',
+    'hideScrollbar',
+    'scrollButtons',
+    'scrollButtonsHideMobile',
+    'indicator'
+])
+
+export default classes;

packages/material-ui/src/Tabs/index.js

@@ -1 +1,4 @@
 export { default } from './Tabs';
+
+export { default as tabsClasses } from './classes'
+export * from './classes'