fix(button): Patch for IE 11 helpkit-ember buttons (#134)

* Urgent changes to button css

* urgent patch

* refactoring

* Following BEM conventions

* SCSS conventions

* new ref image

* refactoring ii

packages/button/addon/components/nucleus-button.js

@@ -80,7 +80,7 @@ class NucleusButton extends Component {
   @computed('iconSize', 'size')
   get _iconSize() {
     let iconSize = this.get('iconSize');
-    let defaultSize = this.get('size') ? this.get('size') : 'small';
+    let defaultSize = this.get('size') ? this.get('size') : 'medium';
     return iconSize ? iconSize : defaultSize;
   }
 

packages/button/addon/styles/components/_nucleus-button.scss

@@ -24,7 +24,7 @@ $active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
 
 .nucleus-button {
   font-size: $font-size-14;
-  line-height: 1;
+  line-height: 1.2;
   padding: 6px 12px;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -37,6 +37,13 @@ $active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
   height: 32px;
   min-width: 80px;
 
+  &__icon {
+    &.nucleus--active {
+      position: relative;
+      top: .125em;
+    }
+  }
+
   &:focus {
     border: 1px solid $color-azure-800;
     box-shadow: 0 0 0 1px $color-azure-800;
@@ -135,6 +142,7 @@ $active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
     padding: 2px 2px;
     font-size: $font-size-10;
     min-width: 16px;
+    line-height: 1;
     height: 16px;
   }
 

packages/button/addon/templates/components/nucleus-button.hbs

@@ -1,4 +1,8 @@
-{{#if icon}}{{nucleus-icon name=icon size=_iconSize variant=_iconVariant}}{{/if}}
+{{#if icon}}
+  <span class="nucleus-button__icon {{unless iconOnly "nucleus--active"}}">
+    {{nucleus-icon name=icon size=_iconSize}}
+  </span>
+{{/if}}
 {{#if (and _isLoading _isShowLoading)}}
   <div data-test-button-loader class="circle-loader {{if _isLoadingComplete "load-complete"}}">
     <div class="checkmark draw"></div>