refactor(sidenav): split into drawer and sidenav

Author: mmalerba

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

@@ -15,7 +15,7 @@ <h2>Basic Use Case</h2>
     <input #myinput>
   </md-sidenav>
 
-  <md-sidenav #end align="end">
+  <md-sidenav #end side="end">
     End Side Drawer
     <br>
     <button md-button (click)="end.close()">Close</button>
@@ -48,14 +48,14 @@ <h2>Sidenav Already Opened</h2>
   </div>
 </md-sidenav-container>
 
-<h2>Dynamic Alignment Sidenav</h2>
+<h2>Dynamic Side Sidenav</h2>
 
 <md-sidenav-container class="demo-sidenav-container">
-  <md-sidenav #dynamicAlignSidenav1 mode="side" [align]="invert ? 'end' : 'start'">Start</md-sidenav>
-  <md-sidenav #dynamicAlignSidenav2 mode="side" [align]="invert ? 'start' : 'end'">End</md-sidenav>
+  <md-sidenav #dynamicSideSidenav1 mode="side" [side]="invert ? 'end' : 'start'">Start</md-sidenav>
+  <md-sidenav #dynamicSideSidenav2 mode="side" [side]="invert ? 'start' : 'end'">End</md-sidenav>
 
   <div class="demo-sidenav-content">
-    <button (click)="dynamicAlignSidenav1.toggle(); dynamicAlignSidenav2.toggle()">
+    <button (click)="dynamicSideSidenav1.toggle(); dynamicSideSidenav2.toggle()">
       Toggle sidenavs
     </button>
     <button (click)="invert = !invert">Change sides</button>

src/lib/sidenav/README.md

@@ -23,7 +23,7 @@ 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 container will be considered invalid and none of the sidenavs will be visible or toggleable until the container is valid again. |
+| `side` | `"start"\|"end"` | The side 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. |
 
@@ -68,7 +68,7 @@ Here's a simple example of using the sidenav:
       <br>
       <button md-button #closeStartButton (click)="start.close()">Close</button>
     </md-sidenav>
-    <md-sidenav #end align="end">
+    <md-sidenav #end side="end">
       End Sidenav.
       <button md-button (click)="end.close()">Close</button>
     </md-sidenav>

src/lib/sidenav/_sidenav-theme.scss

@@ -12,27 +12,27 @@
   // We use invert() here to have the darken the background color expected to be used. If the
   // background is light, we use a dark backdrop. If the background is dark,
   // we use a light backdrop.
-  $sidenav-backdrop-color: invert(mat-color($background, card, 0.6)) !default;
-  $sidenav-background-color: mat-color($background, dialog) !default;
-  $sidenav-container-background-color:  mat-color($background, background) !default;
-  $sidenav-push-background-color: mat-color($background, dialog) !default;
+  $drawer-backdrop-color: invert(mat-color($background, card, 0.6)) !default;
+  $drawer-background-color: mat-color($background, dialog) !default;
+  $drawer-container-background-color:  mat-color($background, background) !default;
+  $drawer-push-background-color: mat-color($background, dialog) !default;
 
