fix(material-experimental/button): ripples were using mat-button styles (#17069)

Author: andrewseguin

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

@@ -1,3 +1,5 @@
+@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.
 @mixin _mat-button-interactive() {
@@ -10,10 +12,31 @@
     bottom: 0;
     left: 0;
     opacity: 0;
+    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 {
+    @include mat-fill;
+
+    // Disable pointer events for the ripple container and focus 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
+    // 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.
+    border-radius: inherit;
+  }
+}
+
 // MDC's disabled buttons define a default cursor with pointer-events none. However, they select
 // :disabled for this, which does not affect anchor tags.
 // TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,

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

@@ -6,7 +6,7 @@
 <ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]">
 </ng-content>
 
-<span matRipple class="mat-button-ripple"
+<span matRipple class="mat-mdc-button-ripple"
      [matRippleAnimation]="_rippleAnimation"
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="_isRippleCentered"

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

@@ -1,4 +1,5 @@
 @import '@material/button/mixins';
+@import '@material/button/variables';
 @import '@material/ripple/mixins';
 @import '../mdc-helpers/mdc-helpers';
 @import '../../cdk/a11y/a11y';
@@ -17,4 +18,20 @@
 
   @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
+// child elements such as the ripple container or focus overlay, an inherited border radius
+// for the absolute-positioned child elements does not work properly. This is because the
+// child element cannot expand to the same boundaries as the parent element with a border.
+// In order to work around this issue by *not* hiding overflow, we adjust the child elements
+// to fully cover the actual button element. This means that the border-radius would be correct
+// then. See: https://github.com/angular/components/issues/13738
+.mat-mdc-outlined-button .mat-mdc-button-ripple {
+  top: -$mdc-button-outlined-border-width;
+  left: -$mdc-button-outlined-border-width;
+  bottom: -$mdc-button-outlined-border-width;
+  right: -$mdc-button-outlined-border-width;
 }

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

@@ -9,6 +9,7 @@
 .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,4 +13,5 @@
   border-radius: 50%;
 
   @include _mat-button-disabled();
+  @include _mat-button-ripple-position();
 }