feat: Update button component (#10362)

app/javascript/dashboard/components-next/button/Button.story.vue

@@ -1,125 +1,123 @@
 <script setup>
 import Button from './Button.vue';
+
+// Constants for documentation
+const VARIANTS = ['solid', 'outline', 'faded', 'link', 'ghost'];
+const COLORS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
+const SIZES = ['default', 'sm', 'lg'];
 </script>
 
 <template>
-  <Story title="Components/Button" :layout="{ type: 'grid', width: '400' }">
-    <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Default Button" />
+  <Story title="Components/Button" :layout="{ type: 'grid', width: '800px' }">
+    <!-- Basic Variants -->
+    <Variant title="Basic Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="variant in VARIANTS"
+          :key="variant"
+          :label="variant"
+          :variant="variant"
+        />
       </div>
     </Variant>
 
-    <Variant title="Disabled">
+    <!-- Colors -->
+    <Variant title="Color Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="color in COLORS"
+          :key="color"
+          :label="color"
+          :color="color"
+        />
+      </div>
+    </Variant>
+
+    <!-- Sizes -->
+    <Variant title="Size Variants">
+      <div
+        class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
+      >
+        <Button v-for="size in SIZES" :key="size" :label="size" :size="size" />
+      </div>
+    </Variant>
+
+    <!-- Icons -->
+    <Variant title="Icons">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Leading Icon" icon="i-lucide-plus" />
+        <Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
+        <Button icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Loading State -->
+    <Variant title="Loading State">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Loading" is-loading />
+        <Button label="Loading" variant="outline" is-loading />
+        <Button is-loading icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Disabled State -->
+    <Variant title="Disabled State">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Disabled" disabled />
-        <Button label="Disabled" variant="outline" disabled />
-        <Button label="Disabled" disabled icon="delete" variant="outline" />
+        <Button label="Disabled Outline" variant="outline" disabled />
+        <Button label="Disabled Icon" icon="delete" disabled />
         <Button
-          label="Disabled"
+          label="Disabled Destructive"
+          color="ruby"
           disabled
           icon="delete"
-          variant="destructive"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="ghost"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="link"
           size="sm"
         />
       </div>
     </Variant>
 
-    <Variant title="Disabled with icon">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Disabled Button" icon="emoji-add" disabled />
+    <!-- Color Combinations -->
+    <Variant title="Color & Variant Combinations">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <template v-for="color in COLORS" :key="color">
+          <Button
+            v-for="variant in VARIANTS"
+            :key="`${color}-${variant}`"
+            :label="`${color} ${variant}`"
+            :color="color"
+            :variant="variant"
+          />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant">
+    <!-- Icon Positions -->
+    <Variant title="Icon Positions & Sizes">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" variant="default" />
-        <Button label="Destructive" variant="destructive" />
-        <Button label="Outline" variant="outline" />
-        <Button label="Secondary" variant="secondary" />
-        <Button label="Ghost" variant="ghost" />
-        <Button label="Link" variant="link" />
+        <template v-for="size in SIZES" :key="size">
+          <Button
+            :label="`${size} Leading`"
+            icon="i-lucide-plus"
+            :size="size"
+          />
+          <Button
+            :label="`${size} Trailing`"
+            icon="i-lucide-plus"
+            trailing-icon
+            :size="size"
+          />
+          <Button icon="i-lucide-plus" :size="size" />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant with icon only">
+    <!-- Ghost & Link Variants -->
+    <Variant title="Ghost & Link Variants">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button icon="emoji-add" variant="default" />
-        <Button icon="emoji-add" variant="destructive" />
-        <Button icon="emoji-add" variant="outline" />
-        <Button icon="emoji-add" variant="secondary" />
-        <Button icon="emoji-add" variant="ghost" />
-        <Button icon="emoji-add" variant="link" />
-      </div>
-    </Variant>
-
-    <Variant title="Different size">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" />
-        <Button label="Large" size="lg" />
-        <Button label="Small" size="sm" />
-      </div>
-    </Variant>
-
-    <Variant title="Different text variant">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" text-variant="default" variant="outline" />
-        <Button label="Success" text-variant="success" variant="outline" />
-        <Button label="Warning" text-variant="warning" variant="outline" />
-        <Button label="Danger" text-variant="danger" variant="outline" />
-        <Button label="Info" text-variant="info" variant="outline" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with left icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="left" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="left"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="left"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="sm" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with right icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="right" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="right"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="right"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="sm" />
+        <Button label="Ghost Button" variant="ghost" />
+        <Button label="Ghost with Icon" variant="ghost" icon="i-lucide-plus" />
+        <Button label="Link Button" variant="link" />
+        <Button label="Link with Icon" variant="link" icon="i-lucide-plus" />
       </div>
     </Variant>
   </Story>

app/javascript/dashboard/components-next/button/Button.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   label: {
@@ -11,49 +11,28 @@ const props = defineProps({
   },
   variant: {
     type: String,
-    default: 'default',
+    default: 'solid',
     validator: value =>
-      [
-        'default',
-        'destructive',
-        'outline',
-        'secondary',
-        'ghost',
-        'link',
-      ].includes(value),
+      ['solid', 'outline', 'faded', 'link', 'ghost'].includes(value),
   },
-  textVariant: {
+  color: {
     type: String,
-    default: '',
+    default: 'blue',
     validator: value =>
-      ['', 'default', 'success', 'warning', 'danger', 'info'].includes(value),
+      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
   },
   size: {
     type: String,
-    default: 'default',
-    validator: value => ['default', 'sm', 'lg'].includes(value),
-  },
-  type: {
-    type: String,
-    default: 'button',
-    validator: value => ['button', 'submit', 'reset'].includes(value),
+    default: 'md',
+    validator: value => ['xs', 'sm', 'md', 'lg'].includes(value),
   },
   icon: {
     type: String,
     default: '',
   },
-  emoji: {
-    type: String,
-    default: '',
-  },
-  iconPosition: {
-    type: String,
-    default: 'left',
-    validator: value => ['left', 'right'].includes(value),
-  },
-  iconLib: {
-    type: String,
-    default: 'fluent',
+  trailingIcon: {
+    type: Boolean,
+    default: false,
   },
   isLoading: {
     type: Boolean,
@@ -61,92 +40,128 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['click']);
+const slots = useSlots();
 
-const buttonVariants = {
-  variant: {
-    default:
-      'bg-n-brand text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
-    destructive: 'bg-n-ruby-9 text-white dark:text-white hover:bg-n-ruby-10',
-    outline:
-      'border border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6',
-    secondary: 'bg-n-solid-3 text-n-slate-12 hover:bg-n-solid-2',
-    ghost: 'text-n-slate-12',
-    link: 'text-n-brand underline-offset-4 hover:underline dark:hover:underline',
+const STYLE_CONFIG = {
+  colors: {
+    blue: {
+      solid: 'bg-n-brand text-white hover:bg-n-blue-text outline-transparent',
+      faded:
+        'bg-n-brand/10 text-n-slate-12 hover:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-text hover:bg-n-brand/10 outline-n-blue-border',
+      link: 'text-n-brand hover:underline outline-transparent',
+    },
+    ruby: {
+      solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
+      faded:
+        'bg-n-ruby-9/10 text-n-slate-12 hover:bg-n-ruby-9/20 outline-transparent',
+      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-9',
+      link: 'text-n-ruby-9 hover:underline outline-transparent',
+    },
+    amber: {
+      solid: 'bg-n-amber-9 text-white hover:bg-n-amber-10 outline-transparent',
+      faded:
+        'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
+      outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
+      link: 'text-n-amber-9 hover:underline outline-transparent',
+    },
+    slate: {
+      solid:
+        'bg-n-solid-3 hover:bg-n-solid-2 text-n-slate-12 outline-n-container',
+      faded:
+        'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
+      outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
+      link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+    },
+    teal: {
+      solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
+      faded:
+        'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
+      outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
+      link: 'text-n-teal-9 hover:underline outline-transparent',
+    },
   },
-  size: {
-    default: 'h-10 px-4 py-2',
-    sm: 'h-8 px-3 py-1',
-    lg: 'h-12 px-5 py-3',
+  sizes: {
+    regular: {
+      xs: 'h-6 px-2',
+      sm: 'h-8 px-3',
+      md: 'h-10 px-4',
+      lg: 'h-12 px-5',
+    },
+    iconOnly: {
+      xs: 'h-6 w-6 p-0',
+      sm: 'h-8 w-8 p-0',
+      md: 'h-10 w-10 p-0',
+      lg: 'h-12 w-12 p-0',
+    },
+    link: {
+      xs: 'p-0',
+      sm: 'p-0',
+      md: 'p-0',
+      lg: 'p-0',
+    },
   },
-  text: {
-    default:
-      '!text-n-brand dark:!text-n-brand hover:!text-woot-600 dark:hover:!text-woot-600',
-    success:
-      '!text-green-500 dark:!text-green-500 hover:!text-green-600 dark:hover:!text-green-600',
-    warning:
-      '!text-amber-600 dark:!text-amber-600 hover:!text-amber-600 dark:hover:!text-amber-600',
-    danger: '!text-n-ruby-11 hover:!text-n-ruby-10',
-    info: '!text-n-slate-12 hover:!text-n-slate-11',
+  fontSize: {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm font-medium',
+    lg: 'text-base',
   },
+  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
-const buttonClasses = computed(() => {
-  const classes = [
-    buttonVariants.variant[props.variant],
-    buttonVariants.size[props.size],
-  ];
+const variantClasses = computed(() => {
+  const variantMap = {
+    ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
+    link: `${STYLE_CONFIG.colors[props.color].link} p-0 font-medium underline-offset-4`,
+    outline: STYLE_CONFIG.colors[props.color].outline,
+    faded: STYLE_CONFIG.colors[props.color].faded,
+    solid: STYLE_CONFIG.colors[props.color].solid,
+  };
 
-  if (props.textVariant && buttonVariants.text[props.textVariant]) {
-    classes.push(buttonVariants.text[props.textVariant]);
-  }
+  return variantMap[props.variant];
+});
+
+const isIconOnly = computed(() => !props.label && !slots.default);
+const isLink = computed(() => props.variant === 'link');
+
+const buttonClasses = computed(() => {
+  const sizeConfig = isIconOnly.value ? 'iconOnly' : 'regular';
+  const classes = [
+    variantClasses.value,
+    props.variant !== 'link' && STYLE_CONFIG.sizes[sizeConfig][props.size],
+  ].filter(Boolean);
 
   return classes.join(' ');
 });
 
-const iconSize = computed(() => {
-  if (props.size === 'sm') return 16;
-  if (props.size === 'lg') return 20;
-  return 18;
-});
+const linkButtonClasses = computed(() => {
+  const classes = [
+    variantClasses.value,
+    STYLE_CONFIG.sizes.link[props.size],
+  ].filter(Boolean);
 
-const handleClick = e => {
-  emit('click', e);
-};
+  return classes.join(' ');
+});
 </script>
 
 <template>
   <button
-    :class="buttonClasses"
-    :type="type"
-    class="inline-flex items-center justify-center min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
-    @click="handleClick"
+    :class="{
+      [STYLE_CONFIG.base]: true,
+      [isLink ? linkButtonClasses : buttonClasses]: true,
+      [STYLE_CONFIG.fontSize[size]]: true,
+      'flex-row-reverse': trailingIcon && !isIconOnly,
+    }"
   >
-    <FluentIcon
-      v-if="icon && iconPosition === 'left' && !isLoading"
-      :icon="icon"
-      :size="iconSize"
-      :icon-lib="iconLib"
-      class="flex-shrink-0"
-      :class="{
-        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
-      }"
-    />
+    <slot v-if="(icon || $slots.icon) && !isLoading" name="icon">
+      <Icon :icon="icon" class="flex-shrink-0" />
+    </slot>
+
     <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
-    <slot name="leftPrefix" />
-    <span v-if="emoji">{{ emoji }}</span>
-    <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
-    <slot />
-    <slot name="rightPrefix" />
-    <FluentIcon
-      v-if="icon && iconPosition === 'right'"
-      :icon="icon"
-      :size="iconSize"
-      :icon-lib="iconLib"
-      class="flex-shrink-0"
-      :class="{
-        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
-      }"
-    />
+
+    <slot v-if="label || $slots.default" name="default">
+      <span class="min-w-0 truncate">{{ label }}</span>
+    </slot>
   </button>
 </template>