From b72a04a93cfb08180c030a94b8ad6008f3084bcf Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Wed, 15 Nov 2023 13:26:52 +0100
Subject: [PATCH] feat(button): destructive secondary variant
feat(shared-prop-types): extract secondary button prop from exclusive props
style(button): adjust secondary destructive font weight
fix(button): remove exclusivity of type props
docs(button): add destructive secondary example
---
components/button/src/button/button.js | 14 ++++-----
.../button/src/button/button.stories.js | 6 ++++
components/button/src/button/button.styles.js | 29 +++++++++++++++++++
constants/src/shared-prop-types.js | 22 --------------
docs/docs/components/button.md | 8 +++--
5 files changed, 46 insertions(+), 33 deletions(-)
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 704bc83ced..aa95218293 100644
--- a/components/button/src/button/button.stories.js
+++ b/components/button/src/button/button.stories.js
@@ -108,6 +108,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 d17f6bb954..9611ddedcb 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 acd0f0eeff..80c18fcfea 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
<Demo>
- <Button destructive>Destructive button</Button>
+ <div class="stacked-examples-horizontal">
+ <Button destructive>Destructive button</Button>
+ <Button destructive secondary>Destructive secondary button</Button>
+ </div>
</Demo>
- 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