feat(Button): add icon-only variant (#2287)

* refactor(button): restructure template

* feat(button): add icon-only button

* docs(button): override demo styles

* docs(button): remove examples

* fix(button): avoid absolute icon positioning

* fix(button): resize small and ghost variants

demo/js/components/ComponentExample/component-overrides.scss

@@ -65,6 +65,7 @@
 
   .button .bx--btn {
     margin-bottom: 0.5rem;
+    vertical-align: top;
   }
 
   .data-table > div {

src/components/button/_button.scss

@@ -292,6 +292,19 @@
     }
   }
 
+  .#{$prefix}--btn--icon-only,
+  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
+    padding-right: rem(15px);
+
+    .#{$prefix}--btn__icon {
+      position: static;
+    }
+
+    &.#{$prefix}--btn--ghost .#{$prefix}--btn__icon {
+      margin: 0;
+    }
+  }
+
   .#{$prefix}--btn--danger {
     @include button-theme--x($support-01, $support-01, $text-04, $hover-danger, $icon-03, $active-danger);
 

src/components/button/button.hbs

@@ -36,4 +36,16 @@
     <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
   </svg>
   {{/if}}
-</button>
+</button>
+<button
+  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}} {{@root.prefix}}--btn--icon-only{{#if small}} {{@root.prefix}}--btn--sm{{/if}}"
+  {{#if danger}} aria-label="danger" {{/if}} type="button">
+  {{#if @root.featureFlags.componentsX}}
+  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
+  {{else}}
+  <svg class="{{@root.prefix}}--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true">
+    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
+  </svg>
+  {{/if}}
+</button>