refactor(button): Add ripple target as an inner element. (#4890)

BREAKING CHANGE: This changes the structure of the button element by moving the ripple from the outer <button> element to an inner `mdc-button__ripple` element.

OLD
```
<button class="mdc-button">
  <span class="mdc-button__label">Hello World</span>
</button>
```

NEW
```
<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Hello World</span>
</button>
```

Author: joyzhong

packages/mdc-button/README.md

@@ -41,6 +41,7 @@ npm install @material/button
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <span class="mdc-button__label">Button</span>
 </button>
 ```
@@ -91,6 +92,7 @@ To add an icon, add an element with the `mdc-button__icon` class inside the butt
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
   <span class="mdc-button__label">Button</span>
 </button>
@@ -100,6 +102,7 @@ It's also possible to use an SVG icon:
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="...">
   ...
   </svg>
@@ -114,6 +117,7 @@ putting the icon markup _after_ the `mdc-button__label` element.
 
 ```html
 <button class="mdc-button">
+  <div class="mdc-button__ripple"></div>
   <span class="mdc-button__label">Button</span>
   <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
 </button>
@@ -128,6 +132,7 @@ Disabled buttons cannot be interacted with and have no visual interaction effect
 
 ```html
 <button class="mdc-button" disabled>
+  <div class="mdc-button__ripple"></div>
   <span class="mdc-button__label">Button</span>
 </button>
 ```
@@ -139,6 +144,7 @@ Disabled buttons cannot be interacted with and have no visual interaction effect
 CSS Class | Description
 --- | ---
 `mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.
+`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.
 `mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.
 `mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.
 `mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.

packages/mdc-button/_mixins.scss

@@ -32,6 +32,8 @@
 @import "@material/shape/functions";
 @import "./variables";
 
+$mdc-button-ripple-target: ".mdc-button__ripple";
+
 @mixin mdc-button-core-styles($query: mdc-feature-all()) {
   @include mdc-button-without-ripple($query);
   @include mdc-button-ripple($query);
@@ -120,17 +122,40 @@
 // This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
 // button styles. It is recommended that most users use `mdc-button-core-styles` instead.
 @mixin mdc-button-ripple($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   @include mdc-ripple-common($query);
 
   .mdc-button {
-    @include mdc-ripple-surface($query);
-    @include mdc-ripple-radius-bounded($query: $query);
-    @include mdc-states(primary, false, $query);
+    @include mdc-ripple-surface($query: $query, $ripple-target: $mdc-button-ripple-target);
+    @include mdc-ripple-radius-bounded(
+      $query: $query, $ripple-target: $mdc-button-ripple-target);
+    @include mdc-states(
+      $color: primary, $query: $query, $ripple-target: $mdc-button-ripple-target);
+
+    #{$mdc-button-ripple-target} {
+      @include mdc-feature-targets($feat-structure) {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+
+    // Ripple targets inside outlined buttons set their own `top`/`left`,
+    // depending on the border width.
+    &:not(.mdc-button--outlined) #{$mdc-button-ripple-target} {
+      @include mdc-feature-targets($feat-structure) {
+        top: 0;
+        left: 0;
+      }
+    }
   }
 
   .mdc-button--raised,
   .mdc-button--unelevated {
-    @include mdc-states(on-primary, false, $query);
+    @include mdc-states(
+      $color: on-primary, $query: $query, $ripple-target: $mdc-button-ripple-target);
   }
 }
 
@@ -141,10 +166,12 @@
 
   @if ($fill-tone == "dark") {
     @include mdc-button-ink-color(text-primary-on-dark, $query);
-    @include mdc-states(text-primary-on-dark, $query: $query);
+    @include mdc-states(
+      $color: text-primary-on-dark, $query: $query, $ripple-target: $mdc-button-ripple-target);
   } @else {
     @include mdc-button-ink-color(text-primary-on-light, $query);
-    @include mdc-states(text-primary-on-light, $query: $query);
+    @include mdc-states(
+      $color: text-primary-on-light, $query: $query, $ripple-target: $mdc-button-ripple-target);
   }
 }
 
@@ -197,6 +224,14 @@
     $query: $query
   );
 
+  #{$mdc-button-ripple-target} {
+    @include mdc-shape-radius(
+      mdc-shape-resolve-percentage-radius($mdc-button-height, $radius),
+      $rtl-reflexive,
+      $query: $query
+    );
+  }
+
   &.mdc-button--dense {
     @include mdc-shape-radius(
       mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius),
@@ -229,6 +264,14 @@
   @include mdc-feature-targets($feat-structure) {
     border-width: $outline-width;
   }
+
+  #{$mdc-button-ripple-target} {
+    @include mdc-feature-targets($feat-structure) {
+      top: -$outline-width;
+      left: -$outline-width;
+      border: $outline-width solid transparent;
+    }
+  }
 }
 
 @mixin mdc-button-base_($query) {
@@ -252,7 +295,6 @@
     line-height: inherit;
     user-select: none;
     -webkit-appearance: none;
-    overflow: hidden;
     vertical-align: middle;
   }