Merge pull request #1474 from PrefectHQ/bugfix/pbutton-small-sizing-2…

…024-10-17 Bugfix: PButton sizing issues
PrefectHQ · Oct 17, 2024 · d912bed · d912bed
2 parents ca8bbec + 49720ce
commit d912bed
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/components/Button/PButton.vue b/src/components/Button/PButton.vue
@@ -9,11 +9,11 @@
   >
     <div class="p-button__content">
       <template v-if="icon">
-        <PIcon :size="iconSize" :icon :solid class="p-button__icon" />
+        <PIcon :size="iconSize ?? size" :icon :solid class="p-button__icon" />
       </template>
       <slot />
       <template v-if="iconAppend">
-        <PIcon :size="iconSize" :icon="iconAppend" :solid="solidAppend ?? solid" class="p-button__icon" />
+        <PIcon :size="iconSize ?? size" :icon="iconAppend" :solid="solidAppend ?? solid" class="p-button__icon" />
       </template>
     </div>
     <template v-if="loading">
@@ -56,7 +56,7 @@
         {
           size: 'sm',
           icon: true,
-          class: 'max-h-7 max-w-7',
+          class: 'max-h-[30px] max-w-[30px]',
         },
       ],
       defaultVariants: {
@@ -234,6 +234,11 @@
   font-normal
 }
 
+.p-button__icon { @apply
+  shrink-0
+  grow
+}
+
 .p-button__loading-icon {
   position: absolute;
   left: 50%;

diff --git a/src/components/Icon/PIcon.vue b/src/components/Icon/PIcon.vue
@@ -13,7 +13,7 @@
   const props = defineProps<{
     icon: Icon,
     solid?: boolean,
-    size?: 'small' | 'default' | 'large',
+    size?: 'small' | 'default' | 'large' | 'sm' | 'lg',
   }>()
 
   const component = computed(() => {
@@ -46,11 +46,13 @@
   h-5
 }
 
+.p-icon--sm,
 .p-icon--small { @apply
   w-4
   h-4
 }
 
+.p-icon--lg,
 .p-icon--large { @apply
   w-6
   h-6

diff --git a/src/components/Select/PSelectButton.vue b/src/components/Select/PSelectButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <PBaseInput ref="wrapperElement" class="p-select-button" :small="props.small">
+  <PBaseInput ref="wrapperElement" class="p-select-button" :small>
     <template v-for="(index, name) in $slots" #[name]="data">
       <slot :name="name" v-bind="data" />
     </template>
@@ -8,7 +8,6 @@
         ref="buttonElement"
         type="button"
         class="p-select-button__control"
-        aria-hidden="true"
         v-bind="attrs"
       >
         <span class="p-select-button__value" :class="classes.value">