refactor(multiple): clean up ripple overrides in MDC components (#23376)

Now that the default ripple timings have been aligned to MDC, we don't have to make any overrides in the various MDC components.

Author: crisbeto

src/material-experimental/mdc-button/BUILD.bazel

@@ -28,7 +28,6 @@ ng_module(
     deps = [
         "//src/cdk/platform",
         "//src/material-experimental/mdc-core",
-        "@npm//@material/ripple",
     ],
 )
 

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

@@ -17,9 +17,7 @@ import {
   mixinColor,
   mixinDisabled,
   mixinDisableRipple,
-  RippleAnimationConfig
 } from '@angular/material-experimental/mdc-core';
-import {numbers} from '@material/ripple';
 import {FocusOrigin} from '@angular/cdk/a11y';
 
 /** Inputs common to all buttons. */
@@ -38,12 +36,6 @@ export const MAT_BUTTON_HOST = {
   '[class.mat-mdc-button-base]': 'true',
 };
 
-/** Configuration for the ripple animation. */
-const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
-  enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-  exitDuration: numbers.FG_DEACTIVATION_MS
-};
-
 /** List of classes to add to buttons instances based on host attribute selector. */
 const HOST_SELECTOR_MDC_CLASS_PAIR: {selector: string, mdcClasses: string[]}[] = [
   {
@@ -86,12 +78,6 @@ export const _MatButtonMixin = mixinColor(mixinDisabled(mixinDisableRipple(class
 @Directive()
 export class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor,
                                                               CanDisableRipple {
-  /** The ripple animation configuration to use for the buttons. */
-  _rippleAnimation: RippleAnimationConfig =
-      this._animationMode === 'NoopAnimations' ?
-          {enterDuration: 0, exitDuration: 0} :
-          RIPPLE_ANIMATION_CONFIG;
-
   /** Whether the ripple is centered on the button. */
   _isRippleCentered = false;
 

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

@@ -17,7 +17,6 @@
 <span class="mat-mdc-focus-indicator"></span>
 
 <span matRipple class="mat-mdc-button-ripple"
-     [matRippleAnimation]="_rippleAnimation"
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="_isRippleCentered"
      [matRippleTrigger]="_elementRef.nativeElement"></span>

src/material-experimental/mdc-checkbox/BUILD.bazel

@@ -29,7 +29,6 @@ ng_module(
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@material/checkbox",
-        "@npm//@material/ripple",
     ],
 )
 

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

@@ -35,8 +35,7 @@
     <div class="mat-mdc-checkbox-ripple mat-mdc-focus-indicator" mat-ripple
       [matRippleTrigger]="checkbox"
       [matRippleDisabled]="disableRipple || disabled"
-      [matRippleCentered]="true"
-      [matRippleAnimation]="_rippleAnimation"></div>
+      [matRippleCentered]="true"></div>
   </div>
   <label #label
          [for]="inputId"

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -30,7 +30,6 @@ import {
   MatCheckboxDefaultOptions, MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY
 } from '@angular/material/checkbox';
 import {
-  RippleAnimationConfig,
   mixinColor,
   mixinDisabled,
   CanColor,
@@ -39,7 +38,6 @@ import {
 } from '@angular/material-experimental/mdc-core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {MDCCheckboxAdapter, MDCCheckboxFoundation} from '@material/checkbox';
-import {numbers} from '@material/ripple';
 
 let nextUniqueId = 0;
 
@@ -66,13 +64,6 @@ const _MatCheckboxBase = mixinColor(mixinDisabled(class {
   constructor(public _elementRef: ElementRef) {}
 }));
 
-
-/** Configuration for the ripple animation. */
-const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
-  enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-  exitDuration: numbers.FG_DEACTIVATION_MS,
-};
-
 @Component({
   selector: 'mat-checkbox',
   templateUrl: 'checkbox.html',
@@ -197,9 +188,6 @@ export class MatCheckbox extends _MatCheckboxBase implements AfterViewInit, OnDe
   /** The set of classes that should be applied to the native input. */
   _classes: {[key: string]: boolean} = {'mdc-checkbox__native-control': true};
 
-  /** Animation config for the ripple. */
-  _rippleAnimation = RIPPLE_ANIMATION_CONFIG;
-
   /** ControlValueAccessor onChange */
   private _cvaOnChange = (_: boolean) => {};
 

src/material-experimental/mdc-chips/BUILD.bazel

@@ -27,7 +27,6 @@ ng_module(
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@material/chips",
-        "@npm//@material/ripple",
     ],
 )
 

src/material-experimental/mdc-chips/chip-option.html

@@ -1,7 +1,6 @@
 <span class="mdc-chip__ripple"></span>
 
 <span matRipple class="mat-mdc-chip-ripple"
-     [matRippleAnimation]="_rippleAnimation"
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="_isRippleCentered"
      [matRippleTrigger]="_elementRef.nativeElement"></span>

src/material-experimental/mdc-chips/chip-row.html

@@ -2,7 +2,6 @@
   <span class="mdc-chip__ripple"></span>
 
   <span matRipple class="mat-mdc-chip-ripple"
-       [matRippleAnimation]="_rippleAnimation"
        [matRippleDisabled]="_isRippleDisabled()"
        [matRippleCentered]="_isRippleCentered"
        [matRippleTrigger]="_elementRef.nativeElement"></span>
@@ -29,4 +28,4 @@
   <ng-template #defaultMatChipEditInput>
     <span matChipEditInput></span>
   </ng-template>
-</div>
+</div>

src/material-experimental/mdc-chips/chip.html

@@ -1,7 +1,6 @@
 <span class="mdc-chip__ripple"></span>
 
 <span matRipple class="mat-mdc-chip-ripple"
-     [matRippleAnimation]="_rippleAnimation"
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="_isRippleCentered"
      [matRippleTrigger]="_elementRef.nativeElement"></span>

src/material-experimental/mdc-chips/chip.ts

@@ -39,11 +39,9 @@ import {
   mixinColor,
   mixinDisableRipple,
   mixinTabIndex,
-  RippleAnimationConfig,
   RippleGlobalOptions,
 } from '@angular/material-experimental/mdc-core';
 import {deprecated} from '@material/chips';
-import {numbers} from '@material/ripple';
 import {SPACE, ENTER, hasModifierKey} from '@angular/cdk/keycodes';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -64,12 +62,6 @@ export interface MatChipEvent {
   chip: MatChip;
 }
 
-/** Configuration for the ripple animation. */
-const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
-  enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-  exitDuration: numbers.FG_DEACTIVATION_MS
-};
-
 /**
  * Directive to add MDC CSS to non-basic chips.
  * @docs-private
@@ -120,9 +112,6 @@ const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBas
 })
 export class MatChip extends _MatChipMixinBase implements AfterContentInit, AfterViewInit,
   CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
-  /** The ripple animation configuration to use for the chip. */
-  readonly _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
-
   /** Whether the ripple is centered on the chip. */
   readonly _isRippleCentered = false;
 

src/material-experimental/mdc-list/BUILD.bazel

@@ -32,7 +32,6 @@ ng_module(
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@material/list",
-        "@npm//@material/ripple",
     ],
 )
 

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

@@ -30,7 +30,6 @@ import {
   setLines,
 } from '@angular/material-experimental/mdc-core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {numbers} from '@material/ripple';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 import {MatListAvatarCssMatStyler, MatListIconCssMatStyler} from './list-styling';
@@ -97,20 +96,10 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
                   globalRippleOptions?: RippleGlobalOptions,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
-    // We have to clone the object, because we don't want to mutate a global value when we assign
-    // the `animation` further down. The downside of doing this is that the ripple renderer won't
-    // pick up dynamic changes to `disabled`, but it's not something we officially support.
-    this.rippleConfig = {...(globalRippleOptions || {})};
+    this.rippleConfig = globalRippleOptions || {};
     this._hostElement = this._elementRef.nativeElement;
     this._noopAnimations = animationMode === 'NoopAnimations';
 
-    if (!this.rippleConfig.animation) {
-      this.rippleConfig.animation = {
-        enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-        exitDuration: numbers.FG_DEACTIVATION_MS
-      };
-    }
-
     if (!this._listBase._isNonInteractive) {
       this._initInteractiveListItem();
     }

src/material-experimental/mdc-menu/BUILD.bazel

@@ -28,7 +28,6 @@ ng_module(
         "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
-        "@npm//@material/ripple",
     ],
 )
 

src/material-experimental/mdc-menu/menu-item.html

@@ -2,8 +2,7 @@
 <span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
 <div class="mat-mdc-menu-ripple" matRipple
      [matRippleDisabled]="disableRipple || disabled"
-     [matRippleTrigger]="_getHostElement()"
-     [matRippleAnimation]="(disableRipple || disabled || _noopAnimations) ? {} : _rippleAnimation">
+     [matRippleTrigger]="_getHostElement()">
 </div>
 <svg
   *ngIf="_triggersSubmenu"

src/material-experimental/mdc-menu/menu-item.ts

@@ -6,25 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Component,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  Inject,
-  ElementRef,
-  Optional,
-  ChangeDetectorRef,
-} from '@angular/core';
-import {
-  MAT_RIPPLE_GLOBAL_OPTIONS,
-  RippleAnimationConfig,
-  RippleGlobalOptions,
-} from '@angular/material-experimental/mdc-core';
-import {MatMenuItem as BaseMatMenuItem, MatMenuPanel, MAT_MENU_PANEL} from '@angular/material/menu';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {FocusMonitor} from '@angular/cdk/a11y';
-import {DOCUMENT} from '@angular/common';
-import {numbers} from '@material/ripple';
+import {Component, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+import {MatMenuItem as BaseMatMenuItem} from '@angular/material/menu';
 
 /**
  * Single item inside of a `mat-menu`. Provides the menu item styling and accessibility treatment.
@@ -53,24 +36,4 @@ import {numbers} from '@material/ripple';
     {provide: BaseMatMenuItem, useExisting: MatMenuItem},
   ]
 })
-export class MatMenuItem extends BaseMatMenuItem {
-  _rippleAnimation: RippleAnimationConfig;
-  _noopAnimations: boolean;
-
-  constructor(elementRef: ElementRef<HTMLElement>,
-    @Inject(DOCUMENT) document?: any,
-    focusMonitor?: FocusMonitor,
-    @Inject(MAT_MENU_PANEL) @Optional() parentMenu?: MatMenuPanel<unknown>,
-    @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
-      globalRippleOptions?: RippleGlobalOptions,
-    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
-    changeDetectorRef?: ChangeDetectorRef) {
-    super(elementRef, document, focusMonitor, parentMenu, changeDetectorRef);
-
-    this._noopAnimations = animationMode === 'NoopAnimations';
-    this._rippleAnimation = globalRippleOptions?.animation || {
-      enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-      exitDuration: numbers.FG_DEACTIVATION_MS
-    };
-  }
-}
+export class MatMenuItem extends BaseMatMenuItem {}

src/material-experimental/mdc-radio/BUILD.bazel

@@ -26,7 +26,6 @@ ng_module(
         "//src/material/radio",
         "@npm//@angular/forms",
         "@npm//@material/radio",
-        "@npm//@material/ripple",
     ],
 )
 

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

@@ -23,8 +23,7 @@
     <div mat-ripple class="mat-radio-ripple mat-mdc-focus-indicator"
          [matRippleTrigger]="formField"
          [matRippleDisabled]="_isRippleDisabled()"
-         [matRippleCentered]="true"
-         [matRippleAnimation]="_rippleAnimation">
+         [matRippleCentered]="true">
       <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
     </div>
   </div>

src/material-experimental/mdc-radio/radio.ts

@@ -34,8 +34,6 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
-import {RippleAnimationConfig} from '@angular/material-experimental/mdc-core';
-import {numbers} from '@material/ripple';
 
 // Re-export symbols used by the base Material radio component so that users do not need to depend
 // on both packages.
@@ -60,12 +58,6 @@ export const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = {
 export const MAT_RADIO_GROUP =
   new InjectionToken<_MatRadioGroupBase<_MatRadioButtonBase>>('MatRadioGroup');
 
-/** Configuration for the ripple animation. */
-const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
-  enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-  exitDuration: numbers.FG_DEACTIVATION_MS
-};
-
 /**
  * A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
  */
@@ -126,9 +118,6 @@ export class MatRadioButton extends _MatRadioButtonBase implements AfterViewInit
     },
   };
 
