fix(buttons): replace svg with inline svg

carbon-design-system · May 25, 2017 · 60cb29e · 60cb29e
1 parent 276e6a3
commit 60cb29e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -50,14 +50,19 @@
       $brand-01,   // border-color
       $brand-01,   // font-color
       $brand-01,   // hover-bg-color
-      currentColor // icon-color
+      $brand-01 // icon-color
     );
 
     &:hover,
     &:focus {
       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
@@ -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
@@ -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
@@ -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
@@ -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>