refactor(sidenav): Rename md-sidenav-layout to md-sidenav-container. (#2183)

* refactor(sidenav): Rename md-sidenav-layout to md-sidenav-container.

BREAKING CHANGE: md-sidenav-layout must be changed to
md-sidenav-container. The API is otherwise unchanged.

* leave -layout version around for now

Author: mmalerba

src/demo-app/demo-app/demo-app.html

@@ -1,4 +1,4 @@
-<md-sidenav-layout class="demo-root" fullscreen>
+<md-sidenav-container class="demo-root" fullscreen>
   <md-sidenav #start>
     <md-nav-list>
       <a *ngFor="let navItem of navItems"
@@ -35,4 +35,4 @@ <h1>Angular Material 2 Demos</h1>
       <router-outlet></router-outlet>
     </div>
   </div>
-</md-sidenav-layout>
+</md-sidenav-container>

src/demo-app/sidenav/sidenav-demo.html

@@ -1,6 +1,6 @@
 <h2>Basic Use Case</h2>
 
-<md-sidenav-layout class="demo-sidenav-layout">
+<md-sidenav-container class="demo-sidenav-container">
   <md-sidenav #start (open)="myinput.focus()" mode="side">
     Start Side Drawer
     <br>
@@ -34,27 +34,27 @@ <h1>My Content</h1>
     <button md-raised-button class="md-primary">HELLO</button>
     <button md-fab class="md-accent">HI</button>
   </div>
-</md-sidenav-layout>
+</md-sidenav-container>
 
 <h2>Sidenav Already Opened</h2>
 
-<md-sidenav-layout class="demo-sidenav-layout">
+<md-sidenav-container class="demo-sidenav-container">
   <md-sidenav #start2 opened mode="side">
     Drawer
   </md-sidenav>
 
   <div class="demo-sidenav-content">
     <button md-button (click)="start2.toggle()">Toggle Start Side Drawer</button>
   </div>
-</md-sidenav-layout>
+</md-sidenav-container>
 
 <h2>Dynamic Alignment Sidenav</h2>
 
-<md-sidenav-layout class="demo-sidenav-layout">
+<md-sidenav-container class="demo-sidenav-container">
   <md-sidenav #dynamicAlignSidenav mode="push" [align]="side">Drawer</md-sidenav>
 
   <div class="demo-sidenav-content">
     <button (click)="dynamicAlignSidenav.toggle()">Toggle sidenav</button>
     <button (click)="side = (side == 'start') ? 'end' : 'start'">Change sides</button>
   </div>
-</md-sidenav-layout>
+</md-sidenav-container>

src/demo-app/sidenav/sidenav-demo.scss

@@ -1,4 +1,4 @@
-.demo-sidenav-layout {
+.demo-sidenav-container {
   border: 3px solid black;
 
   .md-sidenav-focus-trap > .cdk-focus-trap-content {

src/lib/sidenav/README.md

@@ -1,13 +1,13 @@
 # MdSidenav
 
-MdSidenav is the side navigation component for Material 2. It is composed of two components; `<md-sidenav-layout>` and `<md-sidenav>`.
+MdSidenav is the side navigation component for Material 2. It is composed of two components: `<md-sidenav-container>` and `<md-sidenav>`.
 
 ## Screenshots
 
 <img src="https://material.angularjs.org/material2_assets/sidenav-example.png">
 
 
-## `<md-sidenav-layout>`
+## `<md-sidenav-container>`
 
 The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop.
 
@@ -19,8 +19,8 @@ The sidenav panel.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the layout will be considered invalid and none of the sidenavs will be visible or toggleable until the layout is valid again. |
-| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `<md-sidenav-layout>` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. |
+| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the container will be considered invalid and none of the sidenavs will be visible or toggleable until the container is valid again. |
+| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `<md-sidenav-container>` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. |
 | `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. |
 
 ### Events
@@ -58,7 +58,7 @@ Here's a simple example of using the sidenav:
 
 ```html
 <app>
-  <md-sidenav-layout>
+  <md-sidenav-container>
     <md-sidenav #start (open)="closeStartButton.focus()">
       Start Sidenav.
       <br>
@@ -73,23 +73,23 @@ Here's a simple example of using the sidenav:
     <button md-button (click)="start.open()">Open start sidenav</button>
     <button md-button (click)="end.open()">Open end sidenav</button>
 
-  </md-sidenav-layout>
+  </md-sidenav-container>
 </app>
 ```
 
 For a fullscreen sidenav, the recommended approach is set up the DOM such that the
-`md-sidenav-layout` can naturally take up the full space:
+`md-sidenav-container` can naturally take up the full space:
 
 ```html
 <app>
-  <md-sidenav-layout>
+  <md-sidenav-container>
     <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
     <div class="my-content">Main content</div>
-  </md-sidenav-layout>
+  </md-sidenav-container>
 </app>
 ```
 ```css
-html, body, material-app, md-sidenav-layout, .my-content {
+html, body, material-app, md-sidenav-container, .my-content {
   margin: 0;
   width: 100%;
   height: 100%;
@@ -101,7 +101,7 @@ outside of the scrollable region and absolutely position it.
 
 ```html
 <app>
-  <md-sidenav-layout class="my-layout">
+  <md-sidenav-container class="my-container">
     <md-sidenav mode="side" opened="true">
       <button md-mini-fab class="my-fab">
         <md-icon>add</md-icon>
@@ -132,21 +132,21 @@ outside of the scrollable region and absolutely position it.
       ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien
       consectetuer.
     </div>
-  </md-sidenav-layout>
+  </md-sidenav-container>
 </app>
 ```
 ```css
-.my-layout {
+.my-container {
   width: 500px;
   height: 300px;
 }
 
-.my-layout md-sidenav {
+.my-container md-sidenav {
   max-width: 200px;
 }
 
-.my-layout .md-sidenav-content,
-.my-layout md-sidenav {
+.my-container .md-sidenav-content,
+.my-container md-sidenav {
   display: flex;
 }
 

src/lib/sidenav/_sidenav-theme.scss

@@ -14,11 +14,11 @@
   // we use a light backdrop.
   $sidenav-backdrop-color: invert(md-color($background, card, 0.6)) !default;
   $sidenav-background-color: md-color($background, dialog) !default;
-  $sidenav-layout-background-color:  md-color($background, background) !default;
+  $sidenav-container-background-color:  md-color($background, background) !default;
   $sidenav-push-background-color: md-color($background, dialog) !default;
 
-  md-sidenav-layout {
-    background-color: $sidenav-layout-background-color;
+  .md-sidenav-container {
+    background-color: $sidenav-container-background-color;
     color: md-color($foreground, text);
   }
 

src/lib/sidenav/sidenav-container.html

@@ -0,0 +1,8 @@
+<div class="md-sidenav-backdrop" (click)="_onBackdropClicked()"
+     [class.md-sidenav-shown]="_isShowingBackdrop()"></div>
+
+<ng-content select="md-sidenav, mat-sidenav"></ng-content>
+
+<div class="md-sidenav-content" [ngStyle]="_getStyles()">
+  <ng-content></ng-content>
+</div>

src/lib/sidenav/sidenav.html

@@ -1,8 +1,3 @@
-<div class="md-sidenav-backdrop" (click)="_onBackdropClicked()"
-     [class.md-sidenav-shown]="_isShowingBackdrop()"></div>
-
-<ng-content select="md-sidenav, mat-sidenav"></ng-content>
-
-<div class="md-sidenav-content" [ngStyle]="_getStyles()">
+<focus-trap class="md-sidenav-focus-trap" [disabled]="isFocusTrapDisabled">
   <ng-content></ng-content>
-</div>
+</focus-trap>

src/lib/sidenav/sidenav.scss

@@ -40,9 +40,9 @@
   transform: translate3d(0, 0, 0);
 }
 
-md-sidenav-layout {
+.md-sidenav-container {
   // We need a stacking context here so that the backdrop and drawers are clipped to the
-  // MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.
+  // MdSidenavContainer. This creates a new z-index stack so we use low numbered z-indices.
   // We create another stacking context in the '.md-sidenav-content' and in each sidenav so that
   // the application content does not get messed up with our own CSS.
   @include md-sidenav-stacking-context();

src/lib/sidenav/sidenav.spec.ts

@@ -23,8 +23,8 @@ describe('MdSidenav', () => {
       imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()],
       declarations: [
         BasicTestApp,
-        SidenavLayoutTwoSidenavTestApp,
-        SidenavLayoutNoSidenavTestApp,
+        SidenavContainerTwoSidenavTestApp,
+        SidenavContainerNoSidenavTestApp,
         SidenavSetToOpenedFalse,
         SidenavSetToOpenedTrue,
         SidenavDynamicAlign,
@@ -397,24 +397,24 @@ describe('MdSidenav', () => {
 });
 
 
-/** Test component that contains an MdSidenavLayout but no MdSidenav. */
-@Component({template: `<md-sidenav-layout></md-sidenav-layout>`})
-class SidenavLayoutNoSidenavTestApp { }
+/** Test component that contains an MdSidenavContainer but no MdSidenav. */
+@Component({template: `<md-sidenav-container></md-sidenav-container>`})
+class SidenavContainerNoSidenavTestApp { }
 
-/** Test component that contains an MdSidenavLayout and 2 MdSidenav on the same side. */
+/** Test component that contains an MdSidenavContainer and 2 MdSidenav on the same side. */
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-container>
       <md-sidenav> </md-sidenav>
       <md-sidenav> </md-sidenav>
-    </md-sidenav-layout>`,
+    </md-sidenav-container>`,
 })
-class SidenavLayoutTwoSidenavTestApp { }
+class SidenavContainerTwoSidenavTestApp { }
 
-/** Test component that contains an MdSidenavLayout and one MdSidenav. */
+/** Test component that contains an MdSidenavContainer and one MdSidenav. */
 @Component({
   template: `
-    <md-sidenav-layout (backdrop-clicked)="backdropClicked()">
+    <md-sidenav-container (backdrop-clicked)="backdropClicked()">
       <md-sidenav #sidenav align="start"
                   (open-start)="openStart()"
                   (open)="open()"
@@ -424,7 +424,7 @@ class SidenavLayoutTwoSidenavTestApp { }
       </md-sidenav>
       <button (click)="sidenav.open()" class="open"></button>
       <button (click)="sidenav.close()" class="close"></button>
-    </md-sidenav-layout>`,
+    </md-sidenav-container>`,
 })
 class BasicTestApp {
   openStartCount: number = 0;
@@ -456,30 +456,30 @@ class BasicTestApp {
 
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-container>
       <md-sidenav #sidenav mode="side" opened="false">
         Closed Sidenav.
       </md-sidenav>
-    </md-sidenav-layout>`,
+    </md-sidenav-container>`,
 })
 class SidenavSetToOpenedFalse { }
 
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-container>
       <md-sidenav #sidenav mode="side" opened="true">
         Closed Sidenav.
       </md-sidenav>
-    </md-sidenav-layout>`,
+    </md-sidenav-container>`,
 })
 class SidenavSetToOpenedTrue { }
 
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-container>
       <md-sidenav #sidenav1 [align]="sidenav1Align"></md-sidenav>
       <md-sidenav #sidenav2 [align]="sidenav2Align"></md-sidenav>
-    </md-sidenav-layout>`,
+    </md-sidenav-container>`,
 })
 class SidenavDynamicAlign {
   sidenav1Align = 'start';
@@ -488,12 +488,12 @@ class SidenavDynamicAlign {
 
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-container>
       <md-sidenav align="start" [mode]="mode">
         <a class="link1" href="#">link1</a>
       </md-sidenav>
       <a class="link2" href="#">link2</a>
-    </md-sidenav-layout>`,
+    </md-sidenav-container>`,
 })
 class SidenavWitFocusableElements {
   mode: string = 'over';