refactor(material/button): simplify icon button structural styles (#2…

…9342) Simplifies the structural styles for the icon button to make them smaller and easier to maintain.
angular · Jul 3, 2024 · d5d321a · d5d321a
1 parent 0fe877c
commit d5d321a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 46 deletions.
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
@@ -1,7 +1,5 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '@material/density/functions' as mdc-density-functions;
-@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 @use '../core/style/sass-utils';
@@ -18,7 +16,8 @@
   @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-icon-button-theme.theme(tokens-mdc-icon-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix,
+        tokens-mdc-icon-button.get-unthemable-tokens());
     }
   }
 }
@@ -34,7 +33,7 @@
     tokens-mat-icon-button.get-color-tokens($theme)
   );
 
-  @include mdc-icon-button-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
 }
 
@@ -82,19 +81,15 @@
   @else {
     $icon-size: 24px;
     $density-scale: inspection.get-theme-density($theme);
-    // Manually apply the expected density theming, and include the padding
-    // as it was applied before
-    $calculated-size: mdc-density-functions.prop-value(
-      $density-config: (
-        size: (
-          default: 48px,
-          maximum: 48px,
-          minimum: 28px,
-        ),
-      ),
-      $density-scale: $density-scale,
-      $property-name: size,
+    $size-map: (
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+      -5: 28px,
     );
+    $calculated-size: map.get($size-map, $density-scale);
 
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
@@ -105,9 +100,7 @@
     .mat-mdc-icon-button.mat-mdc-button-base {
       // Match the styles that used to be present. This is necessary for backwards
       // compat to match the previous implementations selector count (two classes).
-      @include mdc-icon-button-theme.theme((
-        state-layer-size: $calculated-size,
-      ));
+      --mdc-icon-button-state-layer-size: #{$calculated-size};
 
       // TODO: Switch calculated-size to "var(--mdc-icon-button-state-layer-size)"
       // Currently fails validation because the variable is "undefined"
@@ -153,7 +146,8 @@
   @include validation.selector-defined(
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
-    @include mdc-icon-button-theme.theme(map.get($tokens, tokens-mdc-icon-button.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mdc-icon-button.$prefix, map.get($tokens, tokens-mdc-icon-button.$prefix));
     @include token-utils.create-token-values(
         tokens-mat-icon-button.$prefix, map.get($tokens, tokens-mat-icon-button.$prefix));
   }

diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss
@@ -1,32 +1,27 @@
-@use 'sass:map';
-@use '@material/icon-button/icon-button' as mdc-icon-button;
-@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 
 @use './button-base';
 @use '../core/style/private';
+@use '../core/style/vendor-prefixes';
 @use '../core/tokens/token-utils';
 
-// The slots for tokens that will be configured in the theme can be emitted with no fallback.
-@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  $token-slots: tokens-mdc-icon-button.get-token-slots();
-
-  // Add the MDC component static styles.
-  @include mdc-icon-button.static-styles();
-
-  .mat-mdc-icon-button {
-    // Add the official slots for the MDC component.
-    @include mdc-icon-button-theme.theme-styles(map.merge($token-slots, (
-      // Exclude the state layer size since we'll re-emit it below with a default value.
-      state-layer-size: null,
-    )));
-  }
-}
 
 .mat-mdc-icon-button {
+  @include vendor-prefixes.user-select(none);
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  fill: currentColor;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 0;
+  overflow: visible;
+
   // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
   border-radius: 50%;
 
@@ -36,10 +31,6 @@
   // Ensure the icons are centered.
   text-align: center;
 
-  svg {
-    vertical-align: baseline;
-  }
-
   @include token-utils.use-tokens(
     tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
     $button-size: var(#{token-utils.get-token-variable(state-layer-size)}, 48px);
@@ -57,12 +48,18 @@
     // Icon size used to be placed on the host element. Now, in `theme-styles` it is placed on
     // the unused `.mdc-button__icon` class. Explicitly set the font-size here.
     @include token-utils.create-token-slot(font-size, icon-size);
+    @include token-utils.create-token-slot(color, icon-color);
 
     @include button-base.mat-private-button-disabled {
-      // MDC's disabled styles target the `:disabled` selector which doesn't work on links.
-      // We re-apply the disabled icon color here since we support Material buttons on links too.
       @include token-utils.create-token-slot(color, disabled-icon-color);
     };
+
+    img,
+    svg {
+      @include token-utils.create-token-slot(width, icon-size);
+      @include token-utils.create-token-slot(height, icon-size);
+      vertical-align: baseline;
+    }
   }
 
   @include button-base.mat-private-button-interactive();
@@ -76,6 +73,11 @@
     border-radius: 50%;
   }
 
+  // MDC used to include this and it seems like a lot of apps depend on it.
+  &[hidden] {
+    display: none;
+  }
+
   // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
   // and don't actually do anything. This undoes those conflicting styles.
   &.mat-unthemed,