fix(button): Stroked buttons should change the padding of the button (#…

…1538)

packages/mdc-button/_mixins.scss

@@ -60,6 +60,11 @@
 }
 
 @mixin mdc-button-stroke-width($stroke-width) {
+  // Note: Adjust padding to maintain consistent width with non-stroked buttons
+  $padding-value: max($mdc-button-horizontal-padding - $stroke-width, 0);
+
+  padding-right: $padding-value;
+  padding-left: $padding-value;
   border-width: $stroke-width;
   // Note: line height is adjusted for stroke button because borders are not
   // considered as space available to text on the Web
@@ -70,6 +75,13 @@
     // Minus extra 1 to accommodate odd font size of dense button
     line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
   }
+
+  &.mdc-button--compact {
+    $padding-compact-value: max($mdc-compact-button-horizontal-padding - $stroke-width, 0);
+
+    padding-right: $padding-compact-value;
+    padding-left: $padding-compact-value;
+  }
 }
 
 @mixin mdc-button-base_() {
@@ -82,7 +94,7 @@
   box-sizing: border-box;
   min-width: 64px;
   height: $mdc-button-height;
-  padding: 0 16px;
+  padding: 0 $mdc-button-horizontal-padding;
   border: none;
   outline: none;
   text-align: center;
@@ -171,7 +183,7 @@
 }
 
 @mixin mdc-button--compact_() {
-  padding: 0 8px;
+  padding: 0 $mdc-compact-button-horizontal-padding;
 }
 
 @mixin mdc-button--dense_() {

packages/mdc-button/_variables.scss

@@ -15,7 +15,9 @@
 //
 
 $mdc-button-height: 36px;
+$mdc-button-horizontal-padding: 16px;
 $mdc-dense-button-height: 32px;
+$mdc-compact-button-horizontal-padding: 8px;
 
 $mdc-unfilled-button-ripple-opacity: .16;
 $mdc-filled-button-ripple-opacity: .32;