From 2f12c7ebedbb4881c3bdf696d45c9543dcd32b2d Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 22 Feb 2018 22:22:21 +0100
Subject: [PATCH] feat(menu): allow for backdrop class to be customized

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

Fixes #10062.
---
 src/lib/menu/menu-directive.ts |  6 ++++++
 src/lib/menu/menu-module.ts    |  1 +
 src/lib/menu/menu-panel.ts     |  1 +
 src/lib/menu/menu-trigger.ts   |  2 +-
 src/lib/menu/menu.spec.ts      | 22 +++++++++++++++++++++-
 5 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index a88cfae94061..ecfd8830c77a 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/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; }
diff --git a/src/lib/menu/menu-module.ts b/src/lib/menu/menu-module.ts
index bbb6d3660ed7..e14bafe4cc0f 100644
--- a/src/lib/menu/menu-module.ts
+++ b/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'
       },
     }
   ],
diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts
index e96a5c838319..ea67b3e569e3 100644
--- a/src/lib/menu/menu-panel.ts
+++ b/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;
 }
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index c680cfbf338b..69744b0cbb57 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/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()
     });
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 710bbe26802b..78b74cf11b38 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/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({