feat(overlay): support setting panelClass on cdkConnectedOverlay (#12380)

Author: jianliao

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"

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;
   }