fix(material-experimental/mdc): use state container for button interaction (#17284)

(cherry picked from commit ae682d8)

Author: andrewseguin

src/material-experimental/mdc-button/_button-base.scss

@@ -1,9 +1,12 @@
 @import '../../material/core/style/layout-common';
 
-// Adds a `before` pseudo element that acts as an overlay indicator for interaction states
-// such as focus, hover, and active.
+// 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
+// color and opacity for states like hover, active, and focus. Additionally, adds styles to the
+// ripple and state container so that they fill the button, match the border radius, and avoid
+// pointer events.
 @mixin _mat-button-interactive() {
-  &::before, &::after {
+  .mat-mdc-button-state::before, .mat-mdc-button-state::after {
     content: '';
     pointer-events: none;
     position: absolute;
@@ -15,21 +18,17 @@
     border-radius: inherit;
     @content;
   }
-}
 
-// The ripple container should match the bounds of the entire button.
-// Increase specificity for the ripple container because ripple styles are part of
-// the `mat-core` mixin and can potentially overwrite the absolute position of the container.
-@mixin _mat-button-ripple-position() {
-  .mat-mdc-button-ripple {
+  // The ripple container should match the bounds of the entire button.
+  .mat-mdc-button-ripple, .mat-mdc-button-state {
     @include mat-fill;
 
-    // Disable pointer events for the ripple container and focus overlay because the container
+    // Disable pointer events for the ripple container and state overlay because the container
     // will overlay the user content and we don't want to disable mouse events on the user content.
     // Pointer events can be safely disabled because the ripple trigger element is the host element.
     pointer-events: none;
 
-    // Inherit the border radius from the parent so that focus overlay and ripples don't exceed the
+    // Inherit the border radius from the parent so that state overlay and ripples don't exceed the
     // parent button boundaries. Note that an inherited border radius does not work properly if
     // the actual button element does have a border because it causes the inner content to be
     // smaller. We have special logic for stroked buttons to handle this scenario.

src/material-experimental/mdc-button/_mdc-button.scss

@@ -6,6 +6,11 @@
 @import '../../material/core/ripple/ripple';
 @import '../mdc-helpers/mdc-helpers';
 
+// Selector for the element that has a background color and opacity applied to its ::before and
+// ::after for state interactions (hover, active, focus). Their API calls this their
+// "ripple target", but we do not use it as our ripple, just state color.
+$mat-button-state-target: '.mat-mdc-button-state';
+
 // Applies the disabled theme color to the text color.
 @mixin _mat-button-disabled-color() {
   @include mdc-theme-prop(color,
@@ -49,7 +54,8 @@
     // Add state interactions for hover, focus, press, active. Colors are changed based on
     // the mixin mdc-states-base-color
     .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
-      @include mdc-states($query: $mat-theme-styles-query);
+      @include mdc-states(
+        $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
     }
 
     .mat-mdc-button, .mat-mdc-outlined-button {
@@ -59,19 +65,22 @@
 
       &.mat-primary {
         @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
-        @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
         @include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query);
-        @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-button-ink-color(error, $query: $mat-theme-styles-query);
-        @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(error);
       }
     }
@@ -82,27 +91,32 @@
         @include mdc-button-container-fill-color(
             $mdc-theme-surface, $query: $mat-theme-styles-query);
         @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
-        @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
       }
 
       &.mat-primary {
         @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
         @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
-        @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
         @include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query);
         @include mdc-button-ink-color(on-secondary, $query: $mat-theme-styles-query);
-        @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
         @include mdc-button-container-fill-color(error, $query: $mat-theme-styles-query);
         @include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query);
-        @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-error);
       }
 
@@ -162,27 +176,32 @@
       @include mdc-states($query: $mat-theme-styles-query);
 
       &.mat-unthemed {
-        @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-error);
@@ -211,24 +230,29 @@
       @include mdc-states($query: $mat-theme-styles-query);
 
       &.mat-unthemed {
-        @include mdc-states-base-color($mdc-theme-surface, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          $mdc-theme-surface, $query: $mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(secondary, $query: $mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(
+          error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(error);
       }

src/material-experimental/mdc-button/button.html

@@ -1,3 +1,5 @@
+<span class="mat-mdc-button-state"></span>
+
 <ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])">
 </ng-content>
 

src/material-experimental/mdc-button/button.scss

@@ -20,8 +20,6 @@
 
   @include _mat-button-interactive();
   @include _mat-button-disabled();
-  @include _mat-button-ripple-position();
-
 }
 
 // Since the stroked button has has an actual border that reduces the available space for

src/material-experimental/mdc-button/fab.scss

@@ -9,7 +9,6 @@
 .mat-mdc-fab, .mat-mdc-mini-fab {
   @include _mat-button-interactive();
   @include _mat-button-disabled();
-  @include _mat-button-ripple-position();
 }
 
 .mat-mdc-fab, .mat-mdc-mini-fab {

src/material-experimental/mdc-button/icon-button.scss

@@ -13,5 +13,4 @@
   border-radius: 50%;
 
   @include _mat-button-disabled();
-  @include _mat-button-ripple-position();
 }