fix(material-experimental/mdc-menu): align ripple timings with MDC (#23015)

Aligns the timings for the MDC-based menu item with MDC.

Author: crisbeto

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

@@ -29,6 +29,7 @@ ng_module(
         "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@material/ripple",
     ],
 )
 
@@ -77,8 +78,12 @@ ng_test_library(
 
 ng_web_test_suite(
     name = "unit_tests",
+    static_files = [
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
+    ],
     deps = [
         ":menu_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
     ],
 )
 

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

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

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

@@ -6,8 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
-import {MatMenuItem as BaseMatMenuItem} from '@angular/material/menu';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  Inject,
+  ElementRef,
+  Optional,
+} 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';
 
 /**
  * Single item inside of a `mat-menu`. Provides the menu item styling and accessibility treatment.
@@ -37,4 +53,22 @@ import {MatMenuItem as BaseMatMenuItem} from '@angular/material/menu';
   ]
 })
 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) {
+    super(elementRef, document, focusMonitor, parentMenu);
+
+    this._noopAnimations = animationMode === 'NoopAnimations';
+    this._rippleAnimation = globalRippleOptions?.animation || {
+      enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
+      exitDuration: numbers.FG_DEACTIVATION_MS
+    };
+  }
 }

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

@@ -27,6 +27,9 @@ ng_test_library(
 
 ng_web_test_suite(
     name = "unit_tests",
+    static_files = [
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
+    ],
     deps = [
         ":unit_tests_lib",
         "//src/material-experimental:mdc_require_config.js",