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

* feat(menu): add option to add overlay pane classes

* api golden

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,41 @@ describe('MatMenu', () => {
     expect(backdrop.classList).toContain('custom-backdrop');
   }));
 
+  it('should be able to set a custom class on the overlay panel', fakeAsync(() => {
+    const optionsProvider =  {
+      provide: MAT_MENU_DEFAULT_OPTIONS,
+      useValue: {overlayPanelClass: 'custom-panel-class'}
+    };
+    const fixture = createComponent(SimpleMenu, [optionsProvider], [FakeIcon]);
+
+    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 optionsProvider =  {
+      provide: MAT_MENU_DEFAULT_OPTIONS,
+      useValue: {overlayPanelClass: ['custom-panel-class-1', 'custom-panel-class-2']}
+    };
+    const fixture = createComponent(SimpleMenu, [optionsProvider], [FakeIcon]);
+
+    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();

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;
 }
@@ -129,6 +132,9 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
   /** Layout direction of the menu. */
   direction: Direction;
 
+  /** Class or list of classes to be added to the overlay panel. */
+  overlayPanelClass: string|string[] = this._defaultOptions.overlayPanelClass || '';
+
   /** Class to be added to the backdrop element. */
   @Input() backdropClass: string = this._defaultOptions.backdropClass;
 

tools/public_api_guard/material/menu.d.ts

@@ -27,6 +27,7 @@ export declare class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatM
     lazyContent: MatMenuContent;
     get overlapTrigger(): boolean;
     set overlapTrigger(value: boolean);
+    overlayPanelClass: string | string[];
     set panelClass(classes: string);
     readonly panelId: string;
     parentMenu: MatMenuPanel | undefined;
@@ -94,6 +95,7 @@ export interface MatMenuDefaultOptions {
     backdropClass: string;
     hasBackdrop?: boolean;
     overlapTrigger: boolean;
+    overlayPanelClass?: string | string[];
     xPosition: MenuPositionX;
     yPosition: MenuPositionY;
 }
@@ -134,6 +136,7 @@ export interface MatMenuPanel<T = any> {
     hasBackdrop?: boolean;
     lazyContent?: MatMenuContent;
     overlapTrigger: boolean;
+    overlayPanelClass?: string | string[];
     readonly panelId?: string;
     parentMenu?: MatMenuPanel | undefined;
     removeItem?: (item: T) => void;