refactor(material/button): introduce tokens for horizontal layout

In M3 the buttons will have a different padding. These changes introduce tokens that will allow us to customize it.

**Note:** the text button in M3 has a different padding depending on whether it has icons so it needs an additional token.

Author: crisbeto

src/dev-app/button/button-demo.html

@@ -168,6 +168,10 @@ <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
       with icons
       <mat-icon iconPositionEnd>favorite</mat-icon>
     </button>
+    <button mat-button>
+      <mat-icon>home</mat-icon>
+      with icons
+    </button>
   </section>
 
   <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
@@ -186,6 +190,10 @@ <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
       with icons
       <mat-icon iconPositionEnd>favorite</mat-icon>
     </button>
+    <button mat-raised-button>
+      <mat-icon>home</mat-icon>
+      with icons
+    </button>
   </section>
 
   <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
@@ -204,6 +212,10 @@ <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
       with icons
       <mat-icon iconPositionEnd>favorite</mat-icon>
     </button>
+    <button mat-stroked-button>
+      <mat-icon>home</mat-icon>
+      with icons
+    </button>
   </section>
 
   <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
@@ -222,9 +234,13 @@ <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
       with icons
       <mat-icon iconPositionEnd>favorite</mat-icon>
     </button>
+    <button mat-flat-button>
+      <mat-icon>home</mat-icon>
+      with icons
+    </button>
   </section>
 
-  <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
+  <h4 class="demo-section-header">Icon Buttons [mat-icon-button]</h4>
   <section>
     <button mat-icon-button>
       <mat-icon>cached</mat-icon>

src/material/button/_button-base.scss

@@ -133,3 +133,48 @@
     }
   }
 }
+
+@mixin mat-private-button-horizontal-layout($prefix, $slots, $has-with-icon-padding) {
+  @include token-utils.use-tokens($prefix, $slots) {
+    $icon-spacing: token-utils.get-token-variable-reference(icon-spacing, true);
+    $icon-offset: token-utils.get-token-variable-reference(icon-offset, true);
+    $horizontal-padding: token-utils.get-token-variable-reference(horizontal-padding, true);
+    padding: 0 $horizontal-padding;
+
+    @if ($has-with-icon-padding) {
+      $with-icon-horizontal-padding:
+        token-utils.get-token-variable-reference(with-icon-horizontal-padding, true);
+
+      // stylelint-disable-next-line selector-class-pattern
+      &:has(.material-icons, mat-icon, [matButtonIcon]) {
+        padding: 0 $with-icon-horizontal-padding;
+      }
+    }
+
+    // MDC expects button icons to contain this HTML content:
+    // ```html
+    //   <span class="mdc-button__icon material-icons">favorite</span>
+    // ```
+    // However, Angular Material expects a `mat-icon` instead. The following
+    // styles will lay out the icons appropriately.
+    & > .mat-icon {
+      margin-right: $icon-spacing;
+      margin-left: $icon-offset;
+
+      [dir='rtl'] & {
+        margin-right: $icon-offset;
+        margin-left: $icon-spacing;
+      }
+    }
+
+    .mdc-button__label + .mat-icon {
+      margin-right: $icon-offset;
+      margin-left: $icon-spacing;
+
+      [dir='rtl'] & {
+        margin-right: $icon-spacing;
+        margin-left: $icon-offset;
+      }
+    }
+  }
+}

src/material/button/_button-theme.scss

@@ -111,6 +111,15 @@
         tokens-mdc-protected-button.get-unthemable-tokens());
       @include mdc-button-outlined-theme.theme(
         tokens-mdc-outlined-button.get-unthemable-tokens());
+
+      @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
+        tokens-mat-text-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
+        tokens-mat-filled-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
+        tokens-mat-protected-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
+        tokens-mat-outlined-button.get-unthemable-tokens());
     }
   }
 }

src/material/button/button.scss

@@ -1,11 +1,11 @@
 @use 'sass:map';
 @use '@material/button/button' as mdc-button;
-@use '@material/button/button-base' as mdc-button-base;
 @use '@material/button/variables' as mdc-button-variables;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
+@use '@material/typography/typography' as mdc-typography;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 
 @use './button-base';
@@ -31,6 +31,8 @@
     $mdc-text-button-slots: tokens-mdc-text-button.get-token-slots();
 
     @include mdc-button-text-theme.theme-styles($mdc-text-button-slots);
