Skip to content

Commit 8f1c5a9

Browse files
mmalerbajelbourn
mmalerba
authored and
jelbourn
committed
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
1 parent c5fb94f commit 8f1c5a9

File tree

10 files changed

+78
-75
lines changed

10 files changed

+78
-75
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<md-sidenav-layout class="demo-root" fullscreen>
1+
<md-sidenav-container class="demo-root" fullscreen>
22
<md-sidenav #start>
33
<md-nav-list>
44
<a *ngFor="let navItem of navItems"
@@ -35,4 +35,4 @@ <h1>Angular Material 2 Demos</h1>
3535
<router-outlet></router-outlet>
3636
</div>
3737
</div>
38-
</md-sidenav-layout>
38+
</md-sidenav-container>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h2>Basic Use Case</h2>
22

3-
<md-sidenav-layout class="demo-sidenav-layout">
3+
<md-sidenav-container class="demo-sidenav-container">
44
<md-sidenav #start (open)="myinput.focus()" mode="side">
55
Start Side Drawer
66
<br>
@@ -34,27 +34,27 @@ <h1>My Content</h1>
3434
<button md-raised-button class="md-primary">HELLO</button>
3535
<button md-fab class="md-accent">HI</button>
3636
</div>
37-
</md-sidenav-layout>
37+
</md-sidenav-container>
3838

3939
<h2>Sidenav Already Opened</h2>
4040

41-
<md-sidenav-layout class="demo-sidenav-layout">
41+
<md-sidenav-container class="demo-sidenav-container">
4242
<md-sidenav #start2 opened mode="side">
4343
Drawer
4444
</md-sidenav>
4545

4646
<div class="demo-sidenav-content">
4747
<button md-button (click)="start2.toggle()">Toggle Start Side Drawer</button>
4848
</div>
49-
</md-sidenav-layout>
49+
</md-sidenav-container>
5050

5151
<h2>Dynamic Alignment Sidenav</h2>
5252

53-
<md-sidenav-layout class="demo-sidenav-layout">
53+
<md-sidenav-container class="demo-sidenav-container">
5454
<md-sidenav #dynamicAlignSidenav mode="push" [align]="side">Drawer</md-sidenav>
5555

