feat(ui): auto-detect icon-only buttons for consistent spacing

Detect icon-only buttons with useSlot

Author: NeeshSamsi

app/components/Button/Base.vue

@@ -18,6 +18,8 @@ const props = withDefaults(
 )
 
 const el = useTemplateRef('el')
+const slots = useSlots()
+const iconOnly = computed(() => !!props.classicon && !slots.default)
 
 defineExpose({
   focus: () => el.value?.focus(),
@@ -32,12 +34,14 @@ defineExpose({
     :class="{
       'inline-flex': !block,
       'flex': block,
-      'text-sm py-2': size === 'medium',
-      'px-4': size === 'medium' && !classicon,
-      'ps-3 pe-4': size === 'medium' && !!classicon,
-      'text-xs py-0.5': size === 'small',
-      'px-2': size === 'small' && !classicon,
-      'ps-1.5 pe-2': size === 'small' && !!classicon,
+      'text-sm py-2': size === 'medium' && !iconOnly,
+      'text-sm p-2': size === 'medium' && !!iconOnly,
+      'px-4': size === 'medium' && !classicon && !iconOnly,
+      'ps-3 pe-4': size === 'medium' && !!classicon && !iconOnly,
+      'text-xs py-0.5': size === 'small' && !iconOnly,
+      'text-xs p-0.5': size === 'small' && !!iconOnly,
+      'px-2': size === 'small' && !classicon && !iconOnly,
+      'ps-1.5 pe-2': size === 'small' && !!classicon && !iconOnly,
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':

app/components/Link/Base.vue

@@ -55,6 +55,8 @@ const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const slots = useSlots()
+const iconOnly = computed(() => !!props.classicon && !slots.default)
 </script>
 
 <template>
@@ -65,12 +67,14 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
       'inline-flex': !block,
       'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
-      'text-sm py-2': isButtonMedium,
-      'px-4': isButtonMedium && !classicon,
-      'ps-3 pe-4': isButtonMedium && !!classicon,
-      'text-xs py-0.5': isButtonSmall,
-      'px-2': isButtonSmall && !classicon,
-      'ps-1.5 pe-2': isButtonSmall && !!classicon,
+      'text-sm py-2': isButtonMedium && !iconOnly,
+      'text-sm p-2': isButtonMedium && !!iconOnly,
+      'px-4': isButtonMedium && !classicon && !iconOnly,
+      'ps-3 pe-4': isButtonMedium && !!classicon && !iconOnly,
+      'text-xs py-0.5': isButtonSmall && !iconOnly,
+      'text-xs p-0.5': isButtonSmall && !!iconOnly,
+      'px-2': isButtonSmall && !classicon && !iconOnly,
+      'ps-1.5 pe-2': isButtonSmall && !!classicon && !iconOnly,
       'text-bg bg-fg': variant === 'button-primary',
       'bg-transparent text-fg': variant === 'button-secondary',
     }"
@@ -89,12 +93,14 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
         isLink,
       'justify-center font-mono border border-border rounded-md transition-all duration-200':
         isButton,
-      'text-sm py-2': isButtonMedium,
-      'px-4': isButtonMedium && !classicon,
-      'ps-3 pe-4': isButtonMedium && !!classicon,
-      'text-xs py-0.5': isButtonSmall,
-      'px-2': isButtonSmall && !classicon,
-      'ps-1.5 pe-2': isButtonSmall && !!classicon,
+      'text-sm py-2': isButtonMedium && !iconOnly,
+      'text-sm p-2': isButtonMedium && iconOnly,
+      'px-4': isButtonMedium && !classicon && !iconOnly,
+      'ps-3 pe-4': isButtonMedium && !!classicon && !iconOnly,
+      'text-xs py-0.5': isButtonSmall && !iconOnly,
+      'text-xs p-0.5': isButtonSmall && iconOnly,
+      'px-2': isButtonSmall && !classicon && !iconOnly,
+      'ps-1.5 pe-2': isButtonSmall && !!classicon && !iconOnly,
       'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'button-secondary',
       'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':