From 2dc2be20f16c6add5e051c422a7a4d30297c4c61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3f=20Poduszl=C3=B3?= <14854048+kripod@users.noreply.github.com> Date: Sat, 13 Jul 2024 09:00:03 +0200 Subject: [PATCH] refactor(Button): constrain color variants by level --- src/components/ButtonPrimary.stories.tsx | 1 - src/components/ButtonPrimary.tsx | 4 +--- src/components/ButtonSecondary.stories.tsx | 1 - src/components/ButtonSecondary.tsx | 4 +--- src/components/ButtonTertiary.stories.tsx | 1 - src/components/ButtonTertiary.tsx | 6 ++---- src/docs/sample.mdx | 2 -- 7 files changed, 4 insertions(+), 15 deletions(-) diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx index e3d796d..7f71d53 100644 --- 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 index 7077053..2f7c5a7 100644 --- 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 index 075bdc3..341e2e1 100644 --- 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 index a2088ab..0b0fb82 100644 --- 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 index 15cac8a..1372e6c 100644 --- 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 index ca03811..a3dc1c3 100644 --- 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 index d2cc6cf..1036780 100644 --- 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>