From 2cfe355258d4d1718ee9ec5f3fce1106df0b865d Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Wed, 17 Feb 2021 00:55:11 +0800
Subject: [PATCH] fix(material-experimental/mdc-button): add mdc ripple class
 for fab

---
 src/material-experimental/mdc-button/button-base.ts | 3 +++
 src/material-experimental/mdc-button/button.html    | 4 +++-
 src/material-experimental/mdc-button/fab.ts         | 4 ++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-button/button-base.ts b/src/material-experimental/mdc-button/button-base.ts
index 0d15cbdcc9c6..7b225d2b955c 100644
--- a/src/material-experimental/mdc-button/button-base.ts
+++ b/src/material-experimental/mdc-button/button-base.ts
@@ -101,6 +101,9 @@ export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, Ca
   /** Whether the ripple is centered on the button. */
   _isRippleCentered = false;
 
+  /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
+  _isFab = false;
+
   /** Reference to the MatRipple instance of the button. */
   @ViewChild(MatRipple) ripple: MatRipple;
 
diff --git a/src/material-experimental/mdc-button/button.html b/src/material-experimental/mdc-button/button.html
index ce5f8c040ad5..32b22df3a4b6 100644
--- a/src/material-experimental/mdc-button/button.html
+++ b/src/material-experimental/mdc-button/button.html
@@ -1,4 +1,6 @@
-<span class="mdc-button__ripple"></span>
+<span
+    [class.mdc-button__ripple]="!_isFab"
+    [class.mdc-fab__ripple]="_isFab"></span>
 
 <ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])">
 </ng-content>
diff --git a/src/material-experimental/mdc-button/fab.ts b/src/material-experimental/mdc-button/fab.ts
index b99f36f80ecc..4d53a9c6f1a3 100644
--- a/src/material-experimental/mdc-button/fab.ts
+++ b/src/material-experimental/mdc-button/fab.ts
@@ -63,6 +63,8 @@ export class MatFabButton extends MatButtonBase {
   // 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); }
@@ -95,6 +97,8 @@ export class MatMiniFabButton extends MatButtonBase {
   // 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) {