[feat] Add icon-lg button variant and update BaseModalLayout

src/components/button/MoreButton.vue

@@ -1,18 +1,12 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button
-      size="icon"
-      variant="secondary"
-      v-bind="$attrs"
-      @click="popover?.toggle"
-    >
+    <Button :size variant="secondary" v-bind="$attrs" @click="popover?.toggle">
       <i
         :class="
           cn(
             !isVertical
               ? 'icon-[lucide--ellipsis]'
-              : 'icon-[lucide--more-vertical]',
-            'text-sm'
+              : 'icon-[lucide--more-vertical]'
           )
         "
       />
@@ -63,6 +57,7 @@ import Popover from 'primevue/popover'
 import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import type { ButtonVariants } from '@/components/ui/button/button.variants'
 import { cn } from '@/utils/tailwindUtil'
 
 defineOptions({
@@ -71,9 +66,10 @@ defineOptions({
 
 interface MoreButtonProps {
   isVertical?: boolean
+  size?: ButtonVariants['size']
 }
 
-const { isVertical = false } = defineProps<MoreButtonProps>()
+const { isVertical = false, size = 'icon' } = defineProps<MoreButtonProps>()
 
 defineEmits<{
   menuOpened: []

src/components/common/SearchBox.vue

@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
+        'relative flex w-full items-center gap-2 bg-secondary-background cursor-text',
         customClass,
         wrapperStyle
       )
@@ -27,15 +27,11 @@
       <i :class="filterIcon" />
     </Button>
     <InputIcon v-if="!modelValue" :class="icon" />
-    <Button
-      v-if="modelValue"
-      class="clear-button absolute left-0"
-      variant="textonly"
-      size="icon"
+    <InputIcon
+      v-else
+      class="icon-[lucide--x] cursor-pointer"
       @click="modelValue = ''"
-    >
-      <i class="icon-[lucide--x] size-4" />
-    </Button>
+    />
   </div>
   <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
     <SearchFilterChip
@@ -63,7 +59,7 @@ import SearchFilterChip from './SearchFilterChip.vue'
 
 const {
   placeholder = 'Search...',
-  icon = 'pi pi-search',
+  icon = 'icon-[lucide--search]',
   debounceTime = 300,
   filterIcon,
   filters = [],

src/components/sidebar/SidebarIcon.vue

@@ -11,6 +11,7 @@
         selected && 'side-bar-button-selected'
       )
     "
+    size="icon-lg"
     variant="muted-textonly"
     :aria-label="computedTooltip"
     @click="emit('click', $event)"

src/components/ui/button/button.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_i,&_svg]:pointer-events-none [&_i,&_svg]:size-4 [&_i,&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:
@@ -26,7 +26,8 @@ export const buttonVariants = cva({
       md: 'h-8 rounded-lg p-2 text-xs',
       lg: 'h-10 rounded-lg px-4 py-2 text-sm',
       icon: 'size-8',
-      'icon-sm': 'size-5 p-0'
+      'icon-sm': 'size-5 p-0',
+      'icon-lg': 'size-10 [&_i,&_svg]:size-5'
     }
   },
 
@@ -48,8 +49,13 @@ const variants = [
   'destructive-textonly',
   'overlay-white'
 ] as const satisfies Array<ButtonVariants['variant']>
-const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
-  ButtonVariants['size']
->
+const sizes = [
+  'sm',
+  'md',
+  'lg',
+  'icon',
+  'icon-sm',
+  'icon-lg'
+] as const satisfies Array<ButtonVariants['size']>
 
 export const FOR_STORIES = { variants, sizes } as const

src/components/widget/layout/BaseModalLayout.stories.ts

@@ -179,10 +179,10 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasLeftPanel" #leftPanel>
           <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
             <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+              <i class="icon-[lucide--puzzle]" />
             </template>
             <template #header-title>
-              <span class="text-neutral text-base">Title</span>
+              <span>Title</span>
             </template>
           </LeftSidePanel>
         </template>
@@ -200,30 +200,32 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <!-- Header Right Area -->
         <template v-if="args.hasHeaderRightArea" #header-right-area>
           <div class="flex gap-2">
-            <Button variant="primary" @click="() => {}">
-                <i class="icon-[lucide--upload] size-3" />
-              <span> Upload Model </span>
+            <Button variant="primary" size="lg" @click="() => {}">
+              <i class="icon-[lucide--upload]" />
+              <span>Upload Model</span>
             </Button>
 
-            <MoreButton>
+            <MoreButton size="icon-lg">
               <template #default="{ close }">
                 <Button
                   variant="secondary"
+                  size="lg"
                   label="Settings"
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <i class="icon-[lucide--download] size-3" />
+                    <i class="icon-[lucide--download]" />
                   </template>
                 </Button>
 
                 <Button
                   variant="primary"
+                  size="lg"
                   label="Profile"
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <i class="icon-[lucide--scroll] size-3" />
+                    <i class="icon-[lucide--scroll]" />
                   </template>
                 </Button>
               </template>
@@ -254,7 +256,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
               class="w-[135px]"
             >
               <template #icon>
-                <i class="icon-[lucide--filter] size-3" />
+                <i class="icon-[lucide--filter]" />
               </template>
             </SingleSelect>
           </div>
@@ -274,16 +276,16 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     <div class="w-full h-full bg-blue-500"></div>
                   </template>
                   <template #top-right>
-                    <Button size="icon" class="!bg-white !text-neutral-900" @click="() => {}">
-                      <i class="icon-[lucide--info] size-4" />
+                    <Button size="icon-lg" @click="() => {}">
+                      <i class="icon-[lucide--info]" />
                     </Button>
                   </template>
                   <template #bottom-right>
                     <SquareChip label="png" />
                     <SquareChip label="1.2 MB" />
                     <SquareChip label="LoRA">
                       <template #icon>
-                        <i class="icon-[lucide--folder] size-3" />
+                        <i class="icon-[lucide--folder]" />
                       </template>
                     </SquareChip>
                   </template>
@@ -303,10 +305,10 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasLeftPanel" #leftPanel>
           <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
             <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+              <i class="icon-[lucide--puzzle]" />
             </template>
             <template #header-title>
-              <span class="text-neutral text-base">Title</span>
+              <span>Title</span>
             </template>
           </LeftSidePanel>
         </template>
@@ -324,26 +326,28 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <!-- Header Right Area -->
         <template v-if="args.hasHeaderRightArea" #header-right-area>
           <div class="flex gap-2">
-            <Button variant="primary" @click="() => {}">
-                <i class="icon-[lucide--upload] size-3" />
+            <Button variant="primary" size="lg" @click="() => {}">
+                <i class="icon-[lucide--upload]" />
                 <span>Upload Model</span>
             </Button>
 
-            <MoreButton>
+            <MoreButton size="icon-lg">
               <template #default="{ close }">
                 <Button
                   variant="secondary"
+                  size="lg"
                   @click="() => { close() }"
                 >
-                    <i class="icon-[lucide--download] size-3" />
+                    <i class="icon-[lucide--download]" />
                     <span>Settings</span>
                 </Button>
 
                 <Button
                   variant="primary"
+                  size="lg"
                   @click="() => { close() }"
                 >
-                    <i class="icon-[lucide--scroll] size-3" />
+                    <i class="icon-[lucide--scroll]" />
                     <span>Profile</span>
                 </Button>
               </template>
@@ -371,7 +375,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
               class="w-[135px]"
             >
               <template #icon>
-                <i class="icon-[lucide--filter] size-3" />
+                <i class="icon-[lucide--filter]" />
               </template>
             </SingleSelect>
           </div>
@@ -391,16 +395,16 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     <div class="w-full h-full bg-blue-500"></div>
                   </template>
                   <template #top-right>
-                    <Button size="icon" class="!bg-white !text-neutral-900" @click="() => {}">
-                      <i class="icon-[lucide--info] size-4" />
+                    <Button size="icon-lg" @click="() => {}">
+                      <i class="icon-[lucide--info]" />
                     </Button>
                   </template>
                   <template #bottom-right>
                     <SquareChip label="png" />
                     <SquareChip label="1.2 MB" />
                     <SquareChip label="LoRA">
                       <template #icon>
-                        <i class="icon-[lucide--folder] size-3" />
+                        <i class="icon-[lucide--folder]" />
                       </template>
                     </SquareChip>
                   </template>

src/components/widget/layout/BaseModalLayout.vue

@@ -2,7 +2,7 @@
   <div class="base-widget-layout rounded-2xl overflow-hidden relative">
     <Button
       v-show="!isRightPanelOpen && hasRightPanel"
-      size="lg"
+      size="icon-lg"
       :class="
         cn('absolute top-4 right-18 z-10', 'transition-opacity duration-200', {
           'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
@@ -13,11 +13,11 @@
       <i class="icon-[lucide--panel-right]" />
     </Button>
     <Button
-      size="lg"
-      class="absolute top-4 right-6 z-10 transition-opacity duration-200 w-10"
+      size="icon-lg"
+      class="absolute top-4 right-6 z-10 transition-opacity duration-200"
       @click="closeDialog"
     >
-      <i class="pi pi-times" />
+      <i class="icon-[lucide--x]" />
     </Button>
     <div class="flex h-full w-full">
       <Transition name="slide-panel">
@@ -40,7 +40,7 @@
             class="w-full h-18 px-6 flex items-center justify-between gap-2"
           >
             <div class="flex flex-1 shrink-0 gap-2">
-              <Button v-if="!notMobile" size="icon" @click="toggleLeftPanel">
+              <Button v-if="!notMobile" size="icon-lg" @click="toggleLeftPanel">
                 <i
                   :class="
                     cn(
@@ -64,7 +64,7 @@
             >
               <Button
                 v-if="isRightPanelOpen && hasRightPanel"
-                size="lg"
+                size="icon-lg"
                 @click="toggleRightPanel"
               >
                 <i class="icon-[lucide--panel-right-close]" />