From d7c734c101e6f1b8e6ddfa43999dff76650f9123 Mon Sep 17 00:00:00 2001 From: Jian Liao Date: Mon, 27 Aug 2018 09:59:47 -0700 Subject: [PATCH] feat(overlay): support setting panelClass on cdkConnectedOverlay (#12380) --- src/cdk/overlay/overlay-directives.spec.ts | 10 ++++++++++ src/cdk/overlay/overlay-directives.ts | 7 +++++++ 2 files changed, 17 insertions(+) diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index 245cc0aecd1..1fc30824d35 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -232,6 +232,15 @@ describe('Overlay directives', () => { expect(backdrop.classList).toContain('mat-test-class'); }); + it('should set the custom panel class', () => { + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + const panel + = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(panel.classList).toContain('cdk-test-panel-class'); + }); + it('should set the offsetX', () => { fixture.componentInstance.offsetX = 5; fixture.componentInstance.isOpen = true; @@ -478,6 +487,7 @@ describe('Overlay directives', () => { [cdkConnectedOverlayGrowAfterOpen]="growAfterOpen" [cdkConnectedOverlayPush]="push" cdkConnectedOverlayBackdropClass="mat-test-class" + cdkConnectedOverlayPanelClass="cdk-test-panel-class" (backdropClick)="backdropClickHandler($event)" [cdkConnectedOverlayOffsetX]="offsetX" [cdkConnectedOverlayOffsetY]="offsetY" diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts index 5df1a9267c2..364c2746551 100644 --- a/src/cdk/overlay/overlay-directives.ts +++ b/src/cdk/overlay/overlay-directives.ts @@ -158,6 +158,9 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { /** The custom class to be set on the backdrop element. */ @Input('cdkConnectedOverlayBackdropClass') backdropClass: string; + /** The custom class to add to the overlay pane element. */ + @Input('cdkConnectedOverlayPanelClass') panelClass: string | string[]; + /** Margin between the overlay and the viewport edges. */ @Input('cdkConnectedOverlayViewportMargin') viewportMargin: number = 0; @@ -296,6 +299,10 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { overlayConfig.backdropClass = this.backdropClass; } + if (this.panelClass) { + overlayConfig.panelClass = this.panelClass; + } + return overlayConfig; }