From 6d48c4f9b301b34bcdd1482efa1d0201f28a13ce Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@users.noreply.github.com>
Date: Thu, 12 Sep 2019 14:56:25 -0700
Subject: [PATCH] fix(material-experimental/button): ripples were using
 mat-button styles (#17069)

(cherry picked from commit b454e38e5425b525f202465c9221996304558667)
---
 .../mdc-button/_button-base.scss              | 23 +++++++++++++++++++
 .../mdc-button/button.html                    |  2 +-
 .../mdc-button/button.scss                    | 17 ++++++++++++++
 src/material-experimental/mdc-button/fab.scss |  1 +
 .../mdc-button/icon-button.scss               |  1 +
 5 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss
index f135cfd7b60a..3019bdd0ba7b 100644
--- a/src/material-experimental/mdc-button/_button-base.scss
+++ b/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,
diff --git a/src/material-experimental/mdc-button/button.html b/src/material-experimental/mdc-button/button.html
index 861f24786d6a..7c353132ed25 100644
--- a/src/material-experimental/mdc-button/button.html
+++ b/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"
diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
index 9b8522c1cd3b..0db52d4bbc27 100644
--- a/src/material-experimental/mdc-button/button.scss
+++ b/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;
 }
diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material-experimental/mdc-button/fab.scss
index 924f66de7e68..37f9f230cfbf 100644
--- a/src/material-experimental/mdc-button/fab.scss
+++ b/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 {
diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss
index c541891a41a9..9374a32777db 100644
--- a/src/material-experimental/mdc-button/icon-button.scss
+++ b/src/material-experimental/mdc-button/icon-button.scss
@@ -13,4 +13,5 @@
   border-radius: 50%;
 
   @include _mat-button-disabled();
+  @include _mat-button-ripple-position();
 }