-  /** Configuration for the underlying ripple. */
-  _rippleAnimation: RippleAnimationConfig;
-
   _radioFoundation = new MDCRadioFoundation(this._radioAdapter);
   _classes: {[key: string]: boolean} = {};
 
@@ -143,8 +132,6 @@ export class MatRadioButton extends _MatRadioButtonBase implements AfterViewInit
               @Attribute('tabindex') tabIndex?: string) {
     super(radioGroup, elementRef, _changeDetector, _focusMonitor,
         _radioDispatcher, animationMode, _providerOverride, tabIndex);
-    this._rippleAnimation =
-        this._noopAnimations ? {enterDuration: 0, exitDuration: 0} : RIPPLE_ANIMATION_CONFIG;
   }
 
   override ngAfterViewInit() {

src/material-experimental/mdc-slide-toggle/BUILD.bazel

@@ -29,7 +29,6 @@ ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
-        "@npm//@material/ripple",
         "@npm//@material/switch",
     ],
 )

src/material-experimental/mdc-slide-toggle/slide-toggle.html

@@ -26,8 +26,7 @@
           <div class="mat-mdc-slide-toggle-ripple mat-mdc-focus-indicator" mat-ripple
             [matRippleTrigger]="switch"
             [matRippleDisabled]="disableRipple || disabled"
-            [matRippleCentered]="true"
-            [matRippleAnimation]="_rippleAnimation"></div>
+            [matRippleCentered]="true"></div>
         </div>
         <div class="mdc-switch__icons">
           <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">