From e6a93238d64a294544295d4d14e9dddbb6f75f6c Mon Sep 17 00:00:00 2001
From: Jason Yeomans <jyeo098@gmail.com>
Date: Thu, 26 Jan 2017 14:39:57 -0500
Subject: [PATCH 1/2] feat(dialog): add hasBackdrop and backdropClass options
 to dialog config

Implement hasBackdrop as laid out in the MdDialog design document. Add backdropClass option to override default `cdk-overlay-dark-backdrop` class, allowing custom styling to be applied.

Closes #2806
---
 src/demo-app/dialog/dialog-demo.html | 10 ++++++
 src/demo-app/dialog/dialog-demo.ts   |  2 ++
 src/lib/dialog/dialog-config.ts      |  6 ++++
 src/lib/dialog/dialog.spec.ts        | 48 ++++++++++++++++++++++++++++
 src/lib/dialog/dialog.ts             |  5 ++-
 5 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index 8d3f4890819c..70237608546c 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/src/demo-app/dialog/dialog-demo.html
@@ -43,6 +43,16 @@ <h2>Dialog position</h2>
       </md-input-container>
     </p>
 
+    <h2>Dialog backdrop</h2>
+
+    <p>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class">
+      </md-input-container>
+    </p>
+
+    <md-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</md-checkbox>
+
     <h2>Other options</h2>
 
     <p>
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 5ccd67a0ec68..f0e5875d17bb 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -15,6 +15,8 @@ export class DialogDemo {
   actionsAlignment: string;
   config: MdDialogConfig = {
     disableClose: false,
+    hasBackdrop: true,
+    backdropClass: '',
     width: '',
     height: '',
     position: {
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index 96b4586e73d5..1bb43ae60871 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/src/lib/dialog/dialog-config.ts
@@ -27,6 +27,12 @@ export class MdDialogConfig {
   /** The ARIA role of the dialog element. */
   role?: DialogRole = 'dialog';
 
+  /** Whether the dialog has a backdrop. */
+  hasBackdrop?: boolean = true;
+
+  /** Custom class for the backdrop, */
+  backdropClass?: string = '';
+
   /** Whether the user can use escape or clicking outside to close a modal. */
   disableClose?: boolean = false;
 
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 187c37908e46..c58ffda3382e 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -397,6 +397,54 @@ describe('MdDialog', () => {
     });
   });
 
+  describe('hasBackdrop option', () => {
+    it('should have a backdrop', () => {
+      dialog.open(PizzaMsg, {
+        hasBackdrop: true,
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
+    });
+
+    it('should not have a backdrop', () => {
+      dialog.open(PizzaMsg, {
+        hasBackdrop: false,
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy();
+    });
+  });
+
+  describe('backdropClass option', () => {
+    it('should have default backdrop class', () => {
+      dialog.open(PizzaMsg, {
+        backdropClass: '',
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-dark-backdrop')).toBeTruthy();
+    });
+
+    it('should have custom backdrop class', () => {
+      dialog.open(PizzaMsg, {
+        backdropClass: 'custom-backdrop-class',
+        viewContainerRef: testViewContainerRef
+      });
+
+      viewContainerFixture.detectChanges();
+
+      expect(overlayContainerElement.querySelector('.custom-backdrop-class')).toBeTruthy();
+    });
+  });
+
   describe('focus management', () => {
 
     // When testing focus, all of the elements must be in the DOM.
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index bc828b62d317..d151c1ae2751 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -108,7 +108,10 @@ export class MdDialog {
    */
   private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
     let overlayState = new OverlayState();
-    overlayState.hasBackdrop = true;
+    overlayState.hasBackdrop = dialogConfig.hasBackdrop;
+    if(dialogConfig.backdropClass) {
+      overlayState.backdropClass = dialogConfig.backdropClass;
+    }
     overlayState.positionStrategy = this._overlay.position().global();
 
     return overlayState;

From a3d537c19c4773834febc20bc4f43fd9da923db4 Mon Sep 17 00:00:00 2001
From: Jason Yeomans <jyeo098@gmail.com>
Date: Tue, 18 Apr 2017 21:29:56 -0400
Subject: [PATCH 2/2] rebase master and fix conflicts

---
 src/lib/dialog/dialog.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index d151c1ae2751..c615101c08de 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -109,7 +109,7 @@ export class MdDialog {
   private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
     let overlayState = new OverlayState();
     overlayState.hasBackdrop = dialogConfig.hasBackdrop;
-    if(dialogConfig.backdropClass) {
+    if (dialogConfig.backdropClass) {
       overlayState.backdropClass = dialogConfig.backdropClass;
     }
     overlayState.positionStrategy = this._overlay.position().global();