From 04831c54e680170c7decca1e9a1bad21498072fe Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 6 Mar 2018 09:41:45 -0800
Subject: [PATCH 1/2] docs(sidenav): add docs for `hasBackdrop`

---
 src/lib/sidenav/sidenav.md                    | 10 ++++++++-
 .../sidenav-backdrop-example.css              |  6 +++++
 .../sidenav-backdrop-example.html             | 22 +++++++++++++++++++
 .../sidenav-backdrop-example.ts               |  9 ++++++++
 4 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css
 create mode 100644 src/material-examples/sidenav-backdrop/sidenav-backdrop-example.html
 create mode 100644 src/material-examples/sidenav-backdrop/sidenav-backdrop-example.ts

diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md
index b367fac0bd85..f4a206436e85 100644
--- a/src/lib/sidenav/sidenav.md
+++ b/src/lib/sidenav/sidenav.md
@@ -117,7 +117,15 @@ If no `mode` is specified, `over` is used by default.
 
 <!-- example(sidenav-mode) -->
 
-`<mat-drawer>` also supports all of these same modes.
+The `over` and `push` sidenav modes show a backdrop by default, while the side mode does not. This
+can be customized by setting the `hasBackdrop` property on `mat-sidenav-container`. Setting it to
+`true` will force all sidenavs to have a backdrop regardless of their mode. Setting it to `false`
+will disable the backdrop on all sidenavs, regardless of their mode. Leaving the property unset or
+setting it to `null` will use the default backdrop visibility for each mode.
+
+<!-- example(sidenav-backdrop) -->
+
+`<mat-drawer>` also supports all of these same modes and options.
 
 ### Disabling automatic close
 
diff --git a/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css b/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css
new file mode 100644
index 000000000000..d0bcca980f2f
--- /dev/null
+++ b/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css
@@ -0,0 +1,6 @@
+.example-container {
+  width: 400px;
+  height: 200px;
+  margin: 10px;
+  border: 1px solid #555;
+}
diff --git a/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.html b/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.html
new file mode 100644
index 000000000000..0fa69dee3b94
--- /dev/null
+++ b/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.html
@@ -0,0 +1,22 @@
+<mat-drawer-container class="example-container" [hasBackdrop]="hasBackdrop.value">
+  <mat-drawer #drawer [mode]="mode.value">I'm a drawer</mat-drawer>
+  <mat-drawer-content>
+    <mat-form-field>
+      <mat-label>Sidenav mode</mat-label>
+      <mat-select #mode value="side">
+        <mat-option value="side">Side</mat-option>
+        <mat-option value="over">Over</mat-option>
+        <mat-option value="push">Push</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Has backdrop</mat-label>
+      <mat-select #hasBackdrop>
+        <mat-option>Unset</mat-option>
+        <mat-option [value]="true">True</mat-option>
+        <mat-option [value]="false">False</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
+  </mat-drawer-content>
+</mat-drawer-container>
diff --git a/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.ts b/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.ts
new file mode 100644
index 000000000000..c945bb03b0f3
--- /dev/null
+++ b/src/material-examples/sidenav-backdrop/sidenav-backdrop-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Drawer with explicit backdrop setting */
+@Component({
+  selector: 'sidenav-backdrop-example',
+  templateUrl: 'sidenav-backdrop-example.html',
+  styleUrls: ['sidenav-backdrop-example.css'],
+})
+export class SidenavBackdropExample {}

From 6484d523f7886e20b6ce16ec6e45648ddeedadd0 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 6 Mar 2018 09:57:19 -0800
Subject: [PATCH 2/2] address comments

---
 src/lib/sidenav/sidenav.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md
index f4a206436e85..c8aed710e66e 100644
--- a/src/lib/sidenav/sidenav.md
+++ b/src/lib/sidenav/sidenav.md
@@ -117,11 +117,11 @@ If no `mode` is specified, `over` is used by default.
 
 <!-- example(sidenav-mode) -->
 
-The `over` and `push` sidenav modes show a backdrop by default, while the side mode does not. This
-can be customized by setting the `hasBackdrop` property on `mat-sidenav-container`. Setting it to
-`true` will force all sidenavs to have a backdrop regardless of their mode. Setting it to `false`
-will disable the backdrop on all sidenavs, regardless of their mode. Leaving the property unset or
-setting it to `null` will use the default backdrop visibility for each mode.
+The `over` and `push` sidenav modes show a backdrop by default, while the `side` mode does not. This
+can be customized by setting the `hasBackdrop` property on `mat-sidenav-container`. Explicitly
+setting `hasBackdrop` to `true` or `false` will override the default backdrop visibility setting for
+all sidenavs regadless of mode. Leaving the property unset or setting it to `null` will use the
+default backdrop visibility for each mode.
 
 <!-- example(sidenav-backdrop) -->