From ece7c72d165499129d12638d8c5c8435e2422400 Mon Sep 17 00:00:00 2001
From: Mike Wheaton <mike@mikewheaton.ca>
Date: Wed, 8 Jun 2016 11:21:38 -0700
Subject: [PATCH 1/2] Replace inline block with flex box so that hero button
 layout is not affected by spaces in HTML

---
 src/components/Button/Button.scss | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 57a815b67..a0269cbb1 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -15,7 +15,6 @@
   background-color: $ms-color-neutralLighter;
   border: 1px solid $ms-color-neutralLighter;
   cursor: pointer;
-  display: inline-block;
   height: 32px;
   min-width: 80px;
   padding: 4px 20px 6px;
@@ -128,15 +127,13 @@
 .ms-Button.ms-Button--hero {
   background-color: transparent;
   border: 0;
-  vertical-align: top;
-  line-height: normal;
+  display: flex;
+  padding: 0;
 
   .ms-Button-icon {
     color: $ms-color-themePrimary;
-    display: inline-block;
-    font-size: $ms-font-size-s;
-    position: relative;
-    top: -8px;
+    display: block;
+    margin-right: 4px;
     text-align: center;
 
     .ms-Icon {
@@ -146,16 +143,15 @@
       line-height: 18px;
       width: 18px;
       font-size: $ms-font-size-s;
-      margin: 0;
     }
   }
 
   .ms-Button-label {
     color: $ms-color-themePrimary;
-    font-weight: $ms-font-weight-light;
     font-size: $ms-font-size-xl;
+    font-weight: $ms-font-weight-light;
+    line-height: 19px;
     position: relative;
-    top: -5px;
     text-decoration: none;
   }
 

From 659b9a93c7df019b5839b893af4eebff781ddcb2 Mon Sep 17 00:00:00 2001
From: Mike Wheaton <mike@mikewheaton.ca>
Date: Wed, 8 Jun 2016 11:29:04 -0700
Subject: [PATCH 2/2] Use flex box to align icon and text

---
 src/components/Button/Button.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index a0269cbb1..970a6c5f6 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -125,6 +125,7 @@
 //== Modifier: Hero button
 //
 .ms-Button.ms-Button--hero {
+  align-items: center;
   background-color: transparent;
   border: 0;
   display: flex;
@@ -139,10 +140,10 @@
     .ms-Icon {
       border-radius: 18px;
       border: 1px solid $ms-color-themePrimary;
+      font-size: $ms-font-size-s;
       height: 18px;
       line-height: 18px;
       width: 18px;
-      font-size: $ms-font-size-s;
     }
   }
 
@@ -150,7 +151,6 @@
     color: $ms-color-themePrimary;
     font-size: $ms-font-size-xl;
     font-weight: $ms-font-weight-light;
-    line-height: 19px;
     position: relative;
     text-decoration: none;
   }