From 60cb29e83190c0857a0970f72550a6c0670bcbc5 Mon Sep 17 00:00:00 2001
From: TJ Egan <twegan@us.ibm.com>
Date: Thu, 25 May 2017 15:00:28 -0500
Subject: [PATCH] fix(buttons): replace svg with inline svg

---
 src/components/button/_button.scss          | 7 ++++++-
 src/components/button/_mixins.scss          | 2 ++
 src/components/button/danger-button.html    | 8 ++++----
 src/components/button/primary-button.html   | 8 ++++----
 src/components/button/secondary-button.html | 8 ++++----
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 2caea6e798ac..0f704b6ae94e 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -50,7 +50,7 @@
       $brand-01,   // border-color
       $brand-01,   // font-color
       $brand-01,   // hover-bg-color
-      currentColor // icon-color
+      $brand-01 // icon-color
     );
 
     &:hover,
@@ -58,6 +58,11 @@
       color: $inverse-01;
     }
 
+    &:hover > .bx--btn__icon,
+    &:focus > .bx--btn__icon {
+      fill: $inverse-01;
+    }
+
     &:hover:disabled,
     &:focus:disabled {
       color: $brand-01;
diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
index 3276f019cfeb..630f326471f0 100644
--- a/src/components/button/_mixins.scss
+++ b/src/components/button/_mixins.scss
@@ -28,6 +28,8 @@
     width: rem(16px);
     height: rem(16px);
     margin-left: .5rem;
+    transition-duration: $transition--base;
+    transition-timing-function: ease-in;
   }
 }
 
diff --git a/src/components/button/danger-button.html b/src/components/button/danger-button.html
index 8c8be92d4a1c..e7db2cf41a31 100644
--- a/src/components/button/danger-button.html
+++ b/src/components/button/danger-button.html
@@ -2,14 +2,14 @@
 <button class="bx--btn bx--btn--danger" type="button" disabled>Danger button</button>
 <button class="bx--btn bx--btn--danger" type="button">
   Danger
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
 </button>
 <button class="bx--btn bx--btn--danger bx--btn--sm" type="button">Danger button</button>
 <button class="bx--btn bx--btn--danger bx--btn--sm" type="button">
   Danger button
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
 </button>
diff --git a/src/components/button/primary-button.html b/src/components/button/primary-button.html
index 73fa9178506a..cb6353a5569a 100644
--- a/src/components/button/primary-button.html
+++ b/src/components/button/primary-button.html
@@ -2,14 +2,14 @@
 <button class="bx--btn bx--btn--primary" type="button" disabled>Primary button</button>
 <button class="bx--btn bx--btn--primary" type="button">
   Primary
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
 </button>
 <button class="bx--btn bx--btn--primary bx--btn--sm" type="button">Primary button</button>
 <button class="bx--btn bx--btn--primary bx--btn--sm" type="button">
   Primary button
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
 </button>
diff --git a/src/components/button/secondary-button.html b/src/components/button/secondary-button.html
index bcebeccb41d8..326b0c51ffbf 100644
--- a/src/components/button/secondary-button.html
+++ b/src/components/button/secondary-button.html
@@ -2,14 +2,14 @@
 <button class="bx--btn bx--btn--secondary" type="button" disabled>Secondary button</button>
 <button class="bx--btn bx--btn--secondary" type="button">
   Secondary
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
 </button>
 <button class="bx--btn bx--btn--secondary bx--btn--sm" type="button">Secondary button</button>
 <button class="bx--btn bx--btn--secondary bx--btn--sm" type="button">
   Secondary button
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
 </button>