fix: Add dropdown size control to Select components and improve UI (#5290)

* feature: size adjust

* feature: design adjust

* fix: popover width, height added

* fix: li style override

* refactor: improve component readability and
  maintainability per PR feedback

  - Replace CardGridList component with
  createGridStyle utility function
  - Add runtime validation for grid column values
  - Remove !important usage in MultiSelect, use cn()
  function instead
  - Extract popover sizing logic into
  usePopoverSizing composable
  - Improve class string readability by splitting
  into logical groups
  - Use Tailwind size utilities (size-8, size-10)
  instead of separate width/height
  - Remove magic numbers in SearchBox, align with
  button sizes
  - Rename BaseWidgetLayout to BaseModalLayout for
  clarity
  - Enhance SearchBox click area to cover entire
  component
  - Refactor long class strings using cn() utility
  across components

* fix: BaseWidgetLayout => BaseModalLayout

* fix: CardGrid deleted

* fix: unused exported types

* Update test expectations [skip ci]

* chore: code review

* Update test expectations [skip ci]

* chore: restore screenshot

---------

Co-authored-by: github-actions <[email protected]>

Author: viva-jinyi

.storybook/preview-head.html

@@ -57,9 +57,8 @@
 
   /* Override Storybook's problematic & selector styles */
   /* Reset only the specific properties that Storybook injects */
-  #storybook-root li+li,
-  #storybook-docs li+li {
-    margin: inherit;
-    padding: inherit;
+  li+li {
+    margin: 0;
+    padding: revert-layer;
   }
 </style>

src/components/button/IconButton.vue

@@ -21,6 +21,7 @@ import {
   getButtonTypeClasses,
   getIconButtonSizeClasses
 } from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 interface IconButtonProps extends BaseButtonProps {
   onClick: (event: Event) => void
@@ -46,8 +47,6 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return [baseClasses, sizeClasses, typeClasses, className]
-    .filter(Boolean)
-    .join(' ')
+  return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>

src/components/button/IconGroup.vue

@@ -1,7 +1,17 @@
 <template>
-  <div
-    class="flex justify-center items-center shrink-0 outline-hidden border-none p-0 bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white rounded-lg cursor-pointer"
-  >
+  <div :class="iconGroupClasses">
     <slot></slot>
   </div>
 </template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+const iconGroupClasses = cn(
+  'flex justify-center items-center shrink-0',
+  'outline-hidden border-none p-0 rounded-lg',
+  'bg-white dark-theme:bg-zinc-700',
+  'text-neutral-950 dark-theme:text-white',
+  'cursor-pointer'
+)
+</script>

src/components/button/IconTextButton.vue

@@ -23,6 +23,7 @@ import {
   getButtonSizeClasses,
   getButtonTypeClasses
 } from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 defineOptions({
   inheritAttrs: false
@@ -52,8 +53,6 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return [baseClasses, sizeClasses, typeClasses, className]
-    .filter(Boolean)
-    .join(' ')
+  return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>

src/components/button/MoreButton.vue

@@ -14,7 +14,7 @@
       unstyled
       :pt="pt"
     >
-      <div class="flex flex-col gap-1 p-2 min-w-40">
+      <div class="flex flex-col gap-2 p-2 min-w-40">
         <slot :close="hide" />
       </div>
     </Popover>
@@ -25,6 +25,8 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 import IconButton from './IconButton.vue'
 
 const popover = ref<InstanceType<typeof Popover>>()
@@ -39,13 +41,16 @@ const hide = () => {
 
 const pt = computed(() => ({
   root: {
-    class: 'absolute z-50'
+    class: cn('absolute z-50')
   },
   content: {
-    class: [
-      'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ]
+    class: cn(
+      'mt-2 rounded-lg',
+      'bg-white dark-theme:bg-zinc-800',
+      'text-neutral dark-theme:text-white',
+      'shadow-lg',
+      'border border-zinc-200 dark-theme:border-zinc-700'
+    )
   }
 }))
 </script>

src/components/button/TextButton.vue

@@ -21,6 +21,7 @@ import {
   getButtonSizeClasses,
   getButtonTypeClasses
 } from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 interface TextButtonProps extends BaseButtonProps {
   label: string
@@ -48,8 +49,6 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return [baseClasses, sizeClasses, typeClasses, className]
-    .filter(Boolean)
-    .join(' ')
+  return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>