5656
<div class="demo-sidenav-content">
5757
<button (click)="dynamicAlignSidenav.toggle()">Toggle sidenav</button>
5858
<button (click)="side = (side == 'start') ? 'end' : 'start'">Change sides</button>
5959
</div>
60-
</md-sidenav-layout>
60+
</md-sidenav-container>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.demo-sidenav-layout {
1+
.demo-sidenav-container {
22
border: 3px solid black;
33

44
.md-sidenav-focus-trap > .cdk-focus-trap-content {

‎src/lib/sidenav/README.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# MdSidenav
22

3-
MdSidenav is the side navigation component for Material 2. It is composed of two components; `<md-sidenav-layout>` and `<md-sidenav>`.
3+
MdSidenav is the side navigation component for Material 2. It is composed of two components: `<md-sidenav-container>` and `<md-sidenav>`.
44

55
## Screenshots
66

77
<img src="https://material.angularjs.org/material2_assets/sidenav-example.png">
88

99

10-
## `<md-sidenav-layout>`
10+
## `<md-sidenav-container>`
1111

1212
The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop.
1313

@@ -19,8 +19,8 @@ The sidenav panel.
1919

2020
| Name | Type | Description |
2121
| --- | --- | --- |
22-
| `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. |
23-
| `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"`. |
22+
| `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. |
23+
| `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"`. |
2424
| `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. |
2525

2626
### Events
@@ -58,7 +58,7 @@ Here's a simple example of using the sidenav:
5858

5959
```html
6060
<app>
61-
<md-sidenav-layout>
61+
<md-sidenav-container>
6262
<md-sidenav #start (open)="closeStartButton.focus()">
6363
Start Sidenav.
6464
<br>
@@ -73,23 +73,23 @@ Here's a simple example of using the sidenav:
7373
<button md-button (click)="start.open()">Open start sidenav</button>
7474
<button md-button (click)="end.open()">Open end sidenav</button>
7575

76-
</md-sidenav-layout>
76+
</md-sidenav-container>
7777
</app>
7878
```
7979

8080
For a fullscreen sidenav, the recommended approach is set up the DOM such that the
81-
`md-sidenav-layout` can naturally take up the full space:
81+
`md-sidenav-container` can naturally take up the full space:
8282

8383
```html
8484
<app>
85-
<md-sidenav-layout>
85+
<md-sidenav-container>
8686
<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
8787
<div class="my-content">Main content</div>
88-
</md-sidenav-layout>
88+
</md-sidenav-container>
8989
</app>
9090
```
9191
```css
92-
html, body, material-app, md-sidenav-layout, .my-content {
92+
html, body, material-app, md-sidenav-container, .my-content {
9393
margin: 0;
9494
width: 100%;
9595
height: 100%;
@@ -101,7 +101,7 @@ outside of the scrollable region and absolutely position it.
101101

102102
```html
103103
<app>
104-
<md-sidenav-layout class="my-layout">
104+
<md-sidenav-container class="my-container">
105105
<md-sidenav mode="side" opened="true">
106106
<button md-mini-fab class="my-fab">
107107
<md-icon>add</md-icon>
@@ -132,21 +132,21 @@ outside of the scrollable region and absolutely position it.
132132
ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien
133133
consectetuer.
134134
</div>
135-
</md-sidenav-layout>
135+
</md-sidenav-container>
136136
</app>
137137
```
138138
```css
139-
.my-layout {
139+
.my-container {
140140
width: 500px;
141141
height: 300px;
142142
}
143143

144-
.my-layout md-sidenav {
144+
.my-container md-sidenav {
145145
max-width: 200px;
146146
}
147147

148-
.my-layout .md-sidenav-content,
149-
.my-layout md-sidenav {
148+
.my-container .md-sidenav-content,
149+
.my-container md-sidenav {
150150
display: flex;
151151
}
152152

‎src/lib/sidenav/_sidenav-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
// we use a light backdrop.
1515
$sidenav-backdrop-color: invert(md-color($background, card, 0.6)) !default;
1616
$sidenav-background-color: md-color($background, dialog) !default;
17-
$sidenav-layout-background-color: md-color($background, background) !default;
17+
$sidenav-container-background-color: md-color($background, background) !default;
1818
$sidenav-push-background-color: md-color($background, dialog) !default;
1919

20-
md-sidenav-layout {
21-
background-color: $sidenav-layout-background-color;
20+
.md-sidenav-container {
21+
background-color: $sidenav-container-background-color;
2222
color: md-color($foreground, text);
2323
}
2424

‎src/lib/sidenav/sidenav-container.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="md-sidenav-backdrop" (click)="_onBackdropClicked()"
2+
[class.md-sidenav-shown]="_isShowingBackdrop()"></div>
3+
4+
<ng-content select="md-sidenav, mat-sidenav"></ng-content>
5+
6+
<div class="md-sidenav-content" [ngStyle]="_getStyles()">
7+
<ng-content></ng-content>
8+
</div>

‎src/lib/sidenav/sidenav.html

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
<div class="md-sidenav-backdrop" (click)="_onBackdropClicked()"
2-
[class.md-sidenav-shown]="_isShowingBackdrop()"></div>
3-
4-
<ng-content select="md-sidenav, mat-sidenav"></ng-content>
5-
6-
<div class="md-sidenav-content" [ngStyle]="_getStyles()">
1+
<focus-trap class="md-sidenav-focus-trap" [disabled]="isFocusTrapDisabled">
72
<ng-content></ng-content>
8-
</div>
3+
</focus-trap>

‎src/lib/sidenav/sidenav.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@
4040
transform: translate3d(0, 0, 0);
4141
}
4242

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

‎src/lib/sidenav/sidenav.spec.ts

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ describe('MdSidenav', () => {
2323
imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()],
2424
declarations: [
2525
BasicTestApp,
26-
SidenavLayoutTwoSidenavTestApp,
27-
SidenavLayoutNoSidenavTestApp,
26+
SidenavContainerTwoSidenavTestApp,
27+
SidenavContainerNoSidenavTestApp,
2828
SidenavSetToOpenedFalse,
2929
SidenavSetToOpenedTrue,
3030
SidenavDynamicAlign,
@@ -397,24 +397,24 @@ describe('MdSidenav', () => {
397397
});
398398

399399

400-
/** Test component that contains an MdSidenavLayout but no MdSidenav. */
401-
@Component({template: `<md-sidenav-layout></md-sidenav-layout>`})
402-
class SidenavLayoutNoSidenavTestApp { }
400+
/** Test component that contains an MdSidenavContainer but no MdSidenav. */
401+
@Component({template: `<md-sidenav-container></md-sidenav-container>`})
402+
class SidenavContainerNoSidenavTestApp { }
403403

404-
/** Test component that contains an MdSidenavLayout and 2 MdSidenav on the same side. */
404+
/** Test component that contains an MdSidenavContainer and 2 MdSidenav on the same side. */
405405
@Component({
406406
template: `
407-
<md-sidenav-layout>
407+
<md-sidenav-container>
408408
<md-sidenav> </md-sidenav>
409409
<md-sidenav> </md-sidenav>
410-
</md-sidenav-layout>`,
410+
</md-sidenav-container>`,
411411
})
412-
class SidenavLayoutTwoSidenavTestApp { }
412+
class SidenavContainerTwoSidenavTestApp { }
413413

414-
/** Test component that contains an MdSidenavLayout and one MdSidenav. */
414+
/** Test component that contains an MdSidenavContainer and one MdSidenav. */
415415
@Component({
416416
template: `
417-
<md-sidenav-layout (backdrop-clicked)="backdropClicked()">
417+
<md-sidenav-container (backdrop-clicked)="backdropClicked()">
418418
<md-sidenav #sidenav align="start"
419419
(open-start)="openStart()"
420420
(open)="open()"
@@ -424,7 +424,7 @@ class SidenavLayoutTwoSidenavTestApp { }
424424
</md-sidenav>
425425
<button (click)="sidenav.open()" class="open"></button>
426426
<button (click)="sidenav.close()" class="close"></button>
427-
</md-sidenav-layout>`,
427+
</md-sidenav-container>`,
428428
})
429429
class BasicTestApp {
430430
openStartCount: number = 0;
@@ -456,30 +456,30 @@ class BasicTestApp {
456456

457457
@Component({
458458
template: `
459-
<md-sidenav-layout>
459+
<md-sidenav-container>
460460
<md-sidenav #sidenav mode="side" opened="false">
461461
Closed Sidenav.
462462
</md-sidenav>
463-
</md-sidenav-layout>`,
463+
</md-sidenav-container>`,
464464
})
465465
class SidenavSetToOpenedFalse { }
466466

467467
@Component({
468468
template: `
469-
<md-sidenav-layout>
469+
<md-sidenav-container>
470470
<md-sidenav #sidenav mode="side" opened="true">
471471
Closed Sidenav.
472472
</md-sidenav>
473-
</md-sidenav-layout>`,
473+
</md-sidenav-container>`,
474474
})
475475
class SidenavSetToOpenedTrue { }
476476

477477
@Component({
478478
template: `
479-
<md-sidenav-layout>
479+
<md-sidenav-container>
480480
<md-sidenav #sidenav1 [align]="sidenav1Align"></md-sidenav>
481481
<md-sidenav #sidenav2 [align]="sidenav2Align"></md-sidenav>
482-
</md-sidenav-layout>`,
482+
</md-sidenav-container>`,
483483
})
484484
class SidenavDynamicAlign {
485485
sidenav1Align = 'start';
@@ -488,12 +488,12 @@ class SidenavDynamicAlign {
488488

489489
@Component({
490490
template: `
491-
<md-sidenav-layout>
491+
<md-sidenav-container>
492492
<md-sidenav align="start" [mode]="mode">
493493
<a class="link1" href="#">link1</a>
494494
</md-sidenav>
495495
<a class="link2" href="#">link2</a>
496-
</md-sidenav-layout>`,
496+
</md-sidenav-container>`,
497497
})
498498
class SidenavWitFocusableElements {
499499
mode: string = 'over';

0 commit comments

Comments
 (0)