feat(Button): square and circle variants

kripod · Jul 16, 2024 · ac96ca5 · ac96ca5
1 parent 86d00d5
commit ac96ca5
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 13 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -8,7 +8,7 @@ export interface ButtonProps extends React.ComponentPropsWithRef<"button"> {
   size?: "auto" | "sm" | "md" | "lg";
   iconStart?: React.ReactNode;
   iconEnd?: React.ReactNode;
-  shape?: "rectangle" | "pill";
+  shape?: "rectangle" | "pill" | "square" | "circle";
 }
 
 const defaultRender: ButtonProps["render"] = (props) => (

diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx
@@ -1,4 +1,7 @@
-import { PlusIcon as PlusIcon16 } from "@heroicons/react/16/solid";
+import {
+  Bars3BottomLeftIcon,
+  PlusIcon as PlusIcon16,
+} from "@heroicons/react/16/solid";
 import { PlusIcon as PlusIcon24 } from "@heroicons/react/24/solid";
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
@@ -62,6 +65,12 @@ export const Shapes = {
     <div className="flex flex-col items-start gap-4">
       <ButtonPrimary shape="rectangle">Rectangle</ButtonPrimary>
       <ButtonPrimary shape="pill">Pill</ButtonPrimary>
+      <ButtonPrimary shape="square">
+        <Bars3BottomLeftIcon className="size-4" />
+      </ButtonPrimary>
+      <ButtonPrimary shape="circle">
+        <Bars3BottomLeftIcon className="size-4" />
+      </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";
-  shape?: "rectangle" | "pill";
+  shape?: "rectangle" | "pill" | "square" | "circle";
   color?: "neutral" | "accent";
 }
 

diff --git a/src/components/ButtonSecondary.stories.tsx b/src/components/ButtonSecondary.stories.tsx
@@ -1,4 +1,7 @@
-import { PlusIcon as PlusIcon16 } from "@heroicons/react/16/solid";
+import {
+  Bars3BottomLeftIcon,
+  PlusIcon as PlusIcon16,
+} from "@heroicons/react/16/solid";
 import { PlusIcon as PlusIcon24 } from "@heroicons/react/24/solid";
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
@@ -62,6 +65,12 @@ export const Shapes = {
     <div className="flex flex-col items-start gap-4">
       <ButtonSecondary shape="rectangle">Rectangle</ButtonSecondary>
       <ButtonSecondary shape="pill">Pill</ButtonSecondary>
+      <ButtonSecondary shape="square">
+        <Bars3BottomLeftIcon className="size-4" />
+      </ButtonSecondary>
+      <ButtonSecondary shape="circle">
+        <Bars3BottomLeftIcon className="size-4" />
+      </ButtonSecondary>
     </div>
   ),
 } satisfies Story;

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";
-  shape?: "rectangle" | "pill";
+  shape?: "rectangle" | "pill" | "square" | "circle";
   color?: "neutral" | "danger";
 }
 

diff --git a/src/components/ButtonTertiary.stories.tsx b/src/components/ButtonTertiary.stories.tsx
@@ -1,4 +1,7 @@
-import { PlusIcon as PlusIcon16 } from "@heroicons/react/16/solid";
+import {
+  Bars3BottomLeftIcon,
+  PlusIcon as PlusIcon16,
+} from "@heroicons/react/16/solid";
 import { PlusIcon as PlusIcon24 } from "@heroicons/react/24/solid";
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
@@ -62,6 +65,12 @@ export const Shapes = {
     <div className="flex flex-col items-start gap-4">
       <ButtonTertiary shape="rectangle">Rectangle</ButtonTertiary>
       <ButtonTertiary shape="pill">Pill</ButtonTertiary>
+      <ButtonTertiary shape="square">
+        <Bars3BottomLeftIcon className="size-4" />
+      </ButtonTertiary>
+      <ButtonTertiary shape="circle">
+        <Bars3BottomLeftIcon className="size-4" />
+      </ButtonTertiary>
     </div>
   ),
 } satisfies Story;

diff --git a/src/components/ButtonTertiary.tsx b/src/components/ButtonTertiary.tsx
@@ -5,7 +5,7 @@ import { Button, type ButtonProps } from "./Button";
 
 export interface ButtonTertiaryProps extends ButtonProps {
   size?: "sm" | "md" | "lg";
-  shape?: "rectangle" | "pill";
+  shape?: "rectangle" | "pill" | "square" | "circle";
   color?: "neutral" | "accent" | "danger";
 }
 

diff --git a/src/utils/controlClassName.ts b/src/utils/controlClassName.ts
@@ -2,21 +2,26 @@ import { clsx } from "clsx/lite";
 
 interface ControlProps {
   size: "auto" | "sm" | "md" | "lg";
-  shape: "rectangle" | "pill";
+  shape: "rectangle" | "pill" | "square" | "circle";
+}
+
+function isEquilateral(shape: ControlProps["shape"]) {
+  return shape === "square" || shape === "circle";
 }
 
 export function controlClassName({ size, shape }: ControlProps) {
   return clsx(
     "transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ui-accent-600 disabled:pointer-events-none disabled:opacity-40",
-    size === "sm" && "h-8 text-base/none",
-    size === "md" && "h-10 text-base/none",
-    size === "lg" && "h-14 text-xl/none",
-    shape === "rectangle" &&
+    size === "sm" && clsx("h-8 text-base/none", isEquilateral(shape) && "w-8"),
+    size === "md" &&
+      clsx("h-10 text-base/none", isEquilateral(shape) && "w-10"),
+    size === "lg" && clsx("h-14 text-xl/none", isEquilateral(shape) && "w-14"),
+    (shape === "rectangle" || shape === "square") &&
       clsx(
         size === "sm" && "rounded-md",
         size === "md" && "rounded-lg",
         size === "lg" && "rounded-xl",
       ),
-    shape === "pill" && "rounded-full",
+    (shape === "pill" || shape === "circle") && "rounded-full",
   );
 }