fix(button): icon sizing (#1269)

dialpad · Oct 23, 2023 · ec0df97 · ec0df97
1 parent 038e8bc
commit ec0df97
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git a/components/button/button.mdx b/components/button/button.mdx
@@ -73,3 +73,27 @@ import { DtButton } from '@dialpad/dialtone-vue';
  Button
 </dt-button>
 ```
+
+### With icon
+
+#### Automatic icon resizing
+
+```html
+<dt-button>
+ Button
+  <template #icon="{ iconSize }">
+    <dt-icon :size="iconSize" name="user" />
+  </template>
+</dt-button>
+```
+
+#### Fixed icon size
+
+```html
+<dt-button>
+ Button
+  <template #icon>
+    <dt-icon size="300" name="user" />
+  </template>
+</dt-button>
+```
diff --git a/components/button/button.vue b/components/button/button.vue
@@ -26,6 +26,7 @@
       <!-- @slot Button icon -->
       <slot
         name="icon"
+        :icon-size="iconSize"
       />
     </span>
     <span
@@ -47,6 +48,7 @@ import {
   BUTTON_SIZE_MODIFIERS,
   BUTTON_KIND_MODIFIERS,
   BUTTON_IMPORTANCE_MODIFIERS,
+  BUTTON_ICON_SIZES,
   BUTTON_TYPES,
   ICON_POSITION_MODIFIERS,
   INVALID_COMBINATION,
@@ -266,6 +268,10 @@ export default {
     computedAriaLive () {
       return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;
     },
+
+    iconSize () {
+      return BUTTON_ICON_SIZES[this.size];
+    },
   },
 
   watch: {
@@ -327,7 +333,7 @@ export default {
     },
 
     isVerticalIconLayout () {
-      return this.shouldRenderIcon() && !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);
+      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);
     },
   },
 };

diff --git a/components/button/button_default.story.vue b/components/button/button_default.story.vue
@@ -24,7 +24,7 @@
     />
     <template
       v-if="$attrs.icon"
-      #icon
+      #icon="{ iconSize }"
     >
       <dt-icon
         :name="$attrs.icon"
@@ -37,15 +37,9 @@
 <script>
 import DtButton from './button.vue';
 import { DtIcon } from '@/components/icon';
-import { BUTTON_ICON_SIZES } from './button_constants';
 
 export default {
   name: 'ButtonDefault',
   components: { DtButton, DtIcon },
-  computed: {
-    iconSize () {
-      return BUTTON_ICON_SIZES[this.$attrs.size];
-    },
-  },
 };
 </script>
diff --git a/components/button/button_variants.story.vue b/components/button/button_variants.story.vue
@@ -84,63 +84,63 @@
         circle
         aria-label="Icon only"
       >
-        <template #icon>
+        <template #icon="{ iconSize }">
           <dt-icon
             name="download"
-            size="200"
+            :size="iconSize"
           />
         </template>
       </dt-button>
 
       <!-- Icon Only -->
       <dt-button aria-label="Icon only">
-        <template #icon>
+        <template #icon="{ iconSize }">
           <dt-icon
             name="download"
-            size="200"
+            :size="iconSize"
           />
         </template>
       </dt-button>
 
       <!-- Icon Left -->
       <dt-button>
-        <template #icon>
+        <template #icon="{ iconSize }">
           <dt-icon
             name="download"
-            size="200"
+            :size="iconSize"
           />
         </template>
         Icon Left
       </dt-button>
 
       <!-- Icon Right -->
       <dt-button icon-position="right">
-        <template #icon>
+        <template #icon="{ iconSize }">
           <dt-icon
             name="download"
-            size="200"
+            :size="iconSize"
           />
         </template>
         Icon Right
       </dt-button>
 
       <!-- Icon Top -->
       <dt-button icon-position="top">
-        <template #icon>
+        <template #icon="{ iconSize }">
           <dt-icon
             name="download"
-            size="200"
+            :size="iconSize"
           />
         </template>
         Icon Top
       </dt-button>
 
       <!-- Icon Bottom -->
       <dt-button icon-position="bottom">
-        <template #icon>
+        <template #icon="{ iconSize }">
           <dt-icon
             name="download"
-            size="200"
+            :size="iconSize"
           />
         </template>
         Icon Bottom