From e9cee8a828d756f0bc8eff8ee79ad82a2ff5f651 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Mon, 25 Jan 2021 11:27:16 -0500 Subject: [PATCH 01/12] Fab to emotion --- docs/pages/api-docs/fab.json | 3 +- docs/translations/api-docs/fab/fab.json | 1 + framer/scripts/framerConfig.js | 1 + packages/material-ui/src/Fab/Fab.d.ts | 7 +- packages/material-ui/src/Fab/Fab.js | 260 +++++++++++-------- packages/material-ui/src/Fab/Fab.test.js | 17 +- packages/material-ui/src/Fab/fabClasses.d.ts | 19 ++ packages/material-ui/src/Fab/fabClasses.js | 21 ++ packages/material-ui/src/Fab/index.d.ts | 3 + packages/material-ui/src/Fab/index.js | 3 + 10 files changed, 212 insertions(+), 123 deletions(-) create mode 100644 packages/material-ui/src/Fab/fabClasses.d.ts create mode 100644 packages/material-ui/src/Fab/fabClasses.js diff --git a/docs/pages/api-docs/fab.json b/docs/pages/api-docs/fab.json index 67e5ff3272d189..c5928f084db175 100644 --- a/docs/pages/api-docs/fab.json +++ b/docs/pages/api-docs/fab.json @@ -21,6 +21,7 @@ }, "default": "'large'" }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -52,6 +53,6 @@ "filename": "/packages/material-ui/src/Fab/Fab.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/fab/fab.json b/docs/translations/api-docs/fab/fab.json index 7216e76d8fa3fb..408c2621ecd582 100644 --- a/docs/translations/api-docs/fab/fab.json +++ b/docs/translations/api-docs/fab/fab.json @@ -10,6 +10,7 @@ "disableRipple": "If true, the ripple effect is disabled.", "href": "The URL to link to when the button is clicked. If defined, an a element will be used as the root node.", "size": "The size of the component. small is equivalent to the dense button styling.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, "classDescriptions": { diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index d4ce7dc1b9748a..d335688d672d68 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -161,6 +161,7 @@ export const componentSettings = { }, Fab: { ignoredProps: [ + 'sx', 'children', 'disableFocusRipple', // FIXME: `Union` diff --git a/packages/material-ui/src/Fab/Fab.d.ts b/packages/material-ui/src/Fab/Fab.d.ts index f60f5b979d05f8..8ee98a096b1f69 100644 --- a/packages/material-ui/src/Fab/Fab.d.ts +++ b/packages/material-ui/src/Fab/Fab.d.ts @@ -1,5 +1,6 @@ import { OverridableStringUnion } from '@material-ui/types'; -import { PropTypes } from '..'; +import { SxProps } from '@material-ui/system'; +import { PropTypes, Theme } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; @@ -74,6 +75,10 @@ export type FabTypeMap

= ExtendB * @default 'circular' */ variant?: OverridableStringUnion; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; }; defaultComponent: D; }>; diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 14e82ea90080f7..12067fce06885e 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -1,127 +1,169 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { useThemeVariants } from '@material-ui/styles'; -import withStyles from '../styles/withStyles'; +import { deepmerge } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; +import useThemeProps from '../styles/useThemeProps'; +import fabClasses, { getFabUtilityClass } from './fabClasses'; +import experimentalStyled from '../styles/experimentalStyled'; -export const styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - ...theme.typography.button, - minHeight: 36, - transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], { - duration: theme.transitions.duration.short, - }), - borderRadius: '50%', - padding: 0, - minWidth: 0, - width: 56, - height: 56, - boxShadow: theme.shadows[6], - '&:active': { - boxShadow: theme.shadows[12], - }, - color: theme.palette.getContrastText(theme.palette.grey[300]), - backgroundColor: theme.palette.grey[300], - '&:hover': { - backgroundColor: theme.palette.grey.A100, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.palette.grey[300], - }, - textDecoration: 'none', - }, - '&$focusVisible': { - boxShadow: theme.shadows[6], - }, - '&$disabled': { - color: theme.palette.action.disabled, - boxShadow: theme.shadows[0], - backgroundColor: theme.palette.action.disabledBackground, - }, +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...styles[styleProps.variant], + ...styles[`size${capitalize(styleProps.size)}`], + ...(styleProps.color === 'inherit' && styles.colorInherit), + [`& .${fabClasses.label}`]: styles.label, + }); +}; + +const useUtilityClasses = (styleProps) => { + const { color, variant, classes, size } = styleProps; + + const slots = { + root: [ + 'root', + variant, + `size${capitalize(size)}`, + color === 'inherit' && 'colorInherit', + color === 'primary' && 'primary', + color === 'secondary' && 'secondary', + ], + label: ['label'], + }; + + return composeClasses(slots, getFabUtilityClass, classes); +}; + +const FabRoot = experimentalStyled( + ButtonBase, + {}, + { + name: 'MuiFab', + slot: 'Root', + overridesResolver, }, - /* Styles applied to the span element that wraps the children. */ - label: { - width: '100%', // assure the correct width for iOS Safari - display: 'inherit', - alignItems: 'inherit', - justifyContent: 'inherit', +)(({ theme, styleProps }) => ({ + /* Styles applied to the root element. */ + ...theme.typography.button, + minHeight: 36, + transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], { + duration: theme.transitions.duration.short, + }), + borderRadius: '50%', + padding: 0, + minWidth: 0, + width: 56, + height: 56, + boxShadow: theme.shadows[6], + '&:active': { + boxShadow: theme.shadows[12], }, - /* Styles applied to the root element if `color="primary"`. */ - primary: { - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.main, - '&:hover': { - backgroundColor: theme.palette.primary.dark, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.palette.primary.main, - }, + color: theme.palette.getContrastText(theme.palette.grey[300]), + backgroundColor: theme.palette.grey[300], + '&:hover': { + backgroundColor: theme.palette.grey.A100, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette.grey[300], }, + textDecoration: 'none', }, - /* Styles applied to the root element if `color="secondary"`. */ - secondary: { - color: theme.palette.secondary.contrastText, - backgroundColor: theme.palette.secondary.main, - '&:hover': { - backgroundColor: theme.palette.secondary.dark, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.palette.secondary.main, - }, - }, + '&.Mui-focusVisible': { + boxShadow: theme.shadows[6], + }, + '&.Mui-disabled': { + color: theme.palette.action.disabled, + boxShadow: theme.shadows[0], + backgroundColor: theme.palette.action.disabledBackground, }, /* Styles applied to the root element if `variant="extended"`. */ - extended: { + ...(styleProps.variant === 'extended' && { borderRadius: 48 / 2, padding: '0 16px', width: 'auto', minHeight: 'auto', minWidth: 48, height: 48, - '&$sizeSmall': { + }), + ...(styleProps.variant === 'extended' && + styleProps.size === 'small' && { width: 'auto', padding: '0 8px', borderRadius: 34 / 2, minWidth: 34, height: 34, - }, - '&$sizeMedium': { + }), + ...(styleProps.variant === 'extended' && + styleProps.size === 'medium' && { width: 'auto', padding: '0 16px', borderRadius: 40 / 2, minWidth: 40, height: 40, - }, - }, - /* Styles applied to the root element if `variant="circular"`. */ - circular: {}, - /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */ - focusVisible: {}, - /* Pseudo-class applied to the root element if `disabled={true}`. */ - disabled: {}, + }), /* Styles applied to the root element if `color="inherit"`. */ - colorInherit: { + ...(styleProps.color === 'inherit' && { color: 'inherit', - }, + }), + /* Styles applied to the root element if `color="primary"`. */ + ...(styleProps.color === 'primary' && { + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + '&:hover': { + backgroundColor: theme.palette.primary.dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette.primary.main, + }, + }, + }), + /* Styles applied to the root element if `color="secondary"`. */ + ...(styleProps.color === 'secondary' && { + color: theme.palette.secondary.contrastText, + backgroundColor: theme.palette.secondary.main, + '&:hover': { + backgroundColor: theme.palette.secondary.dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette.secondary.main, + }, + }, + }), /* Styles applied to the root element if `size="small"``. */ - sizeSmall: { + ...(styleProps.size === 'small' && { width: 40, height: 40, - }, + }), /* Styles applied to the root element if `size="medium"``. */ - sizeMedium: { + ...(styleProps.size === 'medium' && { width: 48, height: 48, + }), +})); + +const FabLabel = experimentalStyled( + 'span', + {}, + { + name: 'MuiFab', + slot: 'Label', }, +)({ + /* Styles applied to the span element that wraps the children. */ + width: '100%', // assure the correct width for iOS Safari + display: 'inherit', + alignItems: 'inherit', + justifyContent: 'inherit', }); -const Fab = React.forwardRef(function Fab(props, ref) { +const Fab = React.forwardRef(function Fab(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiFab' }); const { children, - classes, className, color = 'default', component = 'button', @@ -133,43 +175,33 @@ const Fab = React.forwardRef(function Fab(props, ref) { ...other } = props; - const themeVariantsClasses = useThemeVariants( - { - ...props, - color, - component, - disabled, - disableFocusRipple, - size, - variant, - }, - 'MuiFab', - ); + const styleProps = { + ...props, + color, + component, + disabled, + disableFocusRipple, + size, + variant, + }; + + const classes = useUtilityClasses(styleProps); return ( - - {children} - + + {children} + + ); }); @@ -229,6 +261,10 @@ Fab.propTypes = { * @default 'large' */ size: PropTypes.oneOf(['large', 'medium', 'small']), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * The variant to use. * @default 'circular' @@ -239,4 +275,4 @@ Fab.propTypes = { ]), }; -export default withStyles(styles, { name: 'MuiFab' })(Fab); +export default Fab; diff --git a/packages/material-ui/src/Fab/Fab.test.js b/packages/material-ui/src/Fab/Fab.test.js index ed0a36bdd20bce..fa5e8a8969bada 100644 --- a/packages/material-ui/src/Fab/Fab.test.js +++ b/packages/material-ui/src/Fab/Fab.test.js @@ -1,8 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { - getClasses, - describeConformance, + describeConformanceV5, createClientRender, createMount, createServerRender, @@ -12,22 +11,22 @@ import { import Fab from './Fab'; import ButtonBase, { touchRippleClasses } from '../ButtonBase'; import Icon from '../Icon'; +import classes from './fabClasses'; describe('', () => { const mount = createMount(); const render = createClientRender({ strict: false }); - let classes; - before(() => { - classes = getClasses(Fab); - }); - - describeConformance(Conformance?, () => ({ + describeConformanceV5(Conformance?, () => ({ classes, inheritComponent: ButtonBase, mount, + muiName: 'MuiFab', + testVariantProps: { variant: 'extended' }, + testDeepOverrides: { slotName: 'label', slotClassName: classes.label }, + testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' }, refInstanceof: window.HTMLButtonElement, - skip: ['componentProp'], + skip: ['componentsProp'], })); it('should render with the root class but no others', () => { diff --git a/packages/material-ui/src/Fab/fabClasses.d.ts b/packages/material-ui/src/Fab/fabClasses.d.ts new file mode 100644 index 00000000000000..be4bd8497563f8 --- /dev/null +++ b/packages/material-ui/src/Fab/fabClasses.d.ts @@ -0,0 +1,19 @@ +export interface FabClasses { + root: string; + label: string; + primary: string; + secondary: string; + extended: string; + circular: string; + focusVisible: string; + disabled: string; + colorInherit: string; + sizeSmall: string; + sizeMedium: string; +} + +declare const fabClasses: FabClasses; + +export function getFabUtilityClass(slot: string): string; + +export default fabClasses; diff --git a/packages/material-ui/src/Fab/fabClasses.js b/packages/material-ui/src/Fab/fabClasses.js new file mode 100644 index 00000000000000..aa31e4beb31214 --- /dev/null +++ b/packages/material-ui/src/Fab/fabClasses.js @@ -0,0 +1,21 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getFabUtilityClass(slot) { + return generateUtilityClass('MuiFab', slot); +} + +const fabClasses = generateUtilityClasses('MuiFab', [ + 'root', + 'label', + 'primary', + 'secondary', + 'extended', + 'circular', + 'focusVisible', + 'disabled', + 'colorInherit', + 'sizeSmall', + 'sizeMedium', +]); + +export default fabClasses; diff --git a/packages/material-ui/src/Fab/index.d.ts b/packages/material-ui/src/Fab/index.d.ts index 898b9dbebe7c83..b1751bf8ec2032 100644 --- a/packages/material-ui/src/Fab/index.d.ts +++ b/packages/material-ui/src/Fab/index.d.ts @@ -1,2 +1,5 @@ export { default } from './Fab'; export * from './Fab'; + +export { default as fabClasses } from './fabClasses'; +export * from './fabClasses'; diff --git a/packages/material-ui/src/Fab/index.js b/packages/material-ui/src/Fab/index.js index e27f6caceabbcb..e5fd203ad858c0 100644 --- a/packages/material-ui/src/Fab/index.js +++ b/packages/material-ui/src/Fab/index.js @@ -1 +1,4 @@ export { default } from './Fab'; + +export { default as fabClasses } from './fabClasses'; +export * from './fabClasses'; From e6d57510649c8946009a5f726372db3e3c521dc7 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Mon, 25 Jan 2021 11:32:12 -0500 Subject: [PATCH 02/12] Fix order --- framer/scripts/framerConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index d335688d672d68..473f8f45ff1d71 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -161,11 +161,11 @@ export const componentSettings = { }, Fab: { ignoredProps: [ - 'sx', 'children', 'disableFocusRipple', // FIXME: `Union` 'variant', + 'sx', ], propValues: { icon: "'add'", From d85c5cb9b5b654d6fa6e348c389ccf127903b836 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Mon, 25 Jan 2021 11:35:44 -0500 Subject: [PATCH 03/12] Fix overridesResolver --- packages/material-ui/src/Fab/Fab.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 12067fce06885e..10735b613be4a8 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -16,6 +16,8 @@ const overridesResolver = (props, styles) => { ...styles[styleProps.variant], ...styles[`size${capitalize(styleProps.size)}`], ...(styleProps.color === 'inherit' && styles.colorInherit), + ...(styleProps.color === 'primary' && styles.primary), + ...(styleProps.color === 'secondary' && styles.secondary), [`& .${fabClasses.label}`]: styles.label, }); }; From 97c66193e05a56faa170624cc2d0d884f6661a43 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Mon, 25 Jan 2021 11:46:12 -0500 Subject: [PATCH 04/12] Fixed styles and added sizeLarge class slot --- packages/material-ui/src/Fab/Fab.js | 182 ++++++++++--------- packages/material-ui/src/Fab/fabClasses.d.ts | 1 + packages/material-ui/src/Fab/fabClasses.js | 1 + 3 files changed, 95 insertions(+), 89 deletions(-) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 10735b613be4a8..507b102e000c5f 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -48,104 +48,108 @@ const FabRoot = experimentalStyled( slot: 'Root', overridesResolver, }, -)(({ theme, styleProps }) => ({ - /* Styles applied to the root element. */ - ...theme.typography.button, - minHeight: 36, - transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], { - duration: theme.transitions.duration.short, - }), - borderRadius: '50%', - padding: 0, - minWidth: 0, - width: 56, - height: 56, - boxShadow: theme.shadows[6], - '&:active': { - boxShadow: theme.shadows[12], - }, - color: theme.palette.getContrastText(theme.palette.grey[300]), - backgroundColor: theme.palette.grey[300], - '&:hover': { - backgroundColor: theme.palette.grey.A100, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.palette.grey[300], - }, - textDecoration: 'none', - }, - '&.Mui-focusVisible': { - boxShadow: theme.shadows[6], - }, - '&.Mui-disabled': { - color: theme.palette.action.disabled, - boxShadow: theme.shadows[0], - backgroundColor: theme.palette.action.disabledBackground, - }, - /* Styles applied to the root element if `variant="extended"`. */ - ...(styleProps.variant === 'extended' && { - borderRadius: 48 / 2, - padding: '0 16px', - width: 'auto', - minHeight: 'auto', - minWidth: 48, - height: 48, - }), - ...(styleProps.variant === 'extended' && - styleProps.size === 'small' && { - width: 'auto', - padding: '0 8px', - borderRadius: 34 / 2, - minWidth: 34, - height: 34, +)( + ({ theme, styleProps }) => ({ + /* Styles applied to the root element. */ + ...theme.typography.button, + minHeight: 36, + transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], { + duration: theme.transitions.duration.short, }), - ...(styleProps.variant === 'extended' && - styleProps.size === 'medium' && { - width: 'auto', - padding: '0 16px', - borderRadius: 40 / 2, - minWidth: 40, - height: 40, - }), - /* Styles applied to the root element if `color="inherit"`. */ - ...(styleProps.color === 'inherit' && { - color: 'inherit', - }), - /* Styles applied to the root element if `color="primary"`. */ - ...(styleProps.color === 'primary' && { - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.main, - '&:hover': { - backgroundColor: theme.palette.primary.dark, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.palette.primary.main, - }, + borderRadius: '50%', + padding: 0, + minWidth: 0, + width: 56, + height: 56, + boxShadow: theme.shadows[6], + '&:active': { + boxShadow: theme.shadows[12], }, - }), - /* Styles applied to the root element if `color="secondary"`. */ - ...(styleProps.color === 'secondary' && { - color: theme.palette.secondary.contrastText, - backgroundColor: theme.palette.secondary.main, + color: theme.palette.getContrastText(theme.palette.grey[300]), + backgroundColor: theme.palette.grey[300], '&:hover': { - backgroundColor: theme.palette.secondary.dark, + backgroundColor: theme.palette.grey.A100, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor: theme.palette.secondary.main, + backgroundColor: theme.palette.grey[300], }, + textDecoration: 'none', }, + '&.Mui-focusVisible': { + boxShadow: theme.shadows[6], + }, + '&.Mui-disabled': { + color: theme.palette.action.disabled, + boxShadow: theme.shadows[0], + backgroundColor: theme.palette.action.disabledBackground, + }, + /* Styles applied to the root element if `variant="extended"`. */ + ...(styleProps.variant === 'extended' && { + borderRadius: 48 / 2, + padding: '0 16px', + width: 'auto', + minHeight: 'auto', + minWidth: 48, + height: 48, + }), + ...(styleProps.variant === 'extended' && + styleProps.size === 'small' && { + width: 'auto', + padding: '0 8px', + borderRadius: 34 / 2, + minWidth: 34, + height: 34, + }), + ...(styleProps.variant === 'extended' && + styleProps.size === 'medium' && { + width: 'auto', + padding: '0 16px', + borderRadius: 40 / 2, + minWidth: 40, + height: 40, + }), + /* Styles applied to the root element if `color="inherit"`. */ + ...(styleProps.color === 'inherit' && { + color: 'inherit', + }), + /* Styles applied to the root element if `size="small"``. */ + ...(styleProps.size === 'small' && { + width: 40, + height: 40, + }), + /* Styles applied to the root element if `size="medium"``. */ + ...(styleProps.size === 'medium' && { + width: 48, + height: 48, + }), }), - /* Styles applied to the root element if `size="small"``. */ - ...(styleProps.size === 'small' && { - width: 40, - height: 40, - }), - /* Styles applied to the root element if `size="medium"``. */ - ...(styleProps.size === 'medium' && { - width: 48, - height: 48, + ({ theme, styleProps }) => ({ + /* Styles applied to the root element if `color="primary"`. */ + ...(styleProps.color === 'primary' && { + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + '&:hover': { + backgroundColor: theme.palette.primary.dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette.primary.main, + }, + }, + }), + /* Styles applied to the root element if `color="secondary"`. */ + ...(styleProps.color === 'secondary' && { + color: theme.palette.secondary.contrastText, + backgroundColor: theme.palette.secondary.main, + '&:hover': { + backgroundColor: theme.palette.secondary.dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette.secondary.main, + }, + }, + }), }), -})); +); const FabLabel = experimentalStyled( 'span', diff --git a/packages/material-ui/src/Fab/fabClasses.d.ts b/packages/material-ui/src/Fab/fabClasses.d.ts index be4bd8497563f8..07c7c2478f200e 100644 --- a/packages/material-ui/src/Fab/fabClasses.d.ts +++ b/packages/material-ui/src/Fab/fabClasses.d.ts @@ -10,6 +10,7 @@ export interface FabClasses { colorInherit: string; sizeSmall: string; sizeMedium: string; + sizeLarge: string; } declare const fabClasses: FabClasses; diff --git a/packages/material-ui/src/Fab/fabClasses.js b/packages/material-ui/src/Fab/fabClasses.js index aa31e4beb31214..4e52490393d9e7 100644 --- a/packages/material-ui/src/Fab/fabClasses.js +++ b/packages/material-ui/src/Fab/fabClasses.js @@ -16,6 +16,7 @@ const fabClasses = generateUtilityClasses('MuiFab', [ 'colorInherit', 'sizeSmall', 'sizeMedium', + 'sizeLarge', ]); export default fabClasses; From e6f8c0845914211f81c5435253256145d0f3eb2c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 17:09:41 +0100 Subject: [PATCH 05/12] fix SpeedDialAction test --- .../material-ui/src/SpeedDialAction/SpeedDialAction.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js index e2e760b3f31154..ee085edc12cace 100644 --- a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js @@ -11,7 +11,7 @@ import { import { useFakeTimers } from 'sinon'; import Icon from '@material-ui/core/Icon'; import Tooltip from '@material-ui/core/Tooltip'; -import Fab from '@material-ui/core/Fab'; +import Fab, { fabClasses } from '@material-ui/core/Fab'; import SpeedDialAction from './SpeedDialAction'; describe('', () => { @@ -27,11 +27,9 @@ describe('', () => { const mount = createMount({ strict: true }); const render = createClientRender(); let classes; - let fabClasses; before(() => { classes = getClasses(add} tooltipTitle="placeholder" />); - fabClasses = getClasses(Fab); }); describeConformance( From 78215a69c583c4886df6aa516e522444dcf996a4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 17:39:55 +0100 Subject: [PATCH 06/12] Update packages/material-ui/src/Fab/Fab.js --- packages/material-ui/src/Fab/Fab.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 507b102e000c5f..c9c6dcc20747eb 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -28,6 +28,7 @@ const useUtilityClasses = (styleProps) => { const slots = { root: [ 'root', + 'disabled', variant, `size${capitalize(size)}`, color === 'inherit' && 'colorInherit', From 48be73df7cd4ecfca405799db8a3e52ca245b9fe Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 17:41:27 +0100 Subject: [PATCH 07/12] Update packages/material-ui/src/Fab/Fab.js --- packages/material-ui/src/Fab/Fab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index c9c6dcc20747eb..77a5085df8f76c 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -28,7 +28,7 @@ const useUtilityClasses = (styleProps) => { const slots = { root: [ 'root', - 'disabled', + disabled && 'disabled', variant, `size${capitalize(size)}`, color === 'inherit' && 'colorInherit', From 140651e357cd0dcb690d827e91d9cb425da5fdc4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 17:41:45 +0100 Subject: [PATCH 08/12] Update packages/material-ui/src/Fab/Fab.js --- packages/material-ui/src/Fab/Fab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 77a5085df8f76c..c2f24f2d13e6c2 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -23,7 +23,7 @@ const overridesResolver = (props, styles) => { }; const useUtilityClasses = (styleProps) => { - const { color, variant, classes, size } = styleProps; + const { color, variant, classes, disabled, size } = styleProps; const slots = { root: [ From 3deb86975d369989180a89774ee5326757bc4afd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 17:45:54 +0100 Subject: [PATCH 09/12] Update packages/material-ui/src/Fab/Fab.js --- packages/material-ui/src/Fab/Fab.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index c2f24f2d13e6c2..cdd9ccc0aa635b 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -28,7 +28,6 @@ const useUtilityClasses = (styleProps) => { const slots = { root: [ 'root', - disabled && 'disabled', variant, `size${capitalize(size)}`, color === 'inherit' && 'colorInherit', From c13ac665378c0dc249f883c5781b8b05000ad26c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 17:46:10 +0100 Subject: [PATCH 10/12] Update packages/material-ui/src/Fab/Fab.js --- packages/material-ui/src/Fab/Fab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index cdd9ccc0aa635b..507b102e000c5f 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -23,7 +23,7 @@ const overridesResolver = (props, styles) => { }; const useUtilityClasses = (styleProps) => { - const { color, variant, classes, disabled, size } = styleProps; + const { color, variant, classes, size } = styleProps; const slots = { root: [ From 23774db1e0680b81da008e318cb7b8b7ac465116 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 18:57:15 +0100 Subject: [PATCH 11/12] Update packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js --- .../material-ui/src/SpeedDialAction/SpeedDialAction.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js index ee085edc12cace..48f3c5bf253b82 100644 --- a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.test.js @@ -11,7 +11,7 @@ import { import { useFakeTimers } from 'sinon'; import Icon from '@material-ui/core/Icon'; import Tooltip from '@material-ui/core/Tooltip'; -import Fab, { fabClasses } from '@material-ui/core/Fab'; +import { fabClasses } from '@material-ui/core/Fab'; import SpeedDialAction from './SpeedDialAction'; describe('', () => { From 2e823e76f146afa4698791cf61a817b411677755 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 27 Jan 2021 09:19:54 +0100 Subject: [PATCH 12/12] fixed regression --- packages/material-ui/src/Fab/Fab.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 507b102e000c5f..cc34a706bbd71a 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -83,6 +83,16 @@ const FabRoot = experimentalStyled( boxShadow: theme.shadows[0], backgroundColor: theme.palette.action.disabledBackground, }, + /* Styles applied to the root element if `size="small"``. */ + ...(styleProps.size === 'small' && { + width: 40, + height: 40, + }), + /* Styles applied to the root element if `size="medium"``. */ + ...(styleProps.size === 'medium' && { + width: 48, + height: 48, + }), /* Styles applied to the root element if `variant="extended"`. */ ...(styleProps.variant === 'extended' && { borderRadius: 48 / 2, @@ -112,16 +122,6 @@ const FabRoot = experimentalStyled( ...(styleProps.color === 'inherit' && { color: 'inherit', }), - /* Styles applied to the root element if `size="small"``. */ - ...(styleProps.size === 'small' && { - width: 40, - height: 40, - }), - /* Styles applied to the root element if `size="medium"``. */ - ...(styleProps.size === 'medium' && { - width: 48, - height: 48, - }), }), ({ theme, styleProps }) => ({ /* Styles applied to the root element if `color="primary"`. */