feat(button): Add padding mixin, adjust icon margin (#2420)

packages/mdc-button/README.md

@@ -139,12 +139,13 @@ container color to the given color, and updates the Button's ink and ripple colo
 
 Mixin | Description
 --- | ---
-`mdc-button-container-fill-color` | Sets the container color to the given color.
-`mdc-button-icon-color` | Sets the icon color to the given color.
-`mdc-button-ink-color` | Sets the ink color to the given color. This affects both text and icon, unless `mdc-button-icon-color` is also used.
-`mdc-button-stroke-color` | Sets the stroke color to the given color.
-`mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 2px).
-`mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px).
+`mdc-button-container-fill-color($color)` | Sets the container color to the given color.
+`mdc-button-icon-color($color)` | Sets the icon color to the given color.
+`mdc-button-ink-color($color)` | Sets the ink color to the given color. This affects both text and icon, unless `mdc-button-icon-color` is also used.
+`mdc-button-corner-radius($corner-radius)` | Sets the corner radius to the given number (defaults to 2px).
+`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.
+`mdc-button-stroke-color($color)` | Sets the stroke color to the given color.
+`mdc-button-stroke-width($width, $padding)` | Sets the stroke width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.
 
 The ripple effect for the Button component is styled using [MDC Ripple](../mdc-ripple) mixins.
 

packages/mdc-button/_mixins.scss

@@ -66,9 +66,14 @@
   border-radius: $corner-radius;
 }
 
-@mixin mdc-button-stroke-width($stroke-width) {
+@mixin mdc-button-horizontal-padding($padding) {
+  padding-right: $padding;
+  padding-left: $padding;
+}
+
+@mixin mdc-button-stroke-width($stroke-width, $padding: $mdc-button-contained-horizontal-padding) {
   // Note: Adjust padding to maintain consistent width with non-stroked buttons
-  $padding-value: max($mdc-button-horizontal-padding - $stroke-width, 0);
+  $padding-value: max($padding - $stroke-width, 0);
 
   padding-right: $padding-value;
   padding-left: $padding-value;
@@ -88,13 +93,13 @@
   @include mdc-typography(button);
   @include mdc-ripple-surface;
   @include mdc-ripple-radius-bounded;
+  @include mdc-button-horizontal-padding($mdc-button-horizontal-padding);
 
   display: inline-block;
   position: relative;
   box-sizing: border-box;
   min-width: 64px;
   height: $mdc-button-height;
-  padding: 0 $mdc-button-horizontal-padding;
   border: none;
   outline: none;
   text-align: center;
@@ -138,13 +143,15 @@
 }
 
 @mixin mdc-button__icon-svg_ {
-  @include mdc-rtl-reflexive-box(margin, right, 8px);
-
   margin-top: -2px;
   fill: currentColor;
   vertical-align: middle;
 }
 
+@mixin mdc-button__icon-contained_ {
+  @include mdc-rtl-reflexive-property(margin, -4px, 8px);
+}
+
 @mixin mdc-button--stroked_() {
   border-style: solid;
 
@@ -154,6 +161,8 @@
 }
 
 @mixin mdc-button--filled_() {
+  @include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding);
+
   &:disabled {
     @include mdc-theme-prop(background-color, rgba(black, .12));
     @include mdc-theme-prop(color, text-disabled-on-light);

packages/mdc-button/_variables.scss

@@ -15,5 +15,6 @@
 //
 
 $mdc-button-height: 36px;
-$mdc-button-horizontal-padding: 16px;
+$mdc-button-horizontal-padding: 8px;
+$mdc-button-contained-horizontal-padding: 16px;
 $mdc-dense-button-height: 32px;

packages/mdc-button/mdc-button.scss

@@ -41,6 +41,15 @@
   }
 }
 
+.mdc-button--raised,
+.mdc-button--unelevated,
+.mdc-button--stroked {
+  .mdc-button__icon {
+    // Icons inside contained buttons have different styles due to increased button padding
+    @include mdc-button__icon-contained_;
+  }
+}
+
 .mdc-button--raised,
 .mdc-button--unelevated {
   @include mdc-button--filled_;