fix(material-experimental/mdc-list): align ripple timings with MDC (#…

…22396) Uses the ripple timing values from MDC for our implementation so that it's consistent with the spec. (cherry picked from commit 4ad2d96)
angular · Apr 7, 2021 · 1e8de9c · 1e8de9c
1 parent a140c46
commit 1e8de9c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/src/material-experimental/mdc-list/BUILD.bazel b/src/material-experimental/mdc-list/BUILD.bazel
@@ -33,6 +33,7 @@ ng_module(
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@material/list",
+        "@npm//@material/ripple",
     ],
 )
 
@@ -92,6 +93,7 @@ ng_web_test_suite(
     name = "unit_tests",
     static_files = [
         "@npm//:node_modules/@material/list/dist/mdc.list.js",
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
     ],
     deps = [
         ":list_tests_lib",

diff --git a/src/material-experimental/mdc-list/list-base.ts b/src/material-experimental/mdc-list/list-base.ts
@@ -29,6 +29,7 @@ import {
   RippleTarget,
   setLines,
 } from '@angular/material-experimental/mdc-core';
+import {numbers} from '@material/ripple';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 import {MatListAvatarCssMatStyler, MatListIconCssMatStyler} from './list-styling';
@@ -90,8 +91,18 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
               private _listBase: MatListBase, private _platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
                   globalRippleOptions?: RippleGlobalOptions) {
+    // 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._hostElement = this._elementRef.nativeElement;
-    this.rippleConfig = globalRippleOptions || {};
+
+    if (!this.rippleConfig.animation) {
+      this.rippleConfig.animation = {
+        enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
+        exitDuration: numbers.FG_DEACTIVATION_MS
+      };
+    }
 
     if (!this._listBase._isNonInteractive) {
       this._initInteractiveListItem();

diff --git a/src/material-experimental/mdc-list/testing/BUILD.bazel b/src/material-experimental/mdc-list/testing/BUILD.bazel
@@ -40,6 +40,7 @@ ng_web_test_suite(
     name = "unit_tests",
     static_files = [
         "@npm//:node_modules/@material/list/dist/mdc.list.js",
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
     ],
     deps = [
         ":unit_tests_lib",