feat(menu): allow for backdrop class to be customized (#10097)

Allows for the backdrop class of a menu to be overwritten.

Fixes #10062.

Author: crisbeto

src/lib/menu/menu-directive.ts

@@ -55,6 +55,9 @@ export interface MatMenuDefaultOptions {
 
   /** Whether the menu should overlap the menu trigger. */
   overlapTrigger: boolean;
+
+  /** Class to be applied to the menu's backdrop. */
+  backdropClass: string;
 }
 
 /** Injection token to be used to override the default options for `mat-menu`. */
@@ -103,6 +106,9 @@ export class MatMenu implements OnInit, AfterContentInit, MatMenuPanel, OnDestro
   /** Layout direction of the menu. */
   direction: Direction;
 
+  /** Class to be added to the backdrop element. */
+  @Input() backdropClass: string = this._defaultOptions.backdropClass;
+
   /** Position of the menu in the X axis. */
   @Input()
   get xPosition(): MenuPositionX { return this._xPosition; }

src/lib/menu/menu-module.ts

@@ -37,6 +37,7 @@ import {MatMenuContent} from './menu-content';
         overlapTrigger: true,
         xPosition: 'after',
         yPosition: 'below',
+        backdropClass: 'cdk-overlay-transparent-backdrop'
       },
     }
   ],

src/lib/menu/menu-panel.ts

@@ -29,4 +29,5 @@ export interface MatMenuPanel {
   setPositionClasses: (x: MenuPositionX, y: MenuPositionY) => void;
   setElevation?(depth: number): void;
   lazyContent?: MatMenuContent;
+  backdropClass?: string;
 }

src/lib/menu/menu-trigger.ts

@@ -340,7 +340,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     return new OverlayConfig({
       positionStrategy: this._getPosition(),
       hasBackdrop: !this.triggersSubmenu(),
-      backdropClass: 'cdk-overlay-transparent-backdrop',
+      backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
       direction: this.dir,
       scrollStrategy: this._scrollStrategy()
     });

src/lib/menu/menu.spec.ts

@@ -130,6 +130,20 @@ describe('MatMenu', () => {
     expect(document.activeElement).toBe(triggerEl);
   }));
 
+  it('should be able to set a custom class on the backdrop', fakeAsync(() => {
+    const fixture = TestBed.createComponent(SimpleMenu);
+
+    fixture.componentInstance.backdropClass = 'custom-backdrop';
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const backdrop = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-backdrop');
+
+    expect(backdrop.classList).toContain('custom-backdrop');
+  }));
+
   it('should restore focus to the root trigger when the menu was opened by mouse', fakeAsync(() => {
     const fixture = TestBed.createComponent(SimpleMenu);
     fixture.detectChanges();
@@ -1336,7 +1350,12 @@ describe('MatMenu default overrides', () => {
 @Component({
   template: `
     <button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
-    <mat-menu class="custom-one custom-two" #menu="matMenu" (closed)="closeCallback($event)">
+    <mat-menu
+      #menu="matMenu"
+      class="custom-one custom-two"
+      (closed)="closeCallback($event)"
+      [backdropClass]="backdropClass">
+
       <button mat-menu-item> Item </button>
       <button mat-menu-item disabled> Disabled </button>
       <button mat-menu-item disableRipple>
@@ -1352,6 +1371,7 @@ class SimpleMenu {
   @ViewChild(MatMenu) menu: MatMenu;
   @ViewChildren(MatMenuItem) items: QueryList<MatMenuItem>;
   closeCallback = jasmine.createSpy('menu closed callback');
+  backdropClass: string;
 }
 
 @Component({