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

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);
@@ -123,14 +125,24 @@
   @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} {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
   }
 
   .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 +153,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 +211,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),
@@ -252,7 +274,6 @@
     line-height: inherit;
     user-select: none;
     -webkit-appearance: none;
-    overflow: hidden;
     vertical-align: middle;
   }
 
@@ -288,12 +309,17 @@
       pointer-events: none;
     }
   }
+
+  .mdc-button__label {
+    position: relative;
+  }
 }
 
 @mixin mdc-button__icon_ {
   @include mdc-rtl-reflexive-box(margin, right, 8px);
 
   display: inline-block;
+  position: relative;
   width: 18px;
   height: 18px;
   font-size: 18px;