feat(button): danger variant

Adds a "danger" variant which signifies a dangerous action, such as deleting a user. The change affects - Button - IconButton - IconTextButton This change also affects a number of snapshots. This because a primary button uses `textPrimary` and `elementPrimary` to change the color between for instance the normal and hover state. `textError` and `elementError` however had the exact same color.
AxisCommunications · Jun 10, 2021 · 9df3e95 · 9df3e95
1 parent 6509c3a
commit 9df3e95
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 90 deletions.
diff --git a/packages/core/src/Button/index.tsx b/packages/core/src/Button/index.tsx
@@ -78,6 +78,37 @@ export const NativeButton = styled.button<{
           background-color: ${theme.color.elementPrimary()};
         }
       `
+    } else if (variant === 'danger') {
+      return css`
+        color: ${theme.color.text00()};
+        fill: ${theme.color.text00()};
+        background-color: ${theme.color.elementError()};
+        box-shadow: ${theme.shadow.primaryButton};
+
+        &:hover {
+          background-color: ${theme.color.textError()};
+          box-shadow: ${theme.shadow.primaryButton};
+        }
+
+        &:focus {
+          ${visibleFocus
+            ? css`
+                background-color: ${theme.color.elementError()};
+                box-shadow: ${theme.shadow.primaryButton};
+                border: 2px solid ${theme.color.textError()};
+              `
+            : undefined};
+        }
+
+        &:active {
+          background-color: ${theme.color.textError()};
+          box-shadow: 0 0 0 4px ${theme.color.elementError(opacity[24])};
+        }
+
+        &:disabled {
+          background-color: ${theme.color.elementError()};
+        }
+      `
     } else if (accent) {
       return css`
         color: ${theme.color.elementPrimary()};
@@ -204,7 +235,7 @@ const LabelContainer = styled.span.attrs({ className: 'sc-LabelContainer' })<{
 type BaseElement = HTMLButtonElement
 type BaseProps = React.ButtonHTMLAttributes<BaseElement>
 type ButtonType = 'button' | 'submit' | 'reset'
-export type ButtonVariantType = 'primary' | 'secondary'
+export type ButtonVariantType = 'primary' | 'secondary' | 'danger'
 export type ButtonClickHandler = React.MouseEventHandler<BaseElement>
 
 interface BaseButtonProps extends BaseProps {
@@ -337,7 +368,7 @@ const IconNativeButton = styled(NativeButton)<{
   padding: unset;
 
   ${({ variant, accent, visibleFocus, theme }) => {
-    if (variant === 'primary') {
+    if (variant === 'primary' || variant === 'danger') {
       return undefined
     } else if (accent) {
       return css`
@@ -502,46 +533,88 @@ export const IconButton = React.forwardRef<BaseElement, IconButtonProps>(
 
 export const NativeIconTextButton = styled.button<{
   readonly visibleFocus: boolean
+  readonly variant: Omit<ButtonVariantType, 'secondary'>
 }>`
   ${COMMON_STYLE}
   border: none;
   padding: 0 ${spacing.large} 0 0;
-  ${({ visibleFocus, theme }) => {
-    return css`
-      color: ${theme.color.text04()};
-      fill: ${theme.color.text04()};
-      background-color: transparent;
+  ${({ visibleFocus, variant, theme }) => {
+    if (variant === 'primary') {
+      return css`
+        color: ${theme.color.text04()};
+        fill: ${theme.color.text04()};
+        background-color: transparent;
 
-      &:hover {
-        color: ${theme.color.text03()};
-        background-color: ${theme.color.element11(opacity[16])};
+        &:hover {
+          color: ${theme.color.text03()};
+          background-color: ${theme.color.element11(opacity[16])};
+          ${IconContainer} {
+            background-color: ${theme.color.textPrimary()};
+          }
+        }
+        &:focus {
+          ${visibleFocus
+            ? css`
+                color: ${theme.color.text04()};
+                background-color: ${theme.color.element11(opacity[16])};
+              `
+            : undefined};
+        }
+        &:active {
+          box-shadow: 0 0 0 4px ${theme.color.elementPrimary(opacity[24])};
+          background-color: ${theme.color.element11(opacity[24])};
+        }
+        &:disabled {
+          opacity: ${opacity[48]};
+          cursor: default;
+          box-shadow: none;
+          &:hover {
+            ${IconContainer} {
+              background-color: ${theme.color.elementPrimary()};
+            }
+          }
+        }
+      `
+    } else if (variant === 'danger') {
+      return css`
+        color: ${theme.color.text04()};
+        fill: ${theme.color.text04()};
+        background-color: transparent;
         ${IconContainer} {
-          background-color: ${theme.color.textPrimary()};
+          background-color: ${theme.color.elementError()};
         }
-      }
-      &:focus {
-        ${visibleFocus
-          ? css`
-              color: ${theme.color.text04()};
-              background-color: ${theme.color.element11(opacity[16])};
-            `
-          : undefined};
-      }
-      &:active {
-        box-shadow: 0 0 0 4px ${theme.color.elementPrimary(opacity[24])};
-        background-color: ${theme.color.element11(opacity[24])};
-      }
-      &:disabled {
-        opacity: ${opacity[48]};
-        cursor: default;
-        box-shadow: none;
+
         &:hover {
+          color: ${theme.color.text03()};
+          background-color: ${theme.color.element11(opacity[16])};
           ${IconContainer} {
-            background-color: ${theme.color.elementPrimary()};
+            background-color: ${theme.color.textError()};
           }
         }
-      }
-    `
+        &:focus {
+          ${visibleFocus
+            ? css`
+                color: ${theme.color.text04()};
+                background-color: ${theme.color.element11(opacity[16])};
+              `
+            : undefined};
+        }
+        &:active {
+          box-shadow: 0 0 0 4px ${theme.color.elementError(opacity[24])};
+          background-color: ${theme.color.element11(opacity[24])};
+        }
+        &:disabled {
+          opacity: ${opacity[48]};
+          cursor: default;
+          box-shadow: none;
+          &:hover {
+            ${IconContainer} {
+              background-color: ${theme.color.elementError()};
+            }
+          }
+        }
+      `
+    }
   }}
 `
 const IconContainer = styled(Icon)`
@@ -568,6 +641,7 @@ export interface IconTextButtonProps
    * The icon element.
    */
   readonly icon: IconType
+  readonly variant?: Omit<ButtonVariantType, 'secondary'>
 }
 
 // eslint-disable-next-line react/display-name
@@ -584,6 +658,7 @@ export const IconTextButton = React.forwardRef<
       onPointerUp,
       onFocus,
       label,
+      variant = 'primary',
       ...props
     },
     ref
@@ -624,6 +699,7 @@ export const IconTextButton = React.forwardRef<
         onFocus={handleFocus}
         {...props}
         visibleFocus={visibleFocus}
+        variant={variant}
       >
         <Container>
           <IconContainer icon={icon} />

diff --git a/packages/core/src/Chip/__snapshots__/index.test.tsx.snap b/packages/core/src/Chip/__snapshots__/index.test.tsx.snap
@@ -250,17 +250,17 @@ exports[`Chips error 1`] = `
   border-radius: 2px;
   color: rgb(41,41,41);
   background-color: rgb(255,235,238);
-  color: rgb(211,47,47);
+  color: rgb(198,40,40);
   padding-left: 0;
-  border: 1px solid rgb(211,47,47);
+  border: 1px solid rgb(229,57,53);
 }
 
 .c4 {
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
   overflow: visible;
-  color: rgb(211,47,47);
+  color: rgb(229,57,53);
 }
 
 .c5 {