+    @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
+      tokens-mat-text-button.get-token-slots(), true);
     @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
       tokens-mat-text-button.get-token-slots());
     @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
@@ -49,6 +51,8 @@
     $mdc-filled-button-slots: tokens-mdc-filled-button.get-token-slots();
 
     @include mdc-button-filled-theme.theme-styles($mdc-filled-button-slots);
+    @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
+      tokens-mat-filled-button.get-token-slots(), false);
     @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
       tokens-mat-filled-button.get-token-slots());
     @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
@@ -76,6 +80,8 @@
       pressed-container-elevation: null,
       container-shadow-color: null,
     )));
+    @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
+      tokens-mat-protected-button.get-token-slots(), false);
     @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
       tokens-mat-protected-button.get-token-slots());
     @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
@@ -115,6 +121,8 @@
     $mdc-outlined-button-slots: tokens-mdc-outlined-button.get-token-slots();
 
     @include mdc-button-outlined-theme.theme-styles($mdc-outlined-button-slots);
+    @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
+      tokens-mat-outlined-button.get-token-slots(), false);
     @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
       tokens-mat-outlined-button.get-token-slots());
     @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
@@ -143,34 +151,17 @@
 .mat-mdc-outlined-button {
   @include button-base.mat-private-button-interactive();
   @include style-private.private-animation-noop();
-}
 
-// MDC expects button icons to contain this HTML content:
-// ```html
-//   <span class="mdc-button__icon material-icons">favorite</span>
-// ```
-// However, Angular Material expects a `mat-icon` instead. The following
-// mixins will style the icons appropriately.
-.mat-mdc-button {
+  // Similar to MDC's `_icon-structure`, apart from the margin which we
+  // handle via custom tokens in `mat-private-button-horizontal-layout`.
   & > .mat-icon {
-    @include mdc-button-base.icon();
-  }
-  .mdc-button__label + .mat-icon {
-    @include mdc-button-base.icon-trailing();
-  }
-}
-
-.mat-mdc-unelevated-button,
-.mat-mdc-raised-button,
-.mat-mdc-outlined-button {
-  // Icons inside contained buttons have different styles due to increased button padding
-  & > .mat-icon {
-    @include mdc-button-base.icon();
-    @include mdc-button-base.icon-contained();
-  }
-
-  .mdc-button__label + .mat-icon {
-    @include mdc-button-base.icon-contained-trailing();
+    $icon-size: mdc-typography.px-to-rem(18px);
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+    font-size: $icon-size;
+    height: $icon-size;
+    width: $icon-size;
   }
 }
 

src/material/core/tokens/m2/mat/_filled-button.scss

@@ -12,7 +12,17 @@ $prefix: (mat, filled-button);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // Start/end padding of the button.
+    horizontal-padding: 16px,
+
+    // Space between the icon and the button's main content.
+    icon-spacing: 8px,
+
+    // Amount by which to offset the icon so that its presence
+    // doesn't increase throw off the horizontal padding.
+    icon-offset: -4px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

src/material/core/tokens/m2/mat/_outlined-button.scss

@@ -12,7 +12,17 @@ $prefix: (mat, outlined-button);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // Start/end padding of the button.
+    horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
+
+    // Space between the icon and the button's main content.
+    icon-spacing: 8px,
+
+    // Amount by which to offset the icon so that its presence
+    // doesn't increase throw off the horizontal padding.
+    icon-offset: -4px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

src/material/core/tokens/m2/mat/_protected-button.scss

@@ -12,7 +12,17 @@ $prefix: (mat, protected-button);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // Start/end padding of the button.
+    horizontal-padding: 16px,
+
+    // Space between the icon and the button's main content.
+    icon-spacing: 8px,
+
+    // Amount by which to offset the icon so that its presence
+    // doesn't increase throw off the horizontal padding.
+    icon-offset: -4px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

src/material/core/tokens/m2/mat/_text-button.scss

@@ -12,7 +12,20 @@ $prefix: (mat, text-button);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // Start/end padding of the button.
+    horizontal-padding: 8px,
+
+    // Start/end padding of the button when it has an icon.
+    with-icon-horizontal-padding: 8px,
+
+    // Space between the icon and the button's main content.
+    icon-spacing: 8px,
+
+    // Amount by which to offset the icon so that its presence
+    // doesn't increase throw off the horizontal padding.
+    icon-offset: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.