diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js index 1e5d8ef641..f3313500ea 100644 --- a/components/button/src/button/button.js +++ b/components/button/src/button/button.js @@ -100,11 +100,9 @@ Button.propTypes = { */ dataTest: PropTypes.string, /** - * Indicates that the button makes potentially dangerous - * deletions or data changes. - * Mutually exclusive with `primary` and `secondary` props + * Applies 'destructive' button appearance, implying a dangerous action. */ - destructive: sharedPropTypes.buttonVariantPropType, + destructive: PropTypes.bool, /** Applies a greyed-out appearance and makes the button non-interactive */ disabled: PropTypes.bool, /** An icon element to display inside the button */ @@ -121,15 +119,13 @@ Button.propTypes = { */ name: PropTypes.string, /** - * Applies 'primary' button appearance. - * Mutually exclusive with `destructive` and `secondary` props + * Applies 'primary' button appearance, implying the most important action. */ - primary: sharedPropTypes.buttonVariantPropType, + primary: PropTypes.bool, /** * Applies 'secondary' button appearance. - * Mutually exclusive with `primary` and `destructive` props */ - secondary: sharedPropTypes.buttonVariantPropType, + secondary: PropTypes.bool, /** Makes the button small. Mutually exclusive with `large` prop */ small: sharedPropTypes.sizePropType, /** Tab index for focusing the button with a keyboard */ diff --git a/components/button/src/button/button.stories.js b/components/button/src/button/button.stories.js index 0fcdff9807..904613a0aa 100644 --- a/components/button/src/button/button.stories.js +++ b/components/button/src/button/button.stories.js @@ -122,6 +122,12 @@ Destructive.parameters = { }, }, } +export const DestructiveSecondary = Template.bind({}) +DestructiveSecondary.args = { + destructive: true, + secondary: true, + name: 'Destructive secondary button', +} export const Disabled = (args) => ( <> diff --git a/components/button/src/button/button.styles.js b/components/button/src/button/button.styles.js index 841de9152f..e21b631a83 100644 --- a/components/button/src/button/button.styles.js +++ b/components/button/src/button/button.styles.js @@ -187,6 +187,35 @@ export default css` fill: ${colors.white}; } + .destructive.secondary { + border-color: rgba(74, 87, 104, 0.25); + background: transparent; + color: ${colors.red700}; + fill: ${colors.red700}; + font-weight: 400; + } + + .destructive.secondary:hover { + border-color: ${colors.red600}; + background: ${colors.red050}; + color: ${colors.red800}; + fill: ${colors.red800}; + } + + .destructive.secondary:active, + .destructive.secondary:active:focus { + background: ${colors.red100}; + border-color: ${colors.red700}; + box-shadow: none; + } + + .destructive.secondary:disabled { + background: transparent; + border-color: rgba(74, 87, 104, 0.25); + color: rgba(183, 28, 28, 0.6); + fill: rgba(183, 28, 28, 0.6); + } + .icon-only { padding: 0 0 0 5px; } diff --git a/constants/src/shared-prop-types.js b/constants/src/shared-prop-types.js index b1cc9fc89a..50c60ef911 100644 --- a/constants/src/shared-prop-types.js +++ b/constants/src/shared-prop-types.js @@ -20,28 +20,6 @@ export const statusArgType = { control: { type: 'boolean' }, } -/** - * Button variant propType - * @return {PropType} Mutually exclusive variants: - * primary/secondary/destructive - */ -export const buttonVariantPropType = mutuallyExclusive( - ['primary', 'secondary', 'destructive'], - PropTypes.bool -) -export const buttonVariantArgType = { - // No description because it should be set for the component description - table: { - type: { - summary: 'bool', - detail: "'primary', 'secondary', and 'destructive' are mutually exclusive props", - }, - }, - control: { - type: 'boolean', - }, -} - /** * Size variant propType * @return {PropType} Mutually exclusive variants: diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index c435337a46..4f71631b3f 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -32,7 +32,7 @@ Buttons are used to trigger actions. There are different button variants that ar | ------------- | -------------------------------------------------------------------------------------------------------------------------- | | `Basic` | Default. Will suit the majority of actions on a page. | | `Primary` | Use for the most important action on a page, like a _Save data_ button in a form. Only use one `primary` button on a page. | -| `Secondary` | Use for less important actions, usually in combination with other buttons. | +| `Secondary` | Use for less important actions, usually in combination with other buttons. Can be applied to `Destructive`. | | `Destructive` | Only for primary-type actions that will delete or destroy something. Don't use several on a single page. | #### Basic @@ -67,12 +67,16 @@ Buttons are used to trigger actions. There are different button variants that ar #### Destructive - +
+ + +
- Only use for primary-type actions that will destroy data. - Don't use if the action will only remove an item from the current context. - Only use a one `destructive` button per page. +- `Destructive secondary` can be used more than once per page for less important destructive actions. ### Format