feat: new outline button components (#1068)

Introduces a new OutlineButton component, along with an OutlineDropdownButton. Closes D2IQ-99363
d2iq · Oct 20, 2023 · 8546cc3 · 8546cc3
1 parent 85e7be2
commit 8546cc3
Show file tree

Hide file tree

Showing 10 changed files with 369 additions and 4 deletions.
diff --git a/packages/button/README.md b/packages/button/README.md
@@ -10,6 +10,7 @@ There are several types of buttons to choose from based on the intended action:
 | --------------- | ------------------------------------------------------------------------------- |
 | Primary         | Used for the most important call-to-action on a page, such as Save or Deploy.   |
 | Secondary       | Used primarily for a call-to-action that is a link.                             |
+| Outline         | Used as an alternative secondary button with an outline/ghost style.            |
 | Warning         | Used to advise caution.                                                         |
 | Danger          | Used to highlight something dangerous that can't be undone, such as "Delete".   |
 | Icon only       | Use when an icon is enough to represent the action, such as "Create a Service". |

diff --git a/packages/button/components/ButtonBase.tsx b/packages/button/components/ButtonBase.tsx
@@ -30,7 +30,8 @@ export enum ButtonAppearances {
   Standard = "standard",
   Danger = "danger",
   Success = "success",
-  Warning = "warning"
+  Warning = "warning",
+  Outline = "outline"
 }
 
 export interface ButtonProps extends LinkProps {

diff --git a/packages/button/components/OutlineButton.tsx b/packages/button/components/OutlineButton.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import {
+  default as ButtonBase,
+  ButtonProps,
+  ButtonAppearances
+} from "./ButtonBase";
+
+const OutlineButton = (props: ButtonProps) => (
+  <ButtonBase
+    appearance={ButtonAppearances.Outline}
+    data-cy={props["data-cy"] ?? "outlineButton"}
+    {...props}
+  />
+);
+
+export default OutlineButton;
diff --git a/packages/button/components/OutlineDropdownButton.tsx b/packages/button/components/OutlineDropdownButton.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import OutlineButton from "./OutlineButton";
+import { ButtonProps } from "./ButtonBase";
+import { SystemIcons } from "../../icons/dist/system-icons-enum";
+
+const OutlineDropdownButton = (props: ButtonProps) => (
+  <OutlineButton
+    iconEnd={SystemIcons.TriangleDown}
+    data-cy={props["data-cy"] ?? "outlineDropdownButton"}
+    {...props}
+  />
+);
+
+export default OutlineDropdownButton;
diff --git a/packages/button/index.ts b/packages/button/index.ts
@@ -4,12 +4,14 @@ export { default as StandardButton } from "./components/StandardButton";
 export { default as SuccessButton } from "./components/SuccessButton";
 export { default as DangerButton } from "./components/DangerButton";
 export { default as WarningButton } from "./components/WarningButton";
+export { default as OutlineButton } from "./components/OutlineButton";
 
 export { default as PrimaryDropdownButton } from "./components/PrimaryDropdownButton";
 export { default as SecondaryDropdownButton } from "./components/SecondaryDropdownButton";
 export { default as StandardDropdownButton } from "./components/StandardDropdownButton";
 export { default as SuccessDropdownButton } from "./components/SuccessDropdownButton";
 export { default as WarningDropdownButton } from "./components/WarningDropdownButton";
 export { default as DangerDropdownButton } from "./components/DangerDropdownButton";
+export { default as OutlineDropdownButton } from "./components/OutlineDropdownButton";
 
 export { default as ResetButton } from "./components/ResetButton";
diff --git a/packages/button/stories/DefaultButton.stories.tsx b/packages/button/stories/DefaultButton.stories.tsx
@@ -6,7 +6,8 @@ import {
   StandardButton,
   SuccessButton,
   DangerButton,
-  WarningButton
+  WarningButton,
+  OutlineButton
 } from "../..";
 import { action } from "@storybook/addon-actions";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
@@ -17,6 +18,7 @@ export default {
   component: StandardButton,
   subComponents: {
     PrimaryButton,
+    OutlineButton,
     SecondaryButton,
     SuccessButton,
     DangerButton,
@@ -59,6 +61,10 @@ export const _SecondaryButton = {
   render: args => <SecondaryButton {...args}>{args.children}</SecondaryButton>
 };
 
+export const _OutlineButton = {
+  render: args => <OutlineButton {...args}>{args.children}</OutlineButton>
+};
+
 export const _SuccessButton = {
   render: args => <SuccessButton {...args}>{args.children}</SuccessButton>
 };

diff --git a/packages/button/stories/DropdownButton.stories.tsx b/packages/button/stories/DropdownButton.stories.tsx
@@ -6,7 +6,8 @@ import {
   StandardDropdownButton,
   SuccessDropdownButton,
   WarningDropdownButton,
-  DangerDropdownButton
+  DangerDropdownButton,
+  OutlineDropdownButton
 } from "../../index";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
@@ -49,6 +50,12 @@ export const _SecondaryDropdownButton = {
   )
 };
 
+export const _OutlineDropdownButton = {
+  render: args => (
+    <OutlineDropdownButton {...args}>{args.children}</OutlineDropdownButton>
+  )
+};
+
 export const _SuccessDropdownButton = {
   render: args => (
     <SuccessDropdownButton {...args}>{args.children}</SuccessDropdownButton>

diff --git a/packages/button/style.ts b/packages/button/style.ts
@@ -18,7 +18,10 @@ import {
   themeErrorInverted,
   themeTextColorDisabledInverted,
   themeWarningInverted,
-  themeWarning
+  themeWarning,
+  purpleLighten5,
+  purpleLighten4,
+  themeBgPrimary
 } from "../design-tokens/build/js/designTokens";
 import { darken, getTextColor } from "../shared/styles/color";
 import { ButtonAppearances } from "./components/ButtonBase";
@@ -70,6 +73,7 @@ export const filledButton = (
 
 const mutedButton = css`
   ${tintContent(themeTextColorDisabled)};
+  border-color: ${themeBgDisabled};
   cursor: default;
   pointer-events: none;
 
@@ -196,6 +200,26 @@ export const focusStyleByAppearance = (appearance, isInverse) => {
       return isInverse
         ? focusStyles(getHoverColor(getCSSVarValue(themeWarningInverted)))
         : focusStyles(getHoverColor(getCSSVarValue(themeWarning)));
+    case "outline":
+      return css`
+        ${(isInverse
+          ? focusStyles(
+              getCSSVarValue(themeBgPrimary),
+              getHoverColor(getCSSVarValue(themeTextColorInteractiveInverted))
+            )
+          : getCSSVarValue(themeBgPrimary),
+        focusStyles(getHoverColor(getCSSVarValue(themeTextColorInteractive))))};
+        &:focus {
+          background-color: ${purpleLighten5};
+
+          &:after {
+            bottom: -4px;
+            left: -4px;
+            right: -4px;
+            top: -4px;
+          }
+        }
+      `;
     default:
       return "";
   }
@@ -251,6 +275,32 @@ export const button = appearance => {
         getHoverColor(getCSSVarValue(themeWarning)),
         getActiveColor(getCSSVarValue(themeWarning))
       );
+    case "outline":
+      return css`
+        border: 1px solid ${getCSSVarValue(themeTextColorInteractive)};
+        border-radius: ${borderRadiusDefault};
+        padding: ${buttonPadding.vert} ${buttonPadding.horiz};
+
+        ${tintContent(themeTextColorInteractive)};
+
+        &:hover {
+          background-color: ${purpleLighten5};
+          ${tintContent(
+            getHoverColor(getCSSVarValue(themeTextColorInteractive))
+          )};
+        }
+        &:active {
+          background-color: ${purpleLighten4};
+          ${tintContent(
+            getActiveColor(getCSSVarValue(themeTextColorInteractive))
+          )};
+        }
+        &[href],
+        &[href]:visited {
+          background-color: ${purpleLighten4};
+          ${tintContent(themeTextColorInteractive)};
+        }
+      `;
     default:
       return "";
   }
@@ -306,6 +356,26 @@ export const buttonInverse = appearance => {
         getHoverColor(getCSSVarValue(themeWarningInverted)),
         getActiveColor(getCSSVarValue(themeWarningInverted))
       );
+    case "outline":
+      return css`
+        border: 1px solid ${getCSSVarValue(themeTextColorInteractiveInverted)};
+        ${tintContent(themeTextColorInteractiveInverted)};
+
+        &:hover {
+          ${tintContent(
+            getHoverColor(getCSSVarValue(themeTextColorInteractiveInverted))
+          )};
+        }
+        &:active {
+          ${tintContent(
+            getActiveColor(getCSSVarValue(themeTextColorInteractiveInverted))
+          )};
+        }
+        &[href],
+        &[href]:visited {
+          ${tintContent(themeTextColorInteractiveInverted)};
+        }
+      `;
     default:
       return "";
   }