feat(material-experimental/mdc-button): fix ripples

Author: andrewseguin

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

@@ -17,7 +17,7 @@ import {
   CanDisableRippleCtor,
   mixinColor,
   mixinDisabled,
-  mixinDisableRipple,
+  mixinDisableRipple, RippleAnimationConfig,
   RippleRenderer,
   RippleTarget
 } from '@angular/material/core';
@@ -75,30 +75,23 @@ export const _MatButtonBaseMixin: CanDisableRippleCtor&CanDisableCtor&CanColorCt
 
 /** Base class for all buttons.  */
 export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, CanColor,
-                                                                  CanDisableRipple, OnChanges {
-  rippleTarget: RippleTarget = {
-    rippleConfig: {
-      animation: {
-        // TODO(mmalerba): Use the MDC constants once they are exported separately from the
-        // foundation. Grabbing them off the foundation prevents the foundation class from being
-        // tree-shaken. There is an open PR for this:
-        // https://github.com/material-components/material-components-web/pull/4593
-        enterDuration: 225 /* MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS */,
-        exitDuration: 150 /* MDCRippleFoundation.numbers.FG_DEACTIVATION_MS */,
-      },
-    },
-    rippleDisabled: false,
+                                                                  CanDisableRipple {
+  rippleAnimation: RippleAnimationConfig = {
+    // TODO(mmalerba): Use the MDC constants once they are exported separately from the
+    // foundation. Grabbing them off the foundation prevents the foundation class from being
+    // tree-shaken. There is an open PR for this:
+    // https://github.com/material-components/material-components-web/pull/4593
+    enterDuration: 225 /* MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS */,
+    exitDuration: 150 /* MDCRippleFoundation.numbers.FG_DEACTIVATION_MS */,
   };
 
-  /** The ripple renderer for the button. */
-  private _rippleRenderer =
-      new RippleRenderer(this.rippleTarget, this._ngZone, this._elementRef, this._platform);
+  /** Whether the ripple is centered on the button. */
+  isRippleCentered = false;
 
   constructor(
       elementRef: ElementRef, public _platform: Platform, public _ngZone: NgZone,
       public _animationMode?: string) {
     super(elementRef);
-    this._rippleRenderer.setupTriggerEvents(this._elementRef.nativeElement);
 
     // For each of the variant selectors that is present in the button's host
     // attributes, add the correct corresponding MDC classes.
@@ -109,12 +102,6 @@ export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, Ca
     }
   }
 
-  ngOnChanges(simpleChanges: SimpleChanges) {
-    if (simpleChanges['disableRipple'] || simpleChanges['disabled']) {
-      this.rippleTarget.rippleDisabled = this.disableRipple || this.disabled;
-    }
-  }
-
   /** Focuses the button. */
   focus(): void {
     this._elementRef.nativeElement.focus();
@@ -124,6 +111,14 @@ export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, Ca
   private _hasHostAttributes(...attributes: string[]) {
     return attributes.some(attribute => this._elementRef.nativeElement.hasAttribute(attribute));
   }
+
+  _getHostElement() {
+    return this._elementRef.nativeElement;
+  }
+
+  _isRippleDisabled() {
+    return this.disableRipple || this.disabled;
+  }
 }
 
 /** Shared inputs by buttons using the `<a>` tag */

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

@@ -5,3 +5,9 @@
 
 <ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]">
 </ng-content>
+
+<div matRipple class="mat-button-ripple"
+     [matRippleAnimation]="rippleAnimation"
+     [matRippleDisabled]="_isRippleDisabled()"
+     [matRippleCentered]="isRippleCentered"
+     [matRippleTrigger]="_getHostElement()"></div>

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

@@ -4,16 +4,7 @@
 
 @include mdc-button-without-ripple($query: $mat-base-styles-query);
 
-$_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;
-  }
-
   // Add an outline to make buttons more visible in high contrast mode. Stroked buttons
   // don't need a special look in high-contrast mode, because those already have an outline.
   @include cdk-high-contrast {

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

@@ -3,17 +3,6 @@
 
 @include mdc-fab-without-ripple($query: $mat-base-styles-query);
 
-$_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;
-  }
-}
-
 // 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/icon-button.scss

@@ -3,13 +3,7 @@
 
 @include mdc-icon-button-without-ripple($query: $mat-base-styles-query);
 
-$_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;
-  }
+.mat-mdc-icon-button {
+  // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
+  border-radius: 50%;
 }

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

@@ -40,12 +40,12 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIconButton extends MatButtonBase {
+  isRippleCentered = true;
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
-    this.rippleTarget.rippleConfig.centered = true;
-    this.rippleTarget.rippleConfig.radius = 24;
   }
 }
 
@@ -61,11 +61,11 @@ export class MatIconButton extends MatButtonBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIconAnchor extends MatAnchorBase {
+  isRippleCentered = true;
+
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
-    this.rippleTarget.rippleConfig.centered = true;
-    this.rippleTarget.rippleConfig.radius = 24;
   }
 }

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

@@ -8,13 +8,13 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatCommonModule} from '@angular/material/core';
+import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatAnchor, MatButton} from './button';
 import {MatFabAnchor, MatFabButton} from './fab';
 import {MatIconAnchor, MatIconButton} from './icon-button';
 
 @NgModule({
-  imports: [MatCommonModule, CommonModule],
+  imports: [MatCommonModule, CommonModule, MatRippleModule],
   exports: [
     MatAnchor,
     MatButton,