feat(ButtonTertiary): re-add neutral color variant

kripod · Jul 13, 2024 · 2edc0b3 · 2edc0b3
1 parent 2dc2be2
commit 2edc0b3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/components/ButtonTertiary.stories.tsx b/src/components/ButtonTertiary.stories.tsx
@@ -42,6 +42,7 @@ export const Sizes = {
 export const Colors = {
   render: () => (
     <div className="flex flex-wrap gap-4">
+      <ButtonTertiary color="neutral">Neutral</ButtonTertiary>
       <ButtonTertiary color="accent">Accent</ButtonTertiary>
       <ButtonTertiary color="danger">Danger</ButtonTertiary>
     </div>

diff --git a/src/components/ButtonTertiary.tsx b/src/components/ButtonTertiary.tsx
@@ -5,11 +5,11 @@ import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonTertiaryProps extends ButtonProps {
   size?: "sm" | "md" | "lg";
-  color?: "accent" | "danger";
+  color?: "neutral" | "accent" | "danger";
 }
 
 export const ButtonTertiary = forwardRef(function ButtonTertiary(
-  { size = "md", color = "accent", className, ...props }: ButtonTertiaryProps,
+  { size = "md", color = "neutral", className, ...props }: ButtonTertiaryProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   return (
@@ -19,6 +19,8 @@ export const ButtonTertiary = forwardRef(function ButtonTertiary(
       className={clsx(
         className,
         "bg-ui-neutral-50 font-medium ring-1 ring-inset",
+        color === "neutral" &&
+          "text-ui-neutral-950 ring-ui-neutral-600 active:bg-ui-neutral-100",
         color === "accent" &&
           "text-ui-accent-700 ring-ui-accent-600 active:bg-ui-accent-100",
         color === "danger" &&

diff --git a/src/docs/sample.mdx b/src/docs/sample.mdx
@@ -3,6 +3,7 @@ import { Unstyled } from "@storybook/blocks";
 import { Alert } from "../components/Alert";
 import { ButtonPrimary } from "../components/ButtonPrimary";
 import { ButtonSecondary } from "../components/ButtonSecondary";
+import { ButtonTertiary } from "../components/ButtonTertiary";
 import { Input } from "../components/Input";
 
 <Unstyled>
@@ -15,6 +16,7 @@ import { Input } from "../components/Input";
         <div className="flex flex-wrap gap-2">
           <Input size="sm" placeholder="Placeholder" />
           <ButtonPrimary size="sm">Ok</ButtonPrimary>
+          <ButtonTertiary size="sm">Cancel</ButtonTertiary>
         </div>
       </div>
     </Alert>