From 2970a94fdef4f587f6570fe0a79dff9306fea7b3 Mon Sep 17 00:00:00 2001 From: Neto Chaves Date: Sun, 8 Dec 2019 11:54:59 -0300 Subject: [PATCH 1/4] add a disableElevation prop to button --- docs/pages/api/button.md | 2 ++ packages/material-ui/src/Button/Button.d.ts | 2 ++ packages/material-ui/src/Button/Button.js | 25 +++++++++++++++++++++ 3 files changed, 29 insertions(+) diff --git a/docs/pages/api/button.md b/docs/pages/api/button.md index 0e30db73b63aa0..489e9bcf7f2e89 100644 --- a/docs/pages/api/button.md +++ b/docs/pages/api/button.md @@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | elementType | 'button' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | bool | false | If `true`, the button will be disabled. | +| disableElevation | bool | false | If `true`, no elevation is used. | | disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | | disableRipple | bool | | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | | endIcon | node | | Element placed after the children. | @@ -60,6 +61,7 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api | contained | .MuiButton-contained | Styles applied to the root element if `variant="contained"`. | containedPrimary | .MuiButton-containedPrimary | Styles applied to the root element if `variant="contained"` and `color="primary"`. | containedSecondary | .MuiButton-containedSecondary | Styles applied to the root element if `variant="contained"` and `color="secondary"`. +| disableElevation | .MuiButton-disableElevation | Styles applied to the root element if `disableElevation={true}`. | focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. | disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. | colorInherit | .MuiButton-colorInherit | Styles applied to the root element if `color="inherit"`. diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts index 77fadc64eeeff1..b3b4b1ee4a70c6 100644 --- a/packages/material-ui/src/Button/Button.d.ts +++ b/packages/material-ui/src/Button/Button.d.ts @@ -8,6 +8,7 @@ export type ButtonTypeMap< > = ExtendButtonBaseTypeMap<{ props: P & { color?: PropTypes.Color; + disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: React.ReactNode; fullWidth?: boolean; @@ -39,6 +40,7 @@ export type ButtonClassKey = | 'contained' | 'containedPrimary' | 'containedSecondary' + | 'disableElevation' | 'focusVisible' | 'disabled' | 'colorInherit' diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index bdba5db1f61183..380389b475152c 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -158,6 +158,25 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element if `disableElevation={true}`. */ + disableElevation: { + boxShadow: 'none', + '&:hover': { + boxShadow: 'none', + '@media (hover: none)': { + boxShadow: 'none', + }, + }, + '&$focusVisible': { + boxShadow: 'none', + }, + '&:active': { + boxShadow: 'none', + }, + '&$disabled': { + boxShadow: 'none', + }, + }, /* 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}`. */ @@ -251,6 +270,7 @@ const Button = React.forwardRef(function Button(props, ref) { color = 'default', component = 'button', disabled = false, + disableElevation = false, disableFocusRipple = false, endIcon: endIconProp, focusVisibleClassName, @@ -282,6 +302,7 @@ const Button = React.forwardRef(function Button(props, ref) { [classes[`${variant}${capitalize(color)}`]]: color !== 'default' && color !== 'inherit', [classes[`${variant}Size${capitalize(size)}`]]: size !== 'medium', [classes[`size${capitalize(size)}`]]: size !== 'medium', + [classes.disableElevation]: disableElevation, [classes.disabled]: disabled, [classes.fullWidth]: fullWidth, [classes.colorInherit]: color === 'inherit', @@ -332,6 +353,10 @@ Button.propTypes = { * If `true`, the button will be disabled. */ disabled: PropTypes.bool, + /** + * If `true`, no elevation is used. + */ + disableElevation: PropTypes.bool, /** * If `true`, the keyboard focus ripple will be disabled. * `disableRipple` must also be true. From 286e32fbcb482444279a77c339fcdf1c30c0f520 Mon Sep 17 00:00:00 2001 From: Neto Chaves Date: Sun, 8 Dec 2019 14:24:10 -0300 Subject: [PATCH 2/4] add test and demo --- docs/src/pages/components/buttons/ContainedButtons.js | 3 +++ docs/src/pages/components/buttons/ContainedButtons.tsx | 3 +++ packages/material-ui/src/Button/Button.test.js | 9 +++++++++ 3 files changed, 15 insertions(+) diff --git a/docs/src/pages/components/buttons/ContainedButtons.js b/docs/src/pages/components/buttons/ContainedButtons.js index 368423b512fcf0..5ea6a6c98421a5 100644 --- a/docs/src/pages/components/buttons/ContainedButtons.js +++ b/docs/src/pages/components/buttons/ContainedButtons.js @@ -25,6 +25,9 @@ export default function ContainedButtons() { + diff --git a/docs/src/pages/components/buttons/ContainedButtons.tsx b/docs/src/pages/components/buttons/ContainedButtons.tsx index 7857907e9064d2..4e034578953c97 100644 --- a/docs/src/pages/components/buttons/ContainedButtons.tsx +++ b/docs/src/pages/components/buttons/ContainedButtons.tsx @@ -27,6 +27,9 @@ export default function ContainedButtons() { + diff --git a/packages/material-ui/src/Button/Button.test.js b/packages/material-ui/src/Button/Button.test.js index ecd72ab1b2c8f3..83f39e0bbaa301 100644 --- a/packages/material-ui/src/Button/Button.test.js +++ b/packages/material-ui/src/Button/Button.test.js @@ -309,6 +309,15 @@ describe(', + ); + const button = getByRole('button'); + + expect(button).to.have.class(classes.disableElevation) + }); + it('should have a focusRipple by default', () => { const { getByRole } = render( , - ); + const { getByRole } = render(); const button = getByRole('button'); - expect(button).to.have.class(classes.disableElevation) + expect(button).to.have.class(classes.disableElevation); }); it('should have a focusRipple by default', () => { From f7bf663d3e8ecd309e8efbd895854f6525903151 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 8 Dec 2019 23:59:44 +0100 Subject: [PATCH 4/4] remove useless style --- docs/src/pages/components/buttons/ContainedButtons.js | 3 --- docs/src/pages/components/buttons/ContainedButtons.tsx | 3 --- docs/src/pages/components/buttons/DisableElevation.js | 10 ++++++++++ docs/src/pages/components/buttons/DisableElevation.tsx | 10 ++++++++++ docs/src/pages/components/buttons/buttons.md | 4 ++++ packages/material-ui/src/Button/Button.js | 3 --- 6 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 docs/src/pages/components/buttons/DisableElevation.js create mode 100644 docs/src/pages/components/buttons/DisableElevation.tsx diff --git a/docs/src/pages/components/buttons/ContainedButtons.js b/docs/src/pages/components/buttons/ContainedButtons.js index 5ea6a6c98421a5..368423b512fcf0 100644 --- a/docs/src/pages/components/buttons/ContainedButtons.js +++ b/docs/src/pages/components/buttons/ContainedButtons.js @@ -25,9 +25,6 @@ export default function ContainedButtons() { - diff --git a/docs/src/pages/components/buttons/ContainedButtons.tsx b/docs/src/pages/components/buttons/ContainedButtons.tsx index 4e034578953c97..7857907e9064d2 100644 --- a/docs/src/pages/components/buttons/ContainedButtons.tsx +++ b/docs/src/pages/components/buttons/ContainedButtons.tsx @@ -27,9 +27,6 @@ export default function ContainedButtons() { - diff --git a/docs/src/pages/components/buttons/DisableElevation.js b/docs/src/pages/components/buttons/DisableElevation.js new file mode 100644 index 00000000000000..7ed06955bd747d --- /dev/null +++ b/docs/src/pages/components/buttons/DisableElevation.js @@ -0,0 +1,10 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function DisableElevation() { + return ( + + ); +} diff --git a/docs/src/pages/components/buttons/DisableElevation.tsx b/docs/src/pages/components/buttons/DisableElevation.tsx new file mode 100644 index 00000000000000..7ed06955bd747d --- /dev/null +++ b/docs/src/pages/components/buttons/DisableElevation.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function DisableElevation() { + return ( + + ); +} diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index 61242238d425b2..747a424eed350d 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -25,6 +25,10 @@ The last example of this demo show how to use an upload button. {{"demo": "pages/components/buttons/ContainedButtons.js"}} +You can remove the elevation with the `disableElevation` prop. + +{{"demo": "pages/components/buttons/DisableElevation.js"}} + ## Text Buttons [Text buttons](https://material.io/design/components/buttons.html#text-button) diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 380389b475152c..c4be83a1210232 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -163,9 +163,6 @@ export const styles = theme => ({ boxShadow: 'none', '&:hover': { boxShadow: 'none', - '@media (hover: none)': { - boxShadow: 'none', - }, }, '&$focusVisible': { boxShadow: 'none',