refactor(material/button): simplify structural styles (#29372)

Simplifies the structural styles for the button to make them simpler and easier to maintain.
angular · Jul 4, 2024 · 4db4fc1 · 4db4fc1
1 parent 1f992d0
commit 4db4fc1
Show file tree

Hide file tree

Showing 9 changed files with 297 additions and 180 deletions.
diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
@@ -1,8 +1,5 @@
-@use '@material/touch-target' as mdc-touch-target;
-
 @use '../core/tokens/token-utils';
 @use '../core/style/layout-common';
-@use '../core/mdc-helpers/mdc-helpers';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -126,9 +123,19 @@
   // the button itself would require us to wrap it in another div. See:
   // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
   .mat-mdc-button-touch-target {
-    @include mdc-touch-target.touch-target(
-      $set-width: $is-square,
-      $query: mdc-helpers.$mdc-base-styles-query);
+    position: absolute;
+    top: 50%;
+    height: 48px;
+
+    @if $is-square {
+      left: 50%;
+      width: 48px;
+      transform: translate(-50%, -50%);
+    } @else {
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+    }
 
     @include token-utils.use-tokens($prefix, $slots) {
       @include token-utils.create-token-slot(display, touch-target-display);

diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
@@ -1,8 +1,3 @@
-@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 '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -29,7 +24,7 @@
     tokens-mat-text-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-text-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
@@ -44,7 +39,7 @@
     tokens-mat-filled-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-filled-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
 }
 
@@ -59,7 +54,7 @@
     tokens-mat-protected-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-protected-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
 }
 
@@ -74,7 +69,7 @@
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-outlined-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
@@ -97,10 +92,14 @@
       token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...);
   $mat-outlined-button-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...);
-  @include mdc-button-text-theme.theme($mdc-text-button-tokens);
-  @include mdc-button-protected-theme.theme($mdc-protected-button-tokens);
-  @include mdc-button-filled-theme.theme($mdc-filled-button-tokens);
-  @include mdc-button-outlined-theme.theme($mdc-outlined-button-tokens);
+
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-protected-button.$prefix, $mdc-protected-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-filled-button.$prefix, $mdc-filled-button-tokens);
+  @include token-utils.create-token-values(
+    tokens-mdc-outlined-button.$prefix, $mdc-outlined-button-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
   @include token-utils.create-token-values(
       tokens-mat-protected-button.$prefix, $mat-protected-button-tokens);
@@ -119,13 +118,13 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-unthemable-tokens());
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-unthemable-tokens());
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-unthemable-tokens());
-      @include mdc-button-outlined-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-unthemable-tokens());
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
@@ -223,14 +222,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-typography-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-typography-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-typography-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-typography-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-typography-tokens($theme));
@@ -252,14 +251,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-density-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-density-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-density-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-density-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-density-tokens($theme));