From 7428c49e104115fee30f43b2c586339f6d5979c0 Mon Sep 17 00:00:00 2001
From: Jason Yeomans <jyeo098@gmail.com>
Date: Tue, 25 Apr 2017 13:48:21 -0400
Subject: [PATCH] feat(dialog): add hasBackdrop and backdropClass options to
 dialog config (#2822)

* 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

* rebase master and fix conflicts
---
 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 f8f1b648a3e3..60377fc9caae 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 af50e26c4ae8..40fc2de4abcc 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -398,6 +398,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..c615101c08de 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;