feat(button): add destructive, secondary button type

components/button/src/button/button.js

@@ -34,7 +34,7 @@
         if (initialFocus && ref.current) {
             ref.current.focus()
         }
     }, [initialFocus, ref.current])
 
     const handleClick = (event) => onClick && onClick({ value, name }, event)
     const handleBlur = (event) => onBlur && onBlur({ value, name }, event)
@@ -100,11 +100,9 @@
      */
     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 @@
      */
     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 */

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) => (
     <>

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;
     }

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:

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