feat: button loading state

Author: thevuong

apps/docs/src/components/ui/button/button.stories.tsx

@@ -1,16 +1,16 @@
 import { Button } from '@codefixlabs/ui/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import {
-  ActivitySquareIcon,
-  ArrowUpRightSquareIcon,
-  GanttChartSquareIcon,
+  AlarmCheckIcon,
+  CogIcon,
+  GalleryThumbnailsIcon,
   GitForkIcon,
 } from 'lucide-react';
 
 const icons = {
-  ActivitySquareIcon: <ActivitySquareIcon className="h-4 w-4" />,
-  ArrowUpRightSquareIcon: <ArrowUpRightSquareIcon className="h-4 w-4" />,
-  GanttChartSquareIcon: <GanttChartSquareIcon className="h-4 w-4" />,
+  AlarmCheckIcon: <AlarmCheckIcon className="h-4 w-4" />,
+  CogIcon: <CogIcon className="h-4 w-4" />,
+  GalleryThumbnailsIcon: <GalleryThumbnailsIcon className="h-4 w-4" />,
   GitForkIcon: <GitForkIcon className="h-4 w-4" />,
 };
 
@@ -25,10 +25,10 @@ const meta: Meta<typeof Button> = {
     endIcon: {
       control: {
         labels: {
-          BellIcon: 'Bell',
-          BookmarkIcon: 'Bookmark',
-          GearIcon: 'Gear',
-          LayersIcon: 'Layers',
+          AlarmCheckIcon: 'AlarmCheckIcon',
+          CogIcon: 'CogIcon',
+          GalleryThumbnailsIcon: 'GalleryThumbnailsIcon',
+          GitForkIcon: 'GitForkIcon',
         },
         type: 'select',
       },
@@ -49,10 +49,10 @@ const meta: Meta<typeof Button> = {
     startIcon: {
       control: {
         labels: {
-          BellIcon: 'Bell',
-          BookmarkIcon: 'Bookmark',
-          GearIcon: 'Gear',
-          LayersIcon: 'Layers',
+          AlarmCheckIcon: 'AlarmCheckIcon',
+          CogIcon: 'CogIcon',
+          GalleryThumbnailsIcon: 'GalleryThumbnailsIcon',
+          GitForkIcon: 'GitForkIcon',
         },
         type: 'select',
       },
@@ -156,6 +156,31 @@ export const Loading: Story = {
   },
 };
 
+export const LoadingWithIcon: Story = {
+  args: {
+    ...Basic.args,
+    loading: true,
+    startIcon: <GitForkIcon className="h-4 w-4" />,
+  },
+};
+
+export const LoadingWithIconRight: Story = {
+  args: {
+    ...Basic.args,
+    endIcon: <CogIcon className="h-4 w-4" />,
+    loading: true,
+  },
+};
+
+export const LoadingWithIconBoth: Story = {
+  args: {
+    ...Basic.args,
+    endIcon: <CogIcon className="h-4 w-4" />,
+    loading: true,
+    startIcon: <GitForkIcon className="h-4 w-4" />,
+  },
+};
+
 export const Disabled: Story = {
   args: {
     ...Basic.args,
@@ -173,6 +198,6 @@ export const IconLeft: Story = {
 export const IconRight: Story = {
   args: {
     ...Basic.args,
-    endIcon: <GanttChartSquareIcon className="h-4 w-4" />,
+    endIcon: <CogIcon className="h-4 w-4" />,
   },
 };

packages/ui/src/cva/button.ts

@@ -21,7 +21,7 @@ const btnSizes: {
   {
     icon: true,
     sizes: [
-      // --- sm
+      // --- 32px
       {
         className: 'px-2 h-8',
         size: 'sm',
@@ -32,7 +32,7 @@ const btnSizes: {
         size: 'sm',
         variant: ['outline'],
       },
-      // --- md
+      // --- 40px
       {
         className: 'px-3 h-10',
         size: 'md',
@@ -43,7 +43,7 @@ const btnSizes: {
         size: 'md',
         variant: ['outline'],
       },
-      // --- lg
+      // --- 48px
       {
         className: 'px-4 h-12',
         size: 'lg',
@@ -59,7 +59,7 @@ const btnSizes: {
   {
     icon: false,
     sizes: [
-      // --- sm
+      // --- 32px
       {
         className: 'px-4 h-8',
         size: 'sm',
@@ -70,7 +70,7 @@ const btnSizes: {
         size: 'sm',
         variant: ['outline'],
       },
-      // --- md
+      // --- 40px
       {
         className: 'px-5 h-10',
         size: 'md',
@@ -81,7 +81,7 @@ const btnSizes: {
         size: 'md',
         variant: ['outline'],
       },
-      // --- lg
+      // --- 48px
       {
         className: 'px-6 h-12',
         size: 'lg',
@@ -113,23 +113,12 @@ const compoundSizes = btnSizes.flatMap<{
 
 export const buttonVariants = cva(
   [
-    'relative select-none items-center gap-2 whitespace-nowrap text-sm font-medium transition-colors',
+    'relative select-none items-center gap-2 overflow-hidden whitespace-nowrap text-sm font-medium transition-colors',
     'focus:ring-ring/40 focus:outline-none focus:ring-2',
-    'data-disabled:cursor-not-allowed',
-    'data-disabled:ring-0',
+    'data-disabled:cursor-not-allowed data-disabled:ring-0',
   ],
   {
-    compoundVariants: [
-      {
-        className: 'data-disabled:bg-opacity-50',
-        variant: ['primary', 'secondary', 'destructive'],
-      },
-      {
-        className: 'data-disabled:opacity-50',
-        variant: ['ghost', 'outline'],
-      },
-      ...compoundSizes,
-    ],
+    compoundVariants: [...compoundSizes],
     defaultVariants: {
       block: false,
       icon: false,
@@ -144,8 +133,8 @@ export const buttonVariants = cva(
         true: 'flex w-full',
       },
       icon: {
-        false: '',
-        true: '',
+        false: undefined,
+        true: undefined,
       },
       justify: {
         between: 'justify-between',
@@ -157,21 +146,40 @@ export const buttonVariants = cva(
         square: 'rounded-sm',
       },
       size: {
-        lg: '',
-        md: '',
-        sm: '',
+        lg: undefined,
+        md: undefined,
+        sm: undefined,
       },
       variant: {
-        destructive:
-          'bg-destructive text-destructive-foreground [&:not([data-disabled])]:hover:bg-destructive/90',
-        ghost: '[&:not([data-disabled])]:hover:bg-accent',
+        destructive: [
+          'bg-destructive text-destructive-foreground',
+          '[&:not([data-disabled])]:hover:bg-destructive/90',
+          '[&:not([data-disabled])]:focus:bg-destructive/90',
+          'data-disabled:bg-destructive/60',
+        ],
+        ghost: [
+          '[&:not([data-disabled])]:hover:bg-accent',
+          'data-disabled:opacity-60',
+        ],
         link: 'text-primary rounded-none hover:underline',
-        outline:
-          'border-input [&:not([data-disabled])]:hover:bg-accent [&:not([data-disabled])]:hover:text-accent-foreground border',
-        primary:
-          'bg-primary text-primary-foreground [&:not([data-disabled])]:hover:bg-primary/90',
-        secondary:
-          'bg-secondary text-secondary-foreground [&:not([data-disabled])]:hover:bg-secondary/90',
+        outline: [
+          'border-input border',
+          '[&:not([data-disabled])]:hover:bg-accent [&:not([data-disabled])]:hover:text-accent-foreground',
+          '[&:not([data-disabled])]:focus:bg-accent [&:not([data-disabled])]:focus:text-accent-foreground',
+          'data-disabled:opacity-60',
+        ],
+        primary: [
+          'bg-primary text-primary-foreground',
+          '[&:not([data-disabled])]:hover:bg-primary/90',
+          '[&:not([data-disabled])]:focus:bg-primary/90',
+          'data-disabled:bg-primary/60',
+        ],
+        secondary: [
+          'bg-secondary text-secondary-foreground',
+          '[&:not([data-disabled])]:hover:bg-secondary/90',
+          '[&:not([data-disabled])]:focus:bg-secondary/90',
+          'data-disabled:bg-secondary/60',
+        ],
       },
     },
   },

packages/ui/src/cva/command.ts

@@ -8,7 +8,7 @@ export const commandVariants = cva(
     },
     variants: {
       variant: {
-        dialog: '',
+        dialog: undefined,
         primary: 'border shadow-lg',
       },
     },

packages/ui/src/cva/form.ts

@@ -1,6 +1,6 @@
 import { cva } from 'class-variance-authority';
 
-export const formItemVariants = cva('', {
+export const formItemVariants = cva(undefined, {
   defaultVariants: {
     inline: false,
   },

packages/ui/src/cva/radio-group.ts

@@ -1,13 +1,13 @@
 import { cva } from 'class-variance-authority';
 
-export const radioGroupVariants = cva('', {
+export const radioGroupVariants = cva(undefined, {
   defaultVariants: {
     variant: 'default',
   },
   variants: {
     variant: {
       default: 'grid gap-2',
-      simple: '',
+      simple: undefined,
     },
   },
 });

packages/ui/src/cva/select.ts

@@ -48,7 +48,7 @@ export const selectContentVariants = cva(
     },
     variants: {
       position: {
-        'item-aligned': '',
+        'item-aligned': undefined,
         popper:
           'max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)]',
       },

packages/ui/src/cva/tabs.ts

@@ -1,14 +1,14 @@
 import { cva } from 'class-variance-authority';
 
-export const tabsListVariants = cva('', {
+export const tabsListVariants = cva(undefined, {
   defaultVariants: {
     variant: 'default',
   },
   variants: {
     variant: {
       default:
         'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center gap-1 rounded-lg p-1',
-      simple: '',
+      simple: undefined,
     },
   },
 });
@@ -29,7 +29,7 @@ export const tabsTriggerVariants = cva(
           'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium',
           'data-state-active:bg-background data-state-active:text-foreground data-state-active:shadow-sm',
         ],
-        simple: '',
+        simple: undefined,
       },
     },
   },
@@ -44,7 +44,7 @@ export const tabsContentVariants = cva(
     variants: {
       variant: {
         default: 'mt-2 rounded-lg',
-        simple: '',
+        simple: undefined,
       },
     },
   },

packages/ui/src/react/button.tsx

@@ -4,6 +4,7 @@ import type { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { Children, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { Loader2Icon } from 'lucide-react';
 import { buttonVariants } from '@/cva/button';
 
 /* -----------------------------------------------------------------------------
@@ -55,14 +56,45 @@ export const Button = forwardRef<
         type="button"
         {...props}
       >
-        {startIcon}
+        <IconButton loading={loading}>{startIcon}</IconButton>
 
         {children}
 
-        {endIcon}
+        <IconButton loading={loading ? !startIcon : false}>
+          {endIcon}
+        </IconButton>
+
+        {loading && !(startIcon || endIcon) ? (
+          <span className="absolute inset-0 flex items-center justify-center bg-inherit">
+            <Loader2Icon className="h-4.5 w-4.5 animate-spin" />
+          </span>
+        ) : null}
       </button>
     );
   },
 );
 
 Button.displayName = 'Button';
+
+/* -----------------------------------------------------------------------------
+ * Component: IconButton
+ * -------------------------------------------------------------------------- */
+
+export function IconButton({
+  children,
+
+  loading,
+}: {
+  children: React.ReactNode;
+  loading?: boolean;
+}): React.JSX.Element {
+  return (
+    <>
+      {loading && children ? (
+        <Loader2Icon className="h-4 w-4 animate-spin" />
+      ) : (
+        children
+      )}
+    </>
+  );
+}