Added dark variant to Button (#19957)

airbytehq · Dec 2, 2022 · e532d7b · e532d7b
1 parent 885507f
commit e532d7b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/airbyte-webapp/src/components/ui/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss
@@ -213,6 +213,21 @@
     }
   }
 
+  &.typeDark {
+    background-color: colors.$dark-blue;
+    color: colors.$white;
+
+    &:hover {
+      background-color: colors.$dark-blue-800;
+      color: colors.$white;
+    }
+
+    &:active {
+      background-color: colors.$dark-blue-1000;
+      color: colors.$white;
+    }
+  }
+
   &.isLoading {
     position: relative;
     align-content: center;

diff --git a/airbyte-webapp/src/components/ui/Button/Button.tsx b/airbyte-webapp/src/components/ui/Button/Button.tsx
@@ -32,6 +32,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [styles.typeLight]: variant === "light",
     [styles.typePrimary]: variant === "primary",
     [styles.typeSecondary]: variant === "secondary",
+    [styles.typeDark]: variant === "dark",
   };
   const widthStyle: { width?: string } = {};
   if (width) {

diff --git a/airbyte-webapp/src/components/ui/Button/index.stories.tsx b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
@@ -75,3 +75,9 @@ Clear.args = {
   variant: "clear",
   children: "No Stroke",
 };
+
+export const Dark = Template.bind({});
+Dark.args = {
+  variant: "dark",
+  children: "Dark",
+};
diff --git a/airbyte-webapp/src/components/ui/Button/types.tsx b/airbyte-webapp/src/components/ui/Button/types.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 type ButtonSize = "xs" | "sm" | "lg";
-type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear";
+type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear" | "dark";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   clickable?: boolean;