refactor(vue-button): add icons as props

vuesion · Jul 14, 2021 · dc6dc05 · dc6dc05
1 parent dbb8af7
commit dc6dc05
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 23 deletions.
diff --git a/src/assets/design-system/variables/components/data-display/_menu.scss b/src/assets/design-system/variables/components/data-display/_menu.scss
@@ -1,5 +1,5 @@
 $menu-z-index: 1000;
-$menu-bg: palette-color-level('neutral', 0);
+$menu-bg: palette-color-level('neutral', 0); // TODO: add as theme variable
 $menu-min-width: $space-120 + $space-72;
 $menu-padding: $space-8 0;
 $menu-shadow: var(--brand-elevation-3);

diff --git a/src/assets/design-system/variables/components/input-and-actions/_button.scss b/src/assets/design-system/variables/components/input-and-actions/_button.scss
@@ -1,20 +1,24 @@
 // small
 $button-sm-padding: $space-4 $space-12;
 $button-sm-height: $space-24 + $space-4;
+$button-sm-has-icon-space: $space-8;
 
 // medium
 $button-md-padding: $space-8 $space-16;
 $button-md-height: $space-32 + $space-4;
+$button-md-has-icon-space: $space-12;
 
 // large
 $button-lg-padding: $space-12 $space-24;
 $button-lg-height: $space-40 + $space-4;
+$button-lg-has-icon-space: $space-16;
 
 // common
 $button-min-width: $space-32;
 $button-border-radius: $space-8;
 $button-disabled-opacity: 0.3;
