refactor(Button): constrain color variants by level

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

Hide file tree

Showing 7 changed files with 4 additions and 15 deletions.
diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx
@@ -44,7 +44,6 @@ export const Colors = {
     <div className="flex flex-wrap gap-4">
       <ButtonPrimary color="neutral">Neutral</ButtonPrimary>
       <ButtonPrimary color="accent">Accent</ButtonPrimary>
-      <ButtonPrimary color="danger">Danger</ButtonPrimary>
     </div>
   ),
 } satisfies Story;
diff --git a/src/components/ButtonPrimary.tsx b/src/components/ButtonPrimary.tsx
@@ -5,7 +5,7 @@ import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonPrimaryProps extends ButtonProps {
   size?: "sm" | "md" | "lg";
-  color?: "neutral" | "accent" | "danger";
+  color?: "neutral" | "accent";
 }
 
 export const ButtonPrimary = forwardRef(function ButtonPrimary(
@@ -23,8 +23,6 @@ export const ButtonPrimary = forwardRef(function ButtonPrimary(
           "bg-ui-neutral-900 text-ui-neutral-50 active:bg-ui-neutral-800",
         color === "accent" &&
           "bg-ui-accent-600 text-ui-accent-50 active:bg-ui-accent-700",
-        color === "danger" &&
-          "bg-ui-danger-600 text-ui-danger-50 active:bg-ui-danger-700",
       )}
       {...props}
     />

diff --git a/src/components/ButtonSecondary.stories.tsx b/src/components/ButtonSecondary.stories.tsx
@@ -43,7 +43,6 @@ export const Colors = {
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonSecondary color="neutral">Neutral</ButtonSecondary>
-      <ButtonSecondary color="accent">Accent</ButtonSecondary>
       <ButtonSecondary color="danger">Danger</ButtonSecondary>
     </div>
   ),

diff --git a/src/components/ButtonSecondary.tsx b/src/components/ButtonSecondary.tsx
@@ -5,7 +5,7 @@ import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonSecondaryProps extends ButtonProps {
   size?: "sm" | "md" | "lg";
-  color?: "neutral" | "accent" | "danger";
+  color?: "neutral" | "danger";
 }
 
 export const ButtonSecondary = forwardRef(function ButtonSecondary(
@@ -21,8 +21,6 @@ export const ButtonSecondary = forwardRef(function ButtonSecondary(
         "font-medium",
         color === "neutral" &&
           "bg-ui-neutral-200 text-ui-neutral-950 active:bg-ui-neutral-300",
-        color === "accent" &&
-          "bg-ui-accent-200 text-ui-accent-950 active:bg-ui-accent-300",
         color === "danger" &&
           "bg-ui-danger-200 text-ui-danger-950 active:bg-ui-danger-300",
       )}

diff --git a/src/components/ButtonTertiary.stories.tsx b/src/components/ButtonTertiary.stories.tsx
@@ -42,7 +42,6 @@ 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?: "neutral" | "accent" | "danger";
+  color?: "accent" | "danger";
 }
 
 export const ButtonTertiary = forwardRef(function ButtonTertiary(
-  { size = "md", color = "neutral", className, ...props }: ButtonTertiaryProps,
+  { size = "md", color = "accent", className, ...props }: ButtonTertiaryProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   return (
@@ -19,8 +19,6 @@ 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,7 +3,6 @@ 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>
@@ -16,7 +15,6 @@ 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>