feat(material/menu): enhance menu item component with interactive disabled state

goldens/material/menu/index.api.md

@@ -151,6 +151,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     constructor(...args: unknown[]);
     _checkDisabled(event: Event): void;
     disabled: boolean;
+    disabledInteractive: boolean;
     disableRipple: boolean;
     focus(origin?: FocusOrigin, options?: FocusOptions): void;
     readonly _focused: Subject<MatMenuItem>;
@@ -165,6 +166,8 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_disabledInteractive: unknown;
+    // (undocumented)
     static ngAcceptInputType_disableRipple: unknown;
     // (undocumented)
     ngAfterViewInit(): void;
@@ -179,7 +182,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     _setTriggersSubmenu(triggersSubmenu: boolean): void;
     _triggersSubmenu: boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuItem, never>;
 }

src/dev-app/menu/BUILD.bazel

@@ -13,10 +13,12 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/material/button",
+        "//src/material/checkbox",
         "//src/material/divider",
         "//src/material/icon",
         "//src/material/menu",
         "//src/material/toolbar",
+        "//src/material/tooltip",
     ],
 )
 

src/dev-app/menu/menu-demo.html

@@ -10,7 +10,12 @@
 
     <mat-menu #menu="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item (click)="select(item.text)" [disabled]="item.disabled">
+        <button
+          mat-menu-item
+          (click)="select(item.text)"
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive"
+          [matTooltip]="item.tooltipText">
           {{ item.text }}
         </button>
       }
@@ -27,7 +32,12 @@
 
     <mat-menu #divider="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
         @if (!$last) {
           <mat-divider></mat-divider>
         }
@@ -98,16 +108,18 @@
 
     <mat-menu #anchorMenu="matMenu">
       @for (item of items; track item) {
-        <a mat-menu-item href="https://www.google.com" [disabled]="item.disabled">
+        <a
+          mat-menu-item
+          href="https://www.google.com"
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
           {{ item.text }}
         </a>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position x: before
-    </p>
+    <p>Position x: before</p>
     <mat-toolbar class="demo-end-icon">
       <button matIconButton [matMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
         <mat-icon>more_vert</mat-icon>
@@ -116,17 +128,18 @@
 
     <mat-menu xPosition="before" #posXMenu="matMenu">
       @for (item of iconItems; track item) {
-        <button mat-menu-item [disabled]="item.disabled">
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
           <mat-icon>{{ item.icon }}</mat-icon>
           {{ item.text }}
         </button>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position y: above
-    </p>
+    <p>Position y: above</p>
     <mat-toolbar>
       <button matIconButton [matMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
         <mat-icon>more_vert</mat-icon>
@@ -135,7 +148,12 @@
 
     <mat-menu yPosition="above" #posYMenu="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
       }
     </mat-menu>
   </div>
@@ -153,14 +171,17 @@
 
     <mat-menu [overlapTrigger]="true" #menuOverlay="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position x: before, overlapTrigger: true
-    </p>
+    <p>Position x: before, overlapTrigger: true</p>
     <mat-toolbar class="demo-end-icon">
       <button matIconButton [mat-menu-trigger-for]="posXMenuOverlay">
         <mat-icon>more_vert</mat-icon>
@@ -169,17 +190,18 @@
 
     <mat-menu xPosition="before" [overlapTrigger]="true" #posXMenuOverlay="matMenu">
       @for (item of iconItems; track item) {
-        <button mat-menu-item [disabled]="item.disabled">
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
           <mat-icon>{{ item.icon }}</mat-icon>
           {{ item.text }}
         </button>
       }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
-    <p>
-      Position y: above, overlapTrigger: true
-    </p>
+    <p>Position y: above, overlapTrigger: true</p>
     <mat-toolbar>
       <button matIconButton [mat-menu-trigger-for]="posYMenuOverlay">
         <mat-icon>more_vert</mat-icon>
@@ -188,10 +210,18 @@
 
     <mat-menu yPosition="above" [overlapTrigger]="true" #posYMenuOverlay="matMenu">
       @for (item of items; track item) {
-        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          [disabledInteractive]="disabledInteractive">
+          {{ item.text }}
+        </button>
       }
     </mat-menu>
   </div>
 </div>
+<div>
+  <mat-checkbox [(ngModel)]="disabledInteractive">Disabled interactive</mat-checkbox>
+</div>
 
 <div style="height: 500px">This div is for testing scrolled menus.</div>

src/dev-app/menu/menu-demo.ts

@@ -7,31 +7,53 @@
  */
 
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltip} from '@angular/material/tooltip';
 
 @Component({
   selector: 'menu-demo',
   templateUrl: 'menu-demo.html',
   styleUrl: 'menu-demo.css',
-  imports: [MatMenuModule, MatButtonModule, MatToolbarModule, MatIconModule, MatDividerModule],
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDividerModule,
+    MatIconModule,
+    MatMenuModule,
+    MatToolbarModule,
+    MatTooltip,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuDemo {
   selected = '';
+  disabledInteractive = false;
+
   items = [
     {text: 'Refresh'},
     {text: 'Settings'},
-    {text: 'Help', disabled: true},
+    {
+      text: 'Help',
+      disabled: true,
+      tooltipText: 'This is a menu item tooltip!',
+    },
     {text: 'Sign Out'},
   ];
 
   iconItems = [
     {text: 'Redial', icon: 'dialpad'},
-    {text: 'Check voicemail', icon: 'voicemail', disabled: true},
+    {
+      text: 'Check voicemail',
+      icon: 'voicemail',
+      disabled: true,
+    },
     {text: 'Disable alerts', icon: 'notifications_off'},
   ];
 

src/material/menu/_m2-menu.scss

@@ -31,13 +31,16 @@ $prefix: (mat, menu);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
     if($is-dark, 0.08, 0.04));
+  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
   $text-color: inspection.get-theme-color($theme, foreground, text);
 
   @return (
     item-label-text-color: $text-color,
     item-icon-color: $text-color,
     item-hover-state-layer-color: $active-state-layer-color,
+    item-disabled-hover-state-layer-color: $disabled-background,
     item-focus-state-layer-color: $active-state-layer-color,
+    item-disabled-focus-state-layer-color: $disabled-background,
     container-color: inspection.get-theme-color($theme, background, card),
     divider-color: inspection.get-theme-color($theme, foreground, divider),
   );

src/material/menu/_m3-menu.scss

@@ -26,10 +26,18 @@ $prefix: (mat, menu);
         map.get($systems, md-sys-color, on-surface),
         $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
       ),
+      item-disabled-hover-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.38
+      ),
       item-focus-state-layer-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface),
         $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
       ),
