feat(dialog): custom class option #4718 #4012 (#4722)

* feat(dialog): custom class option

Extend dialog config options to allow custom dialog class. Custom class enables media queries.

#4718 #4012

* refactor(dialog): custom class option.

Changed custom class config option name. Remove unnecessary class removal on detach.

#4718 #4012

* test(dialog): custom class option.

Added missing unit test to check if overlay pane has custom panel class.

#4718 #4012

* refactor(dialog): custom class option.

Change wrong comment. Remove unnecessary beforeEach from test.

#4718 #4012

Author: Josip Bojčić

src/demo-app/dialog/dialog-demo.ts

@@ -15,6 +15,7 @@ export class DialogDemo {
   actionsAlignment: string;
   config: MdDialogConfig = {
     disableClose: false,
+    panelClass: 'custom-overlay-pane-class',
     hasBackdrop: true,
     backdropClass: '',
     width: '',

src/lib/core/overlay/overlay-ref.ts

@@ -53,6 +53,10 @@ export class OverlayRef implements PortalHost {
       this._attachBackdrop();
     }
 
+    if (this._state.panelClass) {
+      this._pane.classList.add(this._state.panelClass);
+    }
+
     return attachResult;
   }
 

src/lib/core/overlay/overlay-state.ts

@@ -15,6 +15,9 @@ export class OverlayState {
   /** Strategy to be used when handling scroll events while the overlay is open. */
   scrollStrategy: ScrollStrategy = new NoopScrollStrategy();
 
+  /** Custom class to add to the overlay pane. */
+  panelClass: string = '';
+
   /** Whether the overlay has a backdrop. */
   hasBackdrop: boolean = false;
 

src/lib/core/overlay/overlay.spec.ts

@@ -336,6 +336,21 @@ describe('Overlay', () => {
 
   });
 
+  describe('panelClass', () => {
+    let config: OverlayState;
+    config = new OverlayState();
+    config.panelClass = 'custom-panel-class';
+
+    it('should apply a custom overlay pane class', () => {
+      let overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+      viewContainerFixture.detectChanges();
+
+      let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+      expect(pane.classList).toContain('custom-panel-class');
+    });
+  });
+
   describe('scroll strategy', () => {
     let fakeScrollStrategy: FakeScrollStrategy;
     let config: OverlayState;

src/lib/dialog/dialog-config.ts

@@ -27,6 +27,9 @@ export class MdDialogConfig {
   /** The ARIA role of the dialog element. */
   role?: DialogRole = 'dialog';
 
+  /** Custom class for the overlay pane. */
+  panelClass?: string = '';
+
   /** Whether the dialog has a backdrop. */
   hasBackdrop?: boolean = true;
 

src/lib/dialog/dialog.spec.ts

@@ -455,6 +455,19 @@ describe('MdDialog', () => {
     });
   });
 
+  describe('panelClass option', () => {
+    it('should have custom panel class', () => {
+      dialog.open(PizzaMsg, {
+        panelClass: 'custom-panel-class',
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.custom-panel-class')).toBeTruthy();
+    });
+  });
+
   describe('backdropClass option', () => {
     it('should have default backdrop class', () => {
       dialog.open(PizzaMsg, {

src/lib/dialog/dialog.ts

@@ -121,6 +121,7 @@ export class MdDialog {
    */
   private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
     let overlayState = new OverlayState();
+    overlayState.panelClass = dialogConfig.panelClass;
     overlayState.hasBackdrop = dialogConfig.hasBackdrop;
     overlayState.scrollStrategy = new BlockScrollStrategy(this._viewportRuler);
     if (dialogConfig.backdropClass) {