From 1160ef5e3b4caa9c34c09ff1d76f4eb23c65d92e Mon Sep 17 00:00:00 2001 From: Ali Sasani Date: Sun, 30 Jan 2022 20:39:34 +0330 Subject: [PATCH 1/6] add other colors to Fab component --- packages/mui-material/src/Fab/Fab.js | 46 +++++++++------------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 407364b7031f26..650ff985d2dd84 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -12,14 +12,7 @@ const useUtilityClasses = (ownerState) => { const { color, variant, classes, size } = ownerState; const slots = { - root: [ - 'root', - variant, - `size${capitalize(size)}`, - color === 'inherit' && 'colorInherit', - color === 'primary' && 'primary', - color === 'secondary' && 'secondary', - ], + root: ['root', variant, `size${capitalize(size)}`, color], }; return composeClasses(slots, getFabUtilityClass, classes); @@ -36,8 +29,8 @@ const FabRoot = styled(ButtonBase, { styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, - ownerState.color === 'primary' && styles.primary, - ownerState.color === 'secondary' && styles.secondary, + styles[capitalize(ownerState.size)], + styles[ownerState.color], ]; }, })( @@ -111,28 +104,19 @@ const FabRoot = styled(ButtonBase, { }), }), ({ theme, ownerState }) => ({ - ...(ownerState.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, + ...(ownerState.color !== 'inherit' && + ownerState.color !== 'default' && + theme.palette[ownerState.color] != null && { + color: theme.palette[ownerState.color].contrastText, + backgroundColor: theme.palette[ownerState.color].main, + '&:hover': { + backgroundColor: theme.palette[ownerState.color].dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.palette[ownerState.color].main, + }, }, - }, - }), - ...(ownerState.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, - }, - }, - }), + }), }), ); From c45085f77428d32883a08dbeb431fade3cbf5882 Mon Sep 17 00:00:00 2001 From: Ali Sasani Date: Sun, 30 Jan 2022 20:44:55 +0330 Subject: [PATCH 2/6] update color proptypes --- packages/mui-material/src/Fab/Fab.d.ts | 5 ++++- packages/mui-material/src/Fab/Fab.js | 12 +++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/Fab/Fab.d.ts b/packages/mui-material/src/Fab/Fab.d.ts index cdc02ff6317bef..d3ba91db24d61b 100644 --- a/packages/mui-material/src/Fab/Fab.d.ts +++ b/packages/mui-material/src/Fab/Fab.d.ts @@ -25,7 +25,10 @@ export type FabTypeMap

= ExtendB * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color?: OverridableStringUnion; + color?: OverridableStringUnion< + PropTypes.Color | 'success' | 'error' | 'info' | 'warning', + FabPropsColorOverrides + >; /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 650ff985d2dd84..08296406f48822 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -184,9 +184,15 @@ Fab.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), - PropTypes.string, + color: PropTypes.oneOf([ + 'default', + 'error', + 'info', + 'inherit', + 'primary', + 'secondary', + 'success', + 'warning', ]), /** * The component used for the root node. From 4a981cbea3164e80849ab51113af36f2cb34b815 Mon Sep 17 00:00:00 2001 From: Ali Sasani Date: Sun, 30 Jan 2022 20:45:42 +0330 Subject: [PATCH 3/6] update color props in fab api-docs --- docs/pages/api-docs/fab.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/fab.json b/docs/pages/api-docs/fab.json index 257fde67fc6c80..271d36adb0827a 100644 --- a/docs/pages/api-docs/fab.json +++ b/docs/pages/api-docs/fab.json @@ -4,8 +4,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "union", - "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'
| string" + "name": "enum", + "description": "'default'
| 'error'
| 'info'
| 'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'warning'" }, "default": "'default'" }, From c4588a743ded5b18513790aabdef0947fbf6b7c3 Mon Sep 17 00:00:00 2001 From: Ali Sasani Date: Sun, 30 Jan 2022 20:46:11 +0330 Subject: [PATCH 4/6] add extra color classes to fabClasses --- packages/mui-material/src/Fab/fabClasses.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/mui-material/src/Fab/fabClasses.ts b/packages/mui-material/src/Fab/fabClasses.ts index b3c575abecf05f..fa3beaad5f58fb 100644 --- a/packages/mui-material/src/Fab/fabClasses.ts +++ b/packages/mui-material/src/Fab/fabClasses.ts @@ -41,6 +41,10 @@ const fabClasses: FabClasses = generateUtilityClasses('MuiFab', [ 'sizeSmall', 'sizeMedium', 'sizeLarge', + 'info', + 'error', + 'warning', + 'success', ]); export default fabClasses; From cf3d9d18e6a0b9aadb91c99b3c79480fb33bbc58 Mon Sep 17 00:00:00 2001 From: Ali Sasani Date: Sun, 30 Jan 2022 20:46:40 +0330 Subject: [PATCH 5/6] add tests to check extra color classes --- packages/mui-material/src/Fab/Fab.test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/mui-material/src/Fab/Fab.test.js b/packages/mui-material/src/Fab/Fab.test.js index 2818027de92dec..a508fb487b42bb 100644 --- a/packages/mui-material/src/Fab/Fab.test.js +++ b/packages/mui-material/src/Fab/Fab.test.js @@ -60,6 +60,16 @@ describe('', () => { expect(button).not.to.have.class(classes.primary); expect(button).to.have.class(classes.secondary); }); + ['info', 'error', 'warning', 'success'].forEach((color) => { + it(`should render a ${color} floating action button`, () => { + const { getByRole } = render(Fab); + const button = getByRole('button'); + + expect(button).to.have.class(classes.root); + expect(button).not.to.have.class(classes.primary); + expect(button).to.have.class(classes[color]); + }); + }); it('should render a small floating action button', () => { const { getByRole } = render(Fab); From 60b82b300ea60bd0a31641b01bb2fa096d942088 Mon Sep 17 00:00:00 2001 From: Ali Sasani Date: Mon, 31 Jan 2022 14:56:02 +0330 Subject: [PATCH 6/6] add colorInherit condition --- packages/mui-material/src/Fab/Fab.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 08296406f48822..8addb0b3e4be23 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -12,7 +12,12 @@ const useUtilityClasses = (ownerState) => { const { color, variant, classes, size } = ownerState; const slots = { - root: ['root', variant, `size${capitalize(size)}`, color], + root: [ + 'root', + variant, + `size${capitalize(size)}`, + color === 'inherit' ? 'colorInherit' : color, + ], }; return composeClasses(slots, getFabUtilityClass, classes);