add bordered button variant (#1900)

* add bordered variant * add some more stories * add disabled state to bordered button and update stories * fix hover and disabled colors
mitodl · Dec 12, 2024 · 6a1b436 · 6a1b436
1 parent c7b87d4
commit 6a1b436
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 19 deletions.
diff --git a/frontends/ol-components/src/components/Button/Button.mdx b/frontends/ol-components/src/components/Button/Button.mdx
@@ -6,7 +6,7 @@ import * as ButtonStories from "./Button.stories"
 
 # Button
 
-Use prop `variant="primary" | "secondary" | "tertiary" | "text"` to set the button variant:
+Use prop `variant="primary" | "secondary" | "tertiary" | "bordered" | "noBorder" | "inverted" | "success" | "text"` to set the button variant:
 
 <Canvas of={ButtonStories.VariantStory} />
 

diff --git a/frontends/ol-components/src/components/Button/Button.stories.tsx b/frontends/ol-components/src/components/Button/Button.stories.tsx
@@ -34,9 +34,11 @@ const meta: Meta<typeof Button> = {
         "primary",
         "secondary",
         "tertiary",
-        "text",
+        "bordered",
+        "noBorder",
         "inverted",
-        "text-secondary",
+        "success",
+        "text",
       ],
       control: { type: "select" },
     },
@@ -88,15 +90,21 @@ export const VariantStory: Story = {
       <Button {...args} variant="tertiary">
         Tertiary
       </Button>
-      <Button {...args} variant="text">
-        Text
+      <Button {...args} variant="bordered">
+        Bordered
       </Button>
       <Button {...args} variant="noBorder">
-        Text Secondary
+        No Border
       </Button>
       <Button {...args} variant="inverted">
         Inverted
       </Button>
+      <Button {...args} variant="success">
+        Success
+      </Button>
+      <Button {...args} variant="text">
+        Text
+      </Button>
     </Stack>
   ),
 }
@@ -149,9 +157,21 @@ export const DisabledStory: Story = {
       <Button {...args} disabled variant="secondary">
         Secondary
       </Button>
-      <Button {...args} variant="tertiary">
+      <Button {...args} disabled variant="tertiary">
         Tertiary
       </Button>
+      <Button {...args} disabled variant="bordered">
+        Bordered
+      </Button>
+      <Button {...args} disabled variant="noBorder">
+        No Border
+      </Button>
+      <Button {...args} disabled variant="inverted">
+        Inverted
+      </Button>
+      <Button {...args} disabled variant="success">
+        Success
+      </Button>
       <Button {...args} disabled variant="text">
         Text
       </Button>
@@ -217,7 +237,16 @@ export const IconOnlyStory: Story = {
 
 const EDGES = ["rounded", "circular", "none"] as const
 
-const VARIANTS = ["primary", "secondary", "tertiary", "text"] as const
+const VARIANTS = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "bordered",
+  "noBorder",
+  "success",
+  "inverted",
+  "text",
+] as const
 const EXTRA_PROPS = [
   {},
   /**

diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx
@@ -10,10 +10,11 @@ type ButtonVariant =
   | "primary"
   | "secondary"
   | "tertiary"
-  | "text"
+  | "bordered"
   | "noBorder"
   | "inverted"
   | "success"
+  | "text"
 type ButtonSize = "small" | "medium" | "large"
 type ButtonEdge = "circular" | "rounded" | "none"
 
@@ -98,7 +99,7 @@ const buildStyles = (props: ButtonStyleProps & { theme: Theme }) => {
     ...props,
   }
   const { colors } = theme.custom
-  const hasBorder = variant === "secondary"
+  const hasBorder = variant === "secondary" || variant === "bordered"
   return css([
     {
       color: theme.palette.text.primary,
@@ -142,11 +143,6 @@ const buildStyles = (props: ButtonStyleProps & { theme: Theme }) => {
         boxShadow: "none",
       },
     },
-    hasBorder && {
-      backgroundColor: "transparent",
-      borderColor: "currentcolor",
-      borderStyle: "solid",
-    },
     variant === "success" && {
       backgroundColor: colors.darkGreen,
       color: colors.white,
@@ -163,13 +159,11 @@ const buildStyles = (props: ButtonStyleProps & { theme: Theme }) => {
         boxShadow: "none",
       },
     },
-    hasBorder && {
+    variant === "secondary" && {
+      color: colors.red,
       backgroundColor: "transparent",
       borderColor: "currentcolor",
       borderStyle: "solid",
-    },
-    variant === "secondary" && {
-      color: colors.red,
       ":hover:not(:disabled)": {
         backgroundColor: tinycolor(colors.brightRed).setAlpha(0.06).toString(),
       },
@@ -188,6 +182,20 @@ const buildStyles = (props: ButtonStyleProps & { theme: Theme }) => {
         color: colors.silverGray,
       },
     },
+    variant === "bordered" && {
+      backgroundColor: colors.white,
+      color: colors.silverGrayDark,
+      border: `1px solid ${colors.silverGrayLight}`,
+      ":hover:not(:disabled)": {
+        backgroundColor: colors.lightGray1,
+        color: colors.darkGray2,
+      },
+      ":disabled": {
+        backgroundColor: colors.lightGray2,
+        border: `1px solid ${colors.lightGray2}`,
+        color: colors.silverGrayDark,
+      },
+    },
     variant === "noBorder" && {
       backgroundColor: colors.white,
       color: colors.darkGray2,