feat(Button): trailing icon support

kripod · Jul 15, 2024 · 575ede3 · 575ede3
1 parent 0d1ae6d
commit 575ede3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -6,7 +6,8 @@ import { controlClassName } from "../utils/controlClassName";
 export interface ButtonProps extends React.ComponentPropsWithRef<"button"> {
   render?: (props: React.ComponentPropsWithRef<"button">) => React.ReactNode;
   size?: "auto" | "sm" | "md" | "lg";
-  icon?: React.ReactNode;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
   shape?: "rectangle" | "pill";
 }
 
@@ -18,8 +19,9 @@ export const Button = forwardRef(function Button(
   {
     render = defaultRender,
     size = "auto",
-    icon,
-    shape = icon == null ? "rectangle" : "pill",
+    iconStart,
+    iconEnd,
+    shape = iconStart != null || iconEnd != null ? "pill" : "rectangle",
     className,
     children,
     ...props
@@ -42,7 +44,13 @@ export const Button = forwardRef(function Button(
     ),
     children: (
       <>
-        {icon} <span>{children}</span>
+        {iconStart != null ? (
+          <span className="flex-none">{iconStart}</span>
+        ) : null}
+        <span className={clsx(iconEnd != null && "flex-1 text-start")}>
+          {children}
+        </span>
+        {iconEnd != null ? <span className="flex-none">{iconEnd}</span> : null}
       </>
     ),
     ...props,

diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx
@@ -44,13 +44,13 @@ export const Sizes = {
 export const WithIcon = {
   render: () => (
     <div className="flex flex-col items-start gap-4">
-      <ButtonPrimary size="sm" icon={<PlusIcon16 className="size-4" />}>
+      <ButtonPrimary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonPrimary>
-      <ButtonPrimary size="md" icon={<PlusIcon16 className="size-4" />}>
+      <ButtonPrimary size="md" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonPrimary>
-      <ButtonPrimary size="lg" icon={<PlusIcon24 className="size-6" />}>
+      <ButtonPrimary size="lg" iconStart={<PlusIcon24 className="size-6" />}>
         Add item
       </ButtonPrimary>
     </div>

diff --git a/src/components/ButtonSecondary.stories.tsx b/src/components/ButtonSecondary.stories.tsx
@@ -44,13 +44,13 @@ export const Sizes = {
 export const WithIcon = {
   render: () => (
     <div className="flex flex-col items-start gap-4">
-      <ButtonSecondary size="sm" icon={<PlusIcon16 className="size-4" />}>
+      <ButtonSecondary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonSecondary>
-      <ButtonSecondary size="md" icon={<PlusIcon16 className="size-4" />}>
+      <ButtonSecondary size="md" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonSecondary>
-      <ButtonSecondary size="lg" icon={<PlusIcon24 className="size-6" />}>
+      <ButtonSecondary size="lg" iconStart={<PlusIcon24 className="size-6" />}>
         Add item
       </ButtonSecondary>
     </div>

diff --git a/src/components/ButtonTertiary.stories.tsx b/src/components/ButtonTertiary.stories.tsx
@@ -44,13 +44,13 @@ export const Sizes = {
 export const WithIcon = {
   render: () => (
     <div className="flex flex-col items-start gap-4">
-      <ButtonTertiary size="sm" icon={<PlusIcon16 className="size-4" />}>
+      <ButtonTertiary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonTertiary>
-      <ButtonTertiary size="md" icon={<PlusIcon16 className="size-4" />}>
+      <ButtonTertiary size="md" iconStart={<PlusIcon16 className="size-4" />}>
         Add item
       </ButtonTertiary>
-      <ButtonTertiary size="lg" icon={<PlusIcon24 className="size-6" />}>
+      <ButtonTertiary size="lg" iconStart={<PlusIcon24 className="size-6" />}>
         Add item
       </ButtonTertiary>
     </div>