feat(button): destructive secondary variant

dhis2 · Nov 15, 2023 · 9926c17 · 9926c17
1 parent d123403
commit 9926c17
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
@@ -102,7 +102,7 @@ Button.propTypes = {
     /**
      * Indicates that the button makes potentially dangerous
      * deletions or data changes.
-     * Mutually exclusive with `primary` and `secondary` props
+     * Mutually exclusive with `primary` prop
      */
     destructive: sharedPropTypes.buttonVariantPropType,
     /** Applies a greyed-out appearance and makes the button non-interactive  */
@@ -122,14 +122,13 @@ Button.propTypes = {
     name: PropTypes.string,
     /**
      * Applies 'primary' button appearance.
-     * Mutually exclusive with `destructive` and `secondary` props
+     * Mutually exclusive with `destructive` prop
      */
     primary: sharedPropTypes.buttonVariantPropType,
     /**
      * 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
@@ -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
@@ -187,6 +187,34 @@ export default css`
         fill: ${colors.white};
     }
 
+    .destructive.secondary {
+        border-color: rgba(74, 87, 104, 0.25);
+        background: transparent;
+        color: ${colors.red700};
+        fill: ${colors.red700};
+    }
+
+    .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;
     }