+      item-disabled-focus-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.38
+      ),
       item-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),
       item-leading-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),
       item-trailing-spacing: m3-utils.hardcode(12px, $exclude-hardcoded),

src/material/menu/menu-item.ts

@@ -37,8 +37,9 @@ import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
     '[class.mat-mdc-menu-item-highlighted]': '_highlighted',
     '[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu',
     '[attr.tabindex]': '_getTabIndex()',
-    '[attr.aria-disabled]': 'disabled',
+    '[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
     '[attr.disabled]': 'disabled || null',
+    '[class.mat-mdc-menu-item-disabled-interactive]': 'disabledInteractive',
     '(click)': '_checkDisabled($event)',
     '(mouseenter)': '_handleMouseEnter()',
   },
@@ -63,6 +64,10 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
   /** Whether ripples are disabled on the menu item. */
   @Input({transform: booleanAttribute}) disableRipple: boolean = false;
 
+  /** Whether the menu item should remain interactive when it is disabled. */
+  @Input({transform: booleanAttribute})
+  disabledInteractive: boolean = false;
+
   /** Stream that emits when the menu item is hovered. */
   readonly _hovered: Subject<MatMenuItem> = new Subject<MatMenuItem>();
 
@@ -117,7 +122,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
 
   /** Used to set the `tabindex`. */
   _getTabIndex(): string {
-    return this.disabled ? '-1' : '0';
+    return this.disabled && !this.disabledInteractive ? '-1' : '0';
   }
 
   /** Returns the host DOM element. */

src/material/menu/menu.scss

@@ -165,7 +165,9 @@ mat-menu {
     // The class selector isn't specific enough to overide the link pseudo selectors so we need
     // to target them specifically, otherwise the item color might be overwritten by the user
     // agent resets of the app.
-    &, &:visited, &:link {
+    &,
+    &:visited,
+    &:link {
       color: token-utils.slot(item-label-text-color);
     }
 
@@ -192,6 +194,19 @@ mat-menu {
       bottom: 0;
       right: 0;
     }
+    @include token-utils.use-tokens($token-prefix, $token-slots) {
+      &.mat-mdc-menu-item-disabled-interactive {
+        &:hover {
+          background-color: token-utils.slot(item-disabled-hover-state-layer-color);
+        }
+
+        &.cdk-program-focused,
+        &.cdk-keyboard-focused,
+        &.mat-mdc-menu-item-highlighted {
+          background-color: token-utils.slot(item-disabled-focus-state-layer-color);
+        }
+      }
+    }
   }
 
   // Inherited from MDC and necessary for some internal tests.