fix(material-experimental/mdc-radio): use consistent ripple timings (#18590)

- Switches the MDC-based radio button to use the ripple timings from MDC, rather than a hardcoded one.
- Reworks the rest of the MDC-based components so that they don't re-create the ripple config object for each instance. It's not a huge improvement, there's no need for it to consume extra memory.

Author: crisbeto

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

@@ -38,6 +38,12 @@ export const MAT_BUTTON_HOST = {
   'class': 'mat-mdc-focus-indicator',
 };
 
+/** 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[]}[] = [
   {
@@ -84,10 +90,7 @@ export const _MatButtonBaseMixin: CanDisableRippleCtor&CanDisableCtor&CanColorCt
 export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, CanColor,
                                                                   CanDisableRipple {
   /** The ripple animation configuration to use for the buttons. */
-  _rippleAnimation: RippleAnimationConfig = {
-    enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-    exitDuration: numbers.FG_DEACTIVATION_MS
-  };
+  _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
 
   /** Whether the ripple is centered on the button. */
   _isRippleCentered = false;

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

@@ -31,7 +31,7 @@ import {
   MAT_CHECKBOX_DEFAULT_OPTIONS,
   MatCheckboxClickAction, MatCheckboxDefaultOptions
 } from '@angular/material/checkbox';
-import {ThemePalette} from '@angular/material/core';
+import {ThemePalette, RippleAnimationConfig} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {MDCCheckboxAdapter, MDCCheckboxFoundation} from '@material/checkbox';
 import {numbers} from '@material/ripple';
@@ -52,6 +52,12 @@ export class MatCheckboxChange {
   checked: boolean;
 }
 
+/** 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',
@@ -185,10 +191,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   _classes: {[key: string]: boolean} = {'mdc-checkbox__native-control': true};
 
   /** Animation config for the ripple. */
-  _rippleAnimation = {
-    enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-    exitDuration: numbers.FG_DEACTIVATION_MS,
-  };
+  _rippleAnimation = RIPPLE_ANIMATION_CONFIG;
 
   /** ControlValueAccessor onChange */
   private _cvaOnChange = (_: boolean) => {};

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

@@ -58,6 +58,12 @@ 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
@@ -114,10 +120,7 @@ const _MatChipMixinBase:
 export class MatChip extends _MatChipMixinBase implements AfterContentInit, AfterViewInit,
   CanColor, CanDisableRipple, HasTabIndex, OnDestroy {
   /** The ripple animation configuration to use for the chip. */
-  readonly _rippleAnimation: RippleAnimationConfig = {
-    enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-    exitDuration: numbers.FG_DEACTIVATION_MS
-  };
+  readonly _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
 
   /** Whether the ripple is centered on the chip. */
   readonly _isRippleCentered = false;

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

@@ -25,6 +25,7 @@ ng_module(
         "//src/material/radio",
         "@npm//@angular/forms",
         "@npm//@material/radio",
+        "@npm//@material/ripple",
     ],
 )
 
@@ -71,6 +72,7 @@ ng_test_library(
 ng_web_test_suite(
     name = "unit_tests",
     static_files = [
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
         "@npm//:node_modules/@material/radio/dist/mdc.radio.js",
     ],
     deps = [

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

@@ -24,7 +24,7 @@
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleCentered]="true"
          [matRippleRadius]="20"
-         [matRippleAnimation]="{enterDuration: 150}">
+         [matRippleAnimation]="_rippleAnimation">
       <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
     </div>
   </div>

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

@@ -32,6 +32,8 @@ 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/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.
@@ -48,6 +50,11 @@ export const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = {
   multi: true
 };
 
+/** 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.
@@ -108,6 +115,9 @@ export class MatRadioButton extends BaseMatRadioButton implements AfterViewInit,
     },
   };
 
+  /** Configuration for the underlying ripple. */
+  _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
+
   _radioFoundation = new MDCRadioFoundation(this._radioAdapter);
   _classes: {[key: string]: boolean} = {};
 

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

@@ -42,6 +42,12 @@ import {
 // Increasing integer for generating unique ids for slide-toggle components.
 let nextUniqueId = 0;
 
+/** Configuration for the ripple animation. */
+const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
+  enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
+  exitDuration: numbers.FG_DEACTIVATION_MS,
+};
+
 /** @docs-private */
 export const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -104,10 +110,7 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   _focused: boolean;
 
   /** Configuration for the underlying ripple. */
-  _rippleAnimation: RippleAnimationConfig = {
-    enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
-    exitDuration: numbers.FG_DEACTIVATION_MS,
-  };
+  _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
 
   /** The color palette  for this slide toggle. */
   @Input() color: ThemePalette = 'accent';