From c67c47c617a77722d3862b301c3b14e0431ae7b5 Mon Sep 17 00:00:00 2001 From: Constantine Antonakos Date: Tue, 13 Apr 2021 20:22:22 -0400 Subject: [PATCH] [WIP] Migrate Tabs to emotion --- docs/pages/api-docs/tabs.json | 5 +- docs/translations/api-docs/tabs/tabs.json | 3 +- packages/material-ui/src/Tabs/Tabs.js | 82 ++++++++++++++++++++++- packages/material-ui/src/Tabs/classes.js | 23 +++++++ packages/material-ui/src/Tabs/index.js | 3 + 5 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 packages/material-ui/src/Tabs/classes.js diff --git a/docs/pages/api-docs/tabs.json b/docs/pages/api-docs/tabs.json index 030612dc0881e7..f5c7d92a17513f 100644 --- a/docs/pages/api-docs/tabs.json +++ b/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": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/tabs/tabs.json b/docs/translations/api-docs/tabs/tabs.json index 61c69d3f4dc61a..5a1296ad0a9dc2 100644 --- a/docs/translations/api-docs/tabs/tabs.json +++ b/docs/translations/api-docs/tabs/tabs.json @@ -20,7 +20,8 @@ "textColor": "Determines the color of the Tab.", "value": "The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.", "variant": "Determines additional display behavior of the tabs:
- scrollable will invoke scrolling properties and allow for horizontally scrolling (or swiping) of the tab bar. -fullWidth will make the tabs grow to use all the available space, which should be used for small views, like on mobile. - standard will render the default state.", - "visibleScrollbar": "If true, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs." + "visibleScrollbar": "If true, 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 `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 4e8424c5813944..d0eaceae22884f 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/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: { diff --git a/packages/material-ui/src/Tabs/classes.js b/packages/material-ui/src/Tabs/classes.js new file mode 100644 index 00000000000000..cfae1a8f882bdf --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/material-ui/src/Tabs/index.js b/packages/material-ui/src/Tabs/index.js index bc6749b1b261a6..fb1d70abb524c5 100644 --- a/packages/material-ui/src/Tabs/index.js +++ b/packages/material-ui/src/Tabs/index.js @@ -1 +1,4 @@ export { default } from './Tabs'; + +export { default as tabsClasses } from './classes' +export * from './classes'