-  .mat-sidenav-container {
-    background-color: $sidenav-container-background-color;
+  .mat-drawer-container {
+    background-color: $drawer-container-background-color;
     color: mat-color($foreground, text);
   }
 
-  .mat-sidenav {
-    background-color: $sidenav-background-color;
+  .mat-drawer {
+    background-color: $drawer-background-color;
     color: mat-color($foreground, text);
 
-    &.mat-sidenav-push {
-      background-color: $sidenav-push-background-color;
+    &.mat-drawer-push {
+      background-color: $drawer-push-background-color;
     }
   }
 
-  .mat-sidenav-backdrop.mat-sidenav-shown {
-    background-color: $sidenav-backdrop-color;
+  .mat-drawer-backdrop.mat-drawer-shown {
+    background-color: $drawer-backdrop-color;
   }
 }
 

src/lib/sidenav/drawer-container.html

@@ -0,0 +1,9 @@
+<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+     [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
+
+<ng-content select="md-drawer, mat-drawer, md-sidenav, mat-sidenav"></ng-content>
+
+<div class="mat-drawer-content" [ngStyle]="_styles" cdk-scrollable>
+  <ng-content></ng-content>
+</div>
+F

src/lib/sidenav/sidenav-transitions.scss src/lib/sidenav/drawer-transitions.scsssrc/lib/sidenav/sidenav-transitions.scss renamed to src/lib/sidenav/drawer-transitions.scss

@@ -1,16 +1,16 @@
 // Separate transitions to be able to disable them in unit tests by omitting this file.
 @import '../core/style/variables';
 
-.mat-sidenav-transition {
-  .mat-sidenav-content {
+.mat-drawer-transition {
+  .mat-drawer-content {
     transition: {
       duration: $swift-ease-out-duration;
       timing-function: $swift-ease-out-timing-function;
       property: transform, margin-left, margin-right;
     }
   }
 
-  .mat-sidenav-backdrop.mat-sidenav-shown {
+  .mat-drawer-backdrop.mat-drawer-shown {
     transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
   }
 }

src/lib/sidenav/sidenav.html src/lib/sidenav/drawer.htmlsrc/lib/sidenav/sidenav.html renamed to src/lib/sidenav/drawer.html

@@ -7,40 +7,40 @@
 // Mixin that creates a new stacking context.
 // see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 // stylelint-enable
-@mixin mat-sidenav-stacking-context() {
+@mixin mat-drawer-stacking-context() {
   position: relative;
 
   // Use a transform to create a new stacking context.
   transform: translate3d(0, 0, 0);
 }
 
-.mat-sidenav-container {
+.mat-drawer-container {
   // We need a stacking context here so that the backdrop and drawers are clipped to the
-  // MdSidenavContainer. This creates a new z-index stack so we use low numbered z-indices.
-  // We create another stacking context in the '.mat-sidenav-content' and in each sidenav so that
+  // MdDrawerContainer. This creates a new z-index stack so we use low numbered z-indices.
+  // We create another stacking context in the '.mat-drawer-content' and in each drawer so that
   // the application content does not get messed up with our own CSS.
-  @include mat-sidenav-stacking-context();
+  @include mat-drawer-stacking-context();
 
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
 
   // Need this to take up space in the layout.
   display: block;
 
-  // Hide the sidenavs when they're closed.
+  // Hide the drawers when they're closed.
   overflow: hidden;
 
   // TODO(hansl): Update this with a more robust solution.
   &[fullscreen] {
     @include mat-fill();
 
-    &.mat-sidenav-opened {
+    &.mat-drawer-opened {
       overflow: hidden;
     }
   }
 }
 
-.mat-sidenav-backdrop {
+.mat-drawer-backdrop {
   @include mat-fill();
 
   display: block;
@@ -55,7 +55,7 @@
   // section.
   visibility: hidden;
 
-  &.mat-sidenav-shown {
+  &.mat-drawer-shown {
     visibility: visible;
   }
 
@@ -64,16 +64,16 @@
   }
 }
 
-.mat-sidenav-content {
-  @include mat-sidenav-stacking-context();
+.mat-drawer-content {
+  @include mat-drawer-stacking-context();
 
   display: block;
   height: 100%;
   overflow: auto;
 }
 
-.mat-sidenav {
-  @include mat-sidenav-stacking-context();
+.mat-drawer {
+  @include mat-drawer-stacking-context();
 
   display: block;
   position: absolute;
@@ -84,30 +84,30 @@
   outline: 0;
   box-sizing: border-box;
   height: 100%;
-  overflow-y: auto; // TODO(kara): revisit scrolling behavior for sidenavs
+  overflow-y: auto; // TODO(kara): revisit scrolling behavior for drawers
   transform: translate3d(-100%, 0, 0);
 
-  &.mat-sidenav-side {
+  &.mat-drawer-side {
     z-index: 1;
   }
 
-  &.mat-sidenav-end {
+  &.mat-drawer-end {
     right: 0;
     transform: translate3d(100%, 0, 0);
   }
 
   [dir='rtl'] & {
     transform: translate3d(100%, 0, 0);
 
-    &.mat-sidenav-end {
+    &.mat-drawer-end {
       left: 0;
       right: auto;
       transform: translate3d(-100%, 0, 0);
     }
   }
 
-  &.mat-sidenav-opening, &.mat-sidenav-opened {
-    &:not(.mat-sidenav-side) {
+  &.mat-drawer-opening, &.mat-drawer-opened {
+    &:not(.mat-drawer-side) {
       // The elevation of z-16 is noted in the design specifications.
       // See https://material.io/guidelines/patterns/navigation-drawer.html#
       @include mat-elevation(16);