fix(material-experimental/mdc-button): apply appropriate focus/actives styles to FAB (#22049)

Author: annieyw

src/dev-app/mdc-button/mdc-button-demo.html

@@ -11,6 +11,12 @@ <h4 class="demo-section-header">Buttons</h4>
     <button mat-mini-fab>
       <mat-icon>check</mat-icon>
     </button>
+    <button mat-fab extended>Search</button>
+    <button mat-fab extended>
+      <mat-icon>check</mat-icon>
+      Search
+      <mat-icon iconPositionEnd>check</mat-icon>
+    </button>
   </section>
   <section>
     <button mat-button disabled>normal</button>
@@ -23,6 +29,12 @@ <h4 class="demo-section-header">Buttons</h4>
     <button mat-mini-fab disabled>
       <mat-icon>check</mat-icon>
     </button>
+    <button mat-fab extended disabled>Search</button>
+    <button mat-fab extended disabled>
+      <mat-icon>check</mat-icon>
+      Search
+      <mat-icon iconPositionEnd>check</mat-icon>
+    </button>
   </section>
 
   <h4 class="demo-section-header">Anchors</h4>
@@ -41,6 +53,7 @@ <h4 class="demo-section-header">Anchors</h4>
     <a href="//www.google.com" mat-fab extended>
       <mat-icon>check</mat-icon>
       Search
+      <mat-icon iconPositionEnd>check</mat-icon>
     </a>
   </section>
   <section>
@@ -58,6 +71,7 @@ <h4 class="demo-section-header">Anchors</h4>
     <a href="//www.google.com" disabled mat-fab extended>
       <mat-icon>check</mat-icon>
       Search
+      <mat-icon iconPositionEnd>check</mat-icon>
     </a>
   </section>
 
@@ -155,23 +169,6 @@ <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
     </button>
   </section>
 
-  <h4 class="demo-section-header">Extended Fab Buttons</h4>
-  <section>
-    <button mat-fab extended>Extended</button>
-    <button mat-fab extended color="primary">Extended</button>
-    <button mat-fab extended color="accent">Extended</button>
-    <button mat-fab extended color="warn">Extended</button>
-    <button mat-fab extended>
-      <mat-icon>home</mat-icon>
-      Extended
-    </button>
-    <button mat-fab extended>
-      <mat-icon>home</mat-icon>
-      Extended
-      <mat-icon iconPositionEnd>favorite</mat-icon>
-    </button>
-  </section>
-
   <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
   <section>
     <button mat-mini-fab>

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

@@ -6,7 +6,8 @@
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
 @mixin mat-private-button-interactive() {
-  .mdc-button__ripple::before, .mdc-button__ripple::after {
+  .mdc-button__ripple::before, .mdc-button__ripple::after,
+  .mdc-fab__ripple::before, .mdc-fab__ripple::after {
     content: '';
     pointer-events: none;
     position: absolute;
@@ -20,7 +21,7 @@
   }
 
   // The ripple container should match the bounds of the entire button.
-  .mat-mdc-button-ripple, .mdc-button__ripple {
+  .mat-mdc-button-ripple, .mdc-button__ripple, .mdc-fab__ripple {
     @include layout-common.fill;
 
     // Disable pointer events for the ripple container and state overlay because the container

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

@@ -12,6 +12,7 @@
 // ::after for state interactions (hover, active, focus). Their API calls this their
 // "ripple target", but we do not use it as our ripple, just state color.
 $mat-button-state-target: '.mdc-button__ripple';
+$mat-fab-state-target: '.mdc-fab__ripple';
 
 // Applies the disabled theme color to the text color.
 @mixin _mat-button-disabled-color() {
@@ -213,11 +214,11 @@ $mat-button-state-target: '.mdc-button__ripple';
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-fab, .mat-mdc-mini-fab {
       @include mdc-states(
-          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);
 
       &.mat-unthemed {
         @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
-          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);
         @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
           $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface,
@@ -226,23 +227,23 @@ $mat-button-state-target: '.mdc-button__ripple';
 
       &.mat-primary {
         @include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
+          $ripple-target: $mat-fab-state-target);
         @include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
         @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
+          $ripple-target: $mat-fab-state-target);
         @include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
         @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
+          $ripple-target: $mat-fab-state-target);
         @include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-error);

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

@@ -147,6 +147,8 @@ export class MatFabAnchor extends MatAnchor {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
+  _isFab = true;
+
   private _extended: boolean;
   get extended(): boolean { return this._extended; }
   set extended(value: boolean) { this._extended = coerceBooleanProperty(value); }
@@ -180,6 +182,8 @@ export class MatMiniFabAnchor extends MatAnchor {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
+  _isFab = true;
+
   constructor(
     elementRef: ElementRef, platform: Platform, ngZone: NgZone,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {