add comments to ripple styles; remove position relative; merge mixins

Author: andrewseguin

src/dev-app/theme.scss

@@ -1,7 +1,5 @@
 @import '../material/core/theming/all-theme';
 @import '../material-experimental/mdc-button/mdc-button';
-@import '../material-experimental/mdc-button/mdc-icon-button';
-@import '../material-experimental/mdc-button/mdc-fab';
 @import '../material-experimental/mdc-card/mdc-card';
 @import '../material-experimental/mdc-checkbox/mdc-checkbox';
 @import '../material-experimental/mdc-helpers/mdc-helpers';

src/e2e-app/theme.scss

@@ -1,7 +1,5 @@
 @import '../material/core/theming/all-theme';
 @import '../material-experimental/mdc-button/mdc-button';
-@import '../material-experimental/mdc-button/mdc-icon-button';
-@import '../material-experimental/mdc-button/mdc-fab';
 @import '../material-experimental/mdc-card/mdc-card';
 @import '../material-experimental/mdc-checkbox/mdc-checkbox';
 @import '../material-experimental/mdc-helpers/mdc-helpers';

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

@@ -13,6 +13,8 @@ $_mat-button-ripple-opacity: 0.1;
   }
 
   .mat-mdc-button {
+    // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is necessary to provide
+    // the color and opacity styling manually.
     .mat-ripple-element {
       opacity: $_mat-button-ripple-opacity;
       background-color: currentColor;
@@ -30,3 +32,55 @@ $_mat-button-ripple-opacity: 0.1;
     @include mdc-button-without-ripple($query: $mat-typography-styles-query);
   }
 }
+
+@mixin mat-fab-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    @include mdc-fab-without-ripple($query: $mat-theme-styles-query);
+  }
+
+  .mat-mdc-button {
+    // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is necessary to provide
+    // the color and opacity styling manually.
+    .mat-ripple-element {
+      opacity: $_mat-button-ripple-opacity;
+      background-color: currentColor;
+    }
+  }
+}
+
+@mixin mat-fab-typography-mdc($config) {
+  @if config {
+    @include mat-using-mdc-typography($config) {
+      @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
+    }
+  }
+  @else {
+    @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
+  }
+}
+
+@mixin mat-icon-button-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query);
+  }
+
+  .mat-mdc-button {
+    // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is necessary to provide
+    // the color and opacity styling manually.
+    .mat-ripple-element {
+      opacity: $_mat-button-ripple-opacity;
+      background-color: currentColor;
+    }
+  }
+}
+
+@mixin mat-icon-button-typography-mdc($config) {
+  @if config {
+    @include mat-using-mdc-typography($config) {
+      @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
+    }
+  }
+  @else {
+    @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
+  }
+}

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

@@ -2,7 +2,3 @@
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-button-without-ripple($query: $mat-base-styles-query);
-
-.mat-mdc-button {
-  position: relative;
-}

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

@@ -3,10 +3,6 @@
 
 @include mdc-fab-without-ripple($query: $mat-base-styles-query);
 
-.mat-mdc-button {
-  position: relative;
-}
-
 // MDC expects the fab icon to contain this HTML content:
 // ```html
 //   <span class="mdc-fab__icon material-icons">favorite</span>

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

@@ -2,7 +2,3 @@
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-icon-button-without-ripple($query: $mat-base-styles-query);
-
-.mat-mdc-button {
-  position: relative;
-}

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

@@ -1,7 +1,5 @@
 @import '../material/core/theming/all-theme';
 @import '../material-experimental/mdc-button/mdc-button';
-@import '../material-experimental/mdc-button/mdc-icon-button';
-@import '../material-experimental/mdc-button/mdc-fab';
 @import '../material-experimental/mdc-card/mdc-card';
 @import '../material-experimental/mdc-checkbox/mdc-checkbox';
 @import '../material-experimental/mdc-helpers/mdc-helpers';