fix(material-experimental/mdc-button): add mdc ripple class for fab (#21923)

(cherry picked from commit 088a756)

Author: annieyw

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;
 

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>

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) {