-$button-icon-size: $space-20 + $space-2;
+$button-icon-size: $space-24;
+$button-icon-gap: $space-4;
 
 $button-variations: (
   'primary': (

diff --git a/src/assets/design-system/variables/components/input-and-actions/_dropdown.scss b/src/assets/design-system/variables/components/input-and-actions/_dropdown.scss
@@ -1,2 +1 @@
-$dropdown-button-icon-size: $space-24;
 $dropdown-button-menu-gap: $space-8;
diff --git a/src/components/input-and-actions/VueButton/VueButton.stories.ts b/src/components/input-and-actions/VueButton/VueButton.stories.ts
@@ -53,13 +53,11 @@ story.add(
       <vue-column v-for="size in sizes" :key="size" width="200px">
         <vue-inline stack-phone stack-tablet-portrait stack-tablet-landscape stack-small-desktop stack-large-desktop>
           <vue-button :look="style" :size="size">Button</vue-button>
-          <vue-button :look="style" :size="size">
-            <vue-icon-github />&nbsp;
+          <vue-button :look="style" :size="size" leading-icon="github">
             Button
           </vue-button>
-          <vue-button :look="style" :size="size">
-            Button&nbsp;
-            <vue-icon-github />
+          <vue-button :look="style" :size="size" trailing-icon="github">
+            Button
           </vue-button>
           <vue-button :look="style" :size="size" block>Button</vue-button>
           <vue-button :look="style" :size="size" :loading="loading">Button</vue-button>

diff --git a/src/components/input-and-actions/VueButton/VueButton.vue b/src/components/input-and-actions/VueButton/VueButton.vue
@@ -5,7 +5,15 @@
     :to="isRouterLink && href"
     :href="isRegularLink && href"
     :disabled="isDisabled"
-    :class="[$style.button, $style[look], $style[size], isDisabled && $style.disabled, block && $style.block]"
+    :class="[
+      $style.button,
+      $style[look],
+      $style[size],
+      isDisabled && $style.disabled,
+      block && $style.block,
+      leadingIcon && $style.hasLeadingIcon,
+      trailingIcon && $style.hasTrailingIcon,
+    ]"
     :style="{ width: actualWidth }"
     :event="!isDisabled && isRouterLink ? 'click' : null"
     :tabindex="isDisabled ? -1 : 0"
@@ -16,10 +24,15 @@
       click: onClick,
     }"
   >
+    <component :is="`vue-icon-${leadingIcon}`" v-if="leadingIcon" :class="$style.leadingIcon" />
+
     <vue-text v-if="loading === false" :class="$style.text" look="button" weight="semi-bold" as="span">
       <slot />
     </vue-text>
-    <vue-loader v-else :class="$style.loader" />
+
+    <component :is="`vue-icon-${trailingIcon}`" v-if="trailingIcon" :class="$style.trailingIcon" />
+
+    <vue-loader v-if="loading === true" :class="$style.loader" />
   </component>
 </template>
 
@@ -30,6 +43,8 @@ import { buttonSizeValidator, buttonStyleValidator } from '@/components/prop-val
 import VueText from '@/components/typography/VueText/VueText.vue';
 import VueLoader from '@/components/data-display/VueLoader/VueLoader.vue';
 
+// TODO: add different spacings for icons
+
 export default defineComponent({
   name: 'VueButton',
   components: {
@@ -45,6 +60,8 @@ export default defineComponent({
     as: { type: String, default: 'button' },
     type: { type: String, default: 'button' },
     href: { type: String, default: null },
+    leadingIcon: { type: String, default: null },
+    trailingIcon: { type: String, default: null },
   },
   setup(props, { emit }) {
     const buttonRef = getDomRef(null);
@@ -108,16 +125,40 @@ export default defineComponent({
   &.sm {
     padding: $button-sm-padding;
     height: $button-sm-height;
+
+    &.hasLeadingIcon {
+      padding-left: $button-sm-has-icon-space;
+    }
+
+    &.hasTrailingIcon {
+      padding-right: $button-sm-has-icon-space;
+    }
   }
 
   &.md {
     padding: $button-md-padding;
     height: $button-md-height;
+
+    &.hasLeadingIcon {
+      padding-left: $button-md-has-icon-space;
+    }
+
+    &.hasTrailingIcon {
+      padding-right: $button-md-has-icon-space;
+    }
   }
 
   &.lg {
     padding: $button-lg-padding;
     height: $button-lg-height;
+
+    &.hasLeadingIcon {
+      padding-left: $button-lg-has-icon-space;
+    }
+
+    &.hasTrailingIcon {
+      padding-right: $button-lg-has-icon-space;
+    }
   }
 
   // Styles
@@ -185,11 +226,22 @@ export default defineComponent({
     display: inline-flex;
     align-items: center;
     height: 100%;
+  }
 
-    i {
-      height: $button-icon-size;
-      width: $button-icon-size;
-    }
+  // icons
+
+  .leadingIcon,
+  .trailingIcon {
+    height: $button-icon-size;
+    width: $button-icon-size;
+  }
+
+  .leadingIcon {
+    margin-right: $button-icon-gap;
+  }
+
+  .trailingIcon {
+    margin-left: $button-icon-gap;
   }
 }
 </style>
diff --git a/src/components/input-and-actions/VueDropdown/VueDropdown.vue b/src/components/input-and-actions/VueDropdown/VueDropdown.vue
@@ -1,8 +1,12 @@
 <template>
   <div ref="dropdownRef" :class="$style.vueDropdown" @keydown="onKeyDown">
-    <vue-button look="outline" :aria-expanded="show.toString()" @click.stop.prevent="onClick">
+    <vue-button
+      look="outline"
+      :aria-expanded="show.toString()"
+      trailing-icon="chevron-down"
+      @click.stop.prevent="onClick"
+    >
       {{ buttonText }}
-      <vue-icon-chevron-down :class="$style.icon" />
     </vue-button>
 
     <vue-collapse :show="show" :duration="duration">
@@ -18,12 +22,11 @@ import { IItem } from '@/interfaces/IItem';
 import { useOutsideClick } from '@/composables/use-outside-click';
 import VueMenu from '@/components/data-display/VueMenu/VueMenu.vue';
 import VueButton from '@/components/input-and-actions/VueButton/VueButton.vue';
-import VueIconChevronDown from '@/components/icons/VueIconChevronDown/VueIconChevronDown.vue';
 import VueCollapse from '@/components/molecules/VueCollapse/VueCollapse.vue';
 
 export default defineComponent({
   name: 'VueDropdown',
-  components: { VueCollapse, VueIconChevronDown, VueButton, VueMenu },
+  components: { VueCollapse, VueButton, VueMenu },
   props: {
     buttonText: { type: String, required: true },
     items: { type: Array as new () => IItem[], required: true },
@@ -83,11 +86,6 @@ export default defineComponent({
   display: inline-flex;
   position: relative;
 
-  .icon {
-    width: $dropdown-button-icon-size;
-    height: $dropdown-button-icon-size;
-  }
-
   .menu {
     top: $button-md-height + $dropdown-button-menu-gap;
   }
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		$dropdown-button-icon-size: $space-24;
		$dropdown-button-menu-gap: $space-8;