From 28c936f122bd5a2dd0afd6353cdc001d051e6e49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josip=20Boj=C4=8Di=C4=87?= <josip.b@toptal.com>
Date: Tue, 30 May 2017 19:59:35 -0400
Subject: [PATCH] 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
---
 src/demo-app/dialog/dialog-demo.ts    |  1 +
 src/lib/core/overlay/overlay-ref.ts   |  4 ++++
 src/lib/core/overlay/overlay-state.ts |  3 +++
 src/lib/core/overlay/overlay.spec.ts  | 15 +++++++++++++++
 src/lib/dialog/dialog-config.ts       |  3 +++
 src/lib/dialog/dialog.spec.ts         | 13 +++++++++++++
 src/lib/dialog/dialog.ts              |  1 +
 7 files changed, 40 insertions(+)

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index f0e5875d17b..4c2b2282d8d 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/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: '',
diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts
index 00bc206aeaa..6a58b6a2b46 100644
--- a/src/lib/core/overlay/overlay-ref.ts
+++ b/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;
   }
 
diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts
index 6f397657ae6..8b59c38aa0a 100644
--- a/src/lib/core/overlay/overlay-state.ts
+++ b/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;
 
diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts
index 681849b44f3..ccc1424a563 100644
--- a/src/lib/core/overlay/overlay.spec.ts
+++ b/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;
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index 60377fc9caa..0ea4d96acc0 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/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;
 
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 4edaae631ea..38b42798db3 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/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, {
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index a4c275bdf6e..71bf25ace0c 100644
--- a/src/lib/dialog/dialog.ts
+++ b/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) {