feat(menu): add input to add overlay pane classes

Author: andrewseguin

src/material/menu/menu-panel.ts

@@ -36,6 +36,7 @@ export interface MatMenuPanel<T = any> {
   setElevation?(depth: number): void;
   lazyContent?: MatMenuContent;
   backdropClass?: string;
+  overlayPanelClass?: string|string[];
   hasBackdrop?: boolean;
   readonly panelId?: string;
 

src/material/menu/menu-trigger.ts

@@ -405,6 +405,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
           .withLockedPosition()
           .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'),
       backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
+      panelClass: this.menu.overlayPanelClass,
       scrollStrategy: this._scrollStrategy(),
       direction: this._dir
     });

src/material/menu/menu.spec.ts

@@ -245,6 +245,36 @@ describe('MatMenu', () => {
     expect(backdrop.classList).toContain('custom-backdrop');
   }));
 
+  it('should be able to set a custom class on the overlay panel', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+
+    fixture.componentInstance.overlayPanelClass = 'custom-panel-class';
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const overlayPane = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-pane');
+
+    expect(overlayPane.classList).toContain('custom-panel-class');
+  }));
+
+
+  it('should be able to set a custom classes on the overlay panel', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+
+    fixture.componentInstance.overlayPanelClass = ['custom-panel-class-1', 'custom-panel-class-2'];
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const overlayPane = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-pane');
+
+    expect(overlayPane.classList).toContain('custom-panel-class-1');
+    expect(overlayPane.classList).toContain('custom-panel-class-2');
+  }));
+
   it('should restore focus to the root trigger when the menu was opened by mouse', fakeAsync(() => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();
@@ -2217,6 +2247,7 @@ describe('MatMenu default overrides', () => {
       [class]="panelClass"
       (closed)="closeCallback($event)"
       [backdropClass]="backdropClass"
+      [overlayPanelClass]="overlayPanelClass"
       [aria-label]="ariaLabel"
       [aria-labelledby]="ariaLabelledby"
       [aria-describedby]="ariaDescribedby">
@@ -2239,6 +2270,7 @@ class SimpleMenu {
   extraItems: string[] = [];
   closeCallback = jasmine.createSpy('menu closed callback');
   backdropClass: string;
+  overlayPanelClass: string|string[];
   panelClass: string;
   restoreFocus = true;
   ariaLabel: string;

src/material/menu/menu.ts

@@ -64,6 +64,9 @@ export interface MatMenuDefaultOptions {
   /** Class to be applied to the menu's backdrop. */
   backdropClass: string;
 
+  /** Class or list of classes to be applied to the menu's overlay panel. */
+  overlayPanelClass: string | string[];
+
   /** Whether the menu has a backdrop. */
   hasBackdrop?: boolean;
 }
@@ -82,6 +85,7 @@ export function MAT_MENU_DEFAULT_OPTIONS_FACTORY(): MatMenuDefaultOptions {
     xPosition: 'after',
     yPosition: 'below',
     backdropClass: 'cdk-overlay-transparent-backdrop',
+    overlayPanelClass: '',
   };
 }
 /**
@@ -132,6 +136,9 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
   /** Class to be added to the backdrop element. */
   @Input() backdropClass: string = this._defaultOptions.backdropClass;
 
+  /** Class or list of classes to be added to the overlay panel. */
+  @Input() overlayPanelClass: string|string[] = this._defaultOptions.overlayPanelClass;
+
   /** aria-label for the menu panel. */
   @Input('aria-label') ariaLabel: string;