From a632b2ec60d8757cb5021b7ac9c38ff8ca8f731d Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Wed, 27 Jan 2021 11:13:57 -0500 Subject: [PATCH 1/5] TabScrollButton to emotion --- docs/pages/api-docs/tab-scroll-button.json | 5 +- .../tab-scroll-button/tab-scroll-button.json | 3 +- .../src/TabScrollButton/TabScrollButton.d.ts | 7 +- .../src/TabScrollButton/TabScrollButton.js | 87 +++++++++++++------ .../TabScrollButton/TabScrollButton.test.js | 13 ++- .../src/TabScrollButton/index.d.ts | 3 + .../material-ui/src/TabScrollButton/index.js | 3 + .../tabScrollButtonClasses.d.ts | 12 +++ .../TabScrollButton/tabScrollButtonClasses.js | 14 +++ 9 files changed, 109 insertions(+), 38 deletions(-) create mode 100644 packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.d.ts create mode 100644 packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.js diff --git a/docs/pages/api-docs/tab-scroll-button.json b/docs/pages/api-docs/tab-scroll-button.json index 36347802b0b4d2..7d0b71e338cf41 100644 --- a/docs/pages/api-docs/tab-scroll-button.json +++ b/docs/pages/api-docs/tab-scroll-button.json @@ -10,7 +10,8 @@ }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "disabled": { "type": { "name": "bool" } } + "disabled": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "TabScrollButton", "styles": { @@ -23,6 +24,6 @@ "filename": "/packages/material-ui/src/TabScrollButton/TabScrollButton.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/tab-scroll-button/tab-scroll-button.json b/docs/translations/api-docs/tab-scroll-button/tab-scroll-button.json index fd44b10237c76d..d87085874031d6 100644 --- a/docs/translations/api-docs/tab-scroll-button/tab-scroll-button.json +++ b/docs/translations/api-docs/tab-scroll-button/tab-scroll-button.json @@ -5,7 +5,8 @@ "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "direction": "The direction the button should indicate.", "disabled": "If true, the component is disabled.", - "orientation": "The component orientation (layout flow direction)." + "orientation": "The component orientation (layout flow direction).", + "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/TabScrollButton/TabScrollButton.d.ts b/packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts index 0a873523d68996..a07f7806add488 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.d.ts @@ -1,5 +1,6 @@ +import { SxProps } from '@material-ui/system'; import * as React from 'react'; -import { InternalStandardProps as StandardProps } from '..'; +import { InternalStandardProps as StandardProps, Theme } from '..'; export interface TabScrollButtonProps extends StandardProps> { /** @@ -29,6 +30,10 @@ export interface TabScrollButtonProps extends StandardProps; } export type TabScrollButtonClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.js index 6f76a90cbe02a0..2f33b86c5dd0f6 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.js +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.js @@ -2,49 +2,78 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import { deepmerge } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft'; import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight'; -import withStyles from '../styles/withStyles'; import ButtonBase from '../ButtonBase'; -export const styles = { +import useThemeProps from '../styles/useThemeProps'; +import experimentalStyled from '../styles/experimentalStyled'; +import { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses'; + +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...styles[styleProps.orientation], + }); +}; + +const useUtilityClasses = (styleProps) => { + const { classes, orientation, disabled } = styleProps; + + const slots = { + root: ['root', orientation, disabled && 'disabled'], + }; + + return composeClasses(slots, getTabScrollButtonUtilityClass, classes); +}; + +const TabScrollButtonRoot = experimentalStyled( + ButtonBase, + {}, + { + name: 'MuiTabScrollButton', + slot: 'Root', + overridesResolver, + }, +)(({ styleProps }) => ({ /* Styles applied to the root element. */ - root: { - width: 40, - flexShrink: 0, - opacity: 0.8, - '&$disabled': { - opacity: 0, - }, + width: 40, + flexShrink: 0, + opacity: 0.8, + '&.Mui-disabled': { + opacity: 0, }, /* Styles applied to the root element if `orientation="vertical"`. */ - vertical: { + ...(styleProps.orientation === 'vertical' && { width: '100%', height: 40, '& svg': { transform: 'rotate(90deg)', }, - }, - /* Pseudo-class applied to the root element if `disabled={true}`. */ - disabled: {}, -}; + }), +})); + +const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTabScrollButton' }); + const { className: classNameProp, direction, orientation, disabled, ...other } = props; -const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) { - const { classes, className: classNameProp, direction, orientation, disabled, ...other } = props; + const styleProps = { + ...props, + orientation, + }; + + const classes = useUtilityClasses(styleProps); return ( - @@ -53,7 +82,7 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) { ) : ( )} - + ); }); @@ -86,6 +115,10 @@ TabScrollButton.propTypes = { * The component orientation (layout flow direction). */ orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiTabScrollButton' })(TabScrollButton); +export default TabScrollButton; diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.test.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.test.js index 41ee14947e2ccb..8ff8ef2af2cade 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.test.js +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.test.js @@ -1,7 +1,8 @@ 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 TabScrollButton from './TabScrollButton'; +import classes from './tabScrollButtonClasses'; describe('', () => { const defaultProps = { @@ -9,18 +10,16 @@ describe('', () => { orientation: 'horizontal', }; const render = createClientRender(); - let classes; const mount = createMount(); - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'div', mount, + muiName: 'MuiTabScrollButton', + testVariantProps: { orientation: 'vertical' }, refInstanceof: window.HTMLDivElement, + skip: ['componentProp', 'componentsProp'], })); it('should render as a button with the root class', () => { diff --git a/packages/material-ui/src/TabScrollButton/index.d.ts b/packages/material-ui/src/TabScrollButton/index.d.ts index f9b040fc0ac5d2..6a0eacea7df14d 100644 --- a/packages/material-ui/src/TabScrollButton/index.d.ts +++ b/packages/material-ui/src/TabScrollButton/index.d.ts @@ -1,2 +1,5 @@ export { default } from './TabScrollButton'; export * from './TabScrollButton'; + +export { default as tabScrollButtonClasses } from './tabScrollButtonClasses'; +export * from './tabScrollButtonClasses'; diff --git a/packages/material-ui/src/TabScrollButton/index.js b/packages/material-ui/src/TabScrollButton/index.js index 823ab12964e3cd..6c84cb4dca3377 100644 --- a/packages/material-ui/src/TabScrollButton/index.js +++ b/packages/material-ui/src/TabScrollButton/index.js @@ -1 +1,4 @@ export { default } from './TabScrollButton'; + +export { default as tabScrollButtonClasses } from './tabScrollButtonClasses'; +export * from './tabScrollButtonClasses'; diff --git a/packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.d.ts b/packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.d.ts new file mode 100644 index 00000000000000..2a6015fbc0ee37 --- /dev/null +++ b/packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.d.ts @@ -0,0 +1,12 @@ +export interface TabScrollButtonClasses { + root: string; + vertical: string; + horizontal: string; + disabled: string; +} + +declare const tabScrollButtonClasses: TabScrollButtonClasses; + +export function getTabScrollButtonUtilityClass(slot: string): string; + +export default tabScrollButtonClasses; diff --git a/packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.js b/packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.js new file mode 100644 index 00000000000000..a2f41cc3183b01 --- /dev/null +++ b/packages/material-ui/src/TabScrollButton/tabScrollButtonClasses.js @@ -0,0 +1,14 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTabScrollButtonUtilityClass(slot) { + return generateUtilityClass('MuiTabScrollButton', slot); +} + +const tabScrollButtonClasses = generateUtilityClasses('MuiTabScrollButton', [ + 'root', + 'vertical', + 'horizontal', + 'disabled', +]); + +export default tabScrollButtonClasses; From 172b32a8d21b3c8a1bcce90c903e153aafc504cd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 28 Jan 2021 09:29:50 +0100 Subject: [PATCH 2/5] Update packages/material-ui/src/TabScrollButton/TabScrollButton.js --- packages/material-ui/src/TabScrollButton/TabScrollButton.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.js index 2f33b86c5dd0f6..47b173927df996 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.js +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.js @@ -60,10 +60,8 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref) const props = useThemeProps({ props: inProps, name: 'MuiTabScrollButton' }); const { className: classNameProp, direction, orientation, disabled, ...other } = props; - const styleProps = { - ...props, - orientation, - }; + // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed + const styleProps = { ...props }; const classes = useUtilityClasses(styleProps); From e0ca1f98b863dd24fe6644b852a18966829151c4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 28 Jan 2021 09:29:57 +0100 Subject: [PATCH 3/5] Update packages/material-ui/src/TabScrollButton/TabScrollButton.js --- packages/material-ui/src/TabScrollButton/TabScrollButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.js index 47b173927df996..d25c9a811b4cc5 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.js +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.js @@ -58,7 +58,7 @@ const TabScrollButtonRoot = experimentalStyled( const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiTabScrollButton' }); - const { className: classNameProp, direction, orientation, disabled, ...other } = props; + const { className, direction, orientation, disabled, ...other } = props; // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed const styleProps = { ...props }; From e4db2c794e946590ccfbe36b370aac24bfbb7e83 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 28 Jan 2021 09:30:04 +0100 Subject: [PATCH 4/5] Update packages/material-ui/src/TabScrollButton/TabScrollButton.js --- packages/material-ui/src/TabScrollButton/TabScrollButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.js index d25c9a811b4cc5..9169898d9735a4 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.js +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.js @@ -68,7 +68,7 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref) return ( Date: Thu, 28 Jan 2021 09:30:11 +0100 Subject: [PATCH 5/5] Update packages/material-ui/src/TabScrollButton/TabScrollButton.js --- packages/material-ui/src/TabScrollButton/TabScrollButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.js index 9169898d9735a4..87310e637fb873 100644 --- a/packages/material-ui/src/TabScrollButton/TabScrollButton.js +++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.js @@ -16,7 +16,7 @@ const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root || {}, { - ...styles[styleProps.orientation], + ...(styleProps.orientation && styles[styleProps.orientation]), }); };