Merge branch 'master' into focus-trap-refactor

Author: crisbeto

README.md

@@ -38,16 +38,16 @@ and which pieces are blocked) and make a comment.
 Also see our [`Good for community contribution`](https://github.com/angular/material2/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+for+community+contribution%22)
 label.
 
-High level items planned for January 2017:
-
-* Initial version of md-autocomplete
-* Prototyping for data-table
-* Improvements to https://material.angular.io
-* Continued expanding e2e test coverage
-* More work on scroll / resize handling for overlays
-* Screenshot tests
-* Better development automation
+High level items planned for next few months:
 
+- Initial version of datepicker
+- Initial version of data table
+- Initial version of tree
+- Select improvements (multi-select, etc)
+- Screenshot test improvements
+- Docs site improvements
+- A11y audit
+- Various bug fixes
 
 #### Feature status:
 
@@ -76,7 +76,7 @@ High level items planned for January 2017:
 | snackbar / toast |                           Available | [README][21] |   [#115][0115] |
 | select           |                           Available | [README][23] |   [#118][0118] |
 | textarea         |                           Available | [README][5]  |              - |
-| autocomplete     |                         In-progress |           -  |   [#117][0117] |
+| autocomplete     |  Initial version, features evolving | [README][24] |   [#117][0117] |
 | chips            |  Initial version, features evolving |           -  |   [#120][0120] |
 | theming          |   Available, need guidance overlays | [Guide][20]  |              - |
 | docs site        |   UX design and tooling in progress |           -  |              - |
@@ -86,36 +86,37 @@ High level items planned for January 2017:
 | bottom-sheet     |                         Not started |           -  |              - |
 | bottom-nav       |                         Not started |           -  |   [#408][0408] |
 | virtual-repeat   |                         Not started |           -  |   [#823][0823] |
-| datepicker       |                         Not started |           -  |   [#675][0675] |
+| datepicker       |                         In progress |           -  |   [#675][0675] |
 | data-table       |                  Design in-progress |           -  |   [#581][0581] |
 | stepper          |                         Not started |           -  |   [#508][0508] |
 | layout           |   See [angular/flex-layout][lay_rp] | [Wiki][0]    |              - |
 
  [lay_rp]:  https://github.com/angular/flex-layout
  [0]: https://github.com/angular/flex-layout/wiki
- [1]: https://github.com/angular/material2/blob/master/src/lib/button/README.md
- [2]: https://github.com/angular/material2/blob/master/src/lib/card/README.md
- [3]: https://github.com/angular/material2/blob/master/src/lib/checkbox/README.md
- [4]: https://github.com/angular/material2/blob/master/src/lib/radio/README.md
- [5]: https://github.com/angular/material2/blob/master/src/lib/input/README.md
- [6]: https://github.com/angular/material2/blob/master/src/lib/sidenav/README.md
- [7]: https://github.com/angular/material2/blob/master/src/lib/toolbar/README.md
- [8]: https://github.com/angular/material2/blob/master/src/lib/list/README.md
- [9]: https://github.com/angular/material2/blob/master/src/lib/grid-list/README.md
-[10]: https://github.com/angular/material2/blob/master/src/lib/icon/README.md
-[11]: https://github.com/angular/material2/blob/master/src/lib/progress-spinner/README.md
-[12]: https://github.com/angular/material2/blob/master/src/lib/progress-bar/README.md
-[13]: https://github.com/angular/material2/blob/master/src/lib/tabs/README.md
-[14]: https://github.com/angular/material2/blob/master/src/lib/slide-toggle/README.md
-[15]: https://github.com/angular/material2/blob/master/src/lib/button-toggle/README.md
-[16]: https://github.com/angular/material2/blob/master/src/lib/slider/README.md
-[17]: https://github.com/angular/material2/blob/master/src/lib/menu/README.md
-[18]: https://github.com/angular/material2/blob/master/src/lib/tooltip/README.md
+ [1]: https://material.angular.io/components/component/button
+ [2]: https://material.angular.io/components/component/card
+ [3]: https://material.angular.io/components/component/checkbox
+ [4]: https://material.angular.io/components/component/radio
+ [5]: https://material.angular.io/components/component/input
+ [6]: https://material.angular.io/components/component/sidenav
+ [7]: https://material.angular.io/components/component/toolbar
+ [8]: https://material.angular.io/components/component/list
+ [9]: https://material.angular.io/components/component/grid-list
+[10]: https://material.angular.io/components/component/icon
+[11]: https://material.angular.io/components/component/progress-spinner
+[12]: https://material.angular.io/components/component/progress-bar
+[13]: https://material.angular.io/components/component/tabs
+[14]: https://material.angular.io/components/component/slide-toggle
+[15]: https://material.angular.io/components/component/button-toggle
+[16]: https://material.angular.io/components/component/slider
+[17]: https://material.angular.io/components/component/menu
+[18]: https://material.angular.io/components/component/tooltip
 [19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md
 [20]: https://github.com/angular/material2/blob/master/guides/theming.md
-[21]: https://github.com/angular/material2/blob/master/src/lib/snack-bar/README.md
-[22]: https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
-[23]: https://github.com/angular/material2/blob/master/src/lib/select/README.md
+[21]: https://material.angular.io/components/component/snack-bar
+[22]: https://material.angular.io/components/component/dialog
+[23]: https://material.angular.io/components/component/select
+[24]: https://material.angular.io/components/component/autocomplete
 
 [0107]: https://github.com/angular/material2/issues/107
 [0119]: https://github.com/angular/material2/issues/119

e2e/components/slide-toggle/slide-toggle.e2e.ts

@@ -1,4 +1,4 @@
-import {browser, element, by, Key} from 'protractor';
+import {browser, element, by, Key, ExpectedConditions} from 'protractor';
 import {expectToExist} from '../../util/asserts';
 import {screenshot} from '../../screenshot';
 
@@ -21,7 +21,9 @@ describe('slide-toggle', () => {
     getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should change the checked state on click', () => {
@@ -32,7 +34,9 @@ describe('slide-toggle', () => {
     getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should not change the checked state on click when disabled', () => {
@@ -43,7 +47,9 @@ describe('slide-toggle', () => {
     element(by.css('#disabled-slide-toggle')).click();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should move the thumb on state change', () => {
@@ -57,7 +63,9 @@ describe('slide-toggle', () => {
     let newX = thumbEl.getLocation().then(pos => pos.x);
 
     expect(previousX).not.toBe(newX);
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should toggle the slide-toggle on space key', () => {

e2e/screenshot.ts

@@ -3,11 +3,14 @@ import * as path from 'path';
 import {browser} from 'protractor';
 
 const OUTPUT_DIR = './screenshots/';
+const HEIGHT = 768;
+const WIDTH = 1024;
 
 let currentJasmineSpecName = '';
 
 /**  Adds a custom jasmine reporter that simply keeps track of the current test name. */
 function initializeEnvironment(jasmine: any) {
+  browser.manage().window().setSize(WIDTH, HEIGHT);
   let reporter = new jasmine.JsApiReporter({});
   reporter.specStarted = function(result: any) {
     currentJasmineSpecName = result.fullName;

guides/theming-your-components.md

@@ -22,7 +22,7 @@ All you need is to create a `@mixin` function in the custom-component-theme.scss
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
 
-  // Use md-color to extract individual colors from a palette as necessary.
+  // Use mat-color to extract individual colors from a palette as necessary.
   .candy-carousel {
     background-color: mat-color($primary);
     border-color: mat-color($accent, A400);

package.json

@@ -41,6 +41,7 @@
     "@angular/platform-browser-dynamic": "^2.3.0",
     "@angular/platform-server": "^2.3.0",
     "@angular/router": "^3.3.0",
+    "@types/fs-extra": "0.0.37",
     "@types/glob": "^5.0.30",
     "@types/gulp": "^3.8.32",
     "@types/hammerjs": "^2.0.34",
@@ -59,6 +60,7 @@
     "firebase-tools": "^2.2.1",
     "fs-extra": "^2.0.0",
     "glob": "^7.1.1",
+    "google-cloud": "^0.45.1",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-better-rollup": "^1.0.2",
@@ -77,6 +79,7 @@
     "gulp-transform": "^1.1.0",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.9.0",
+    "image-diff": "^1.6.3",
     "jasmine-core": "^2.5.2",
     "karma": "^1.4.1",
     "karma-browserstack-launcher": "^1.2.0",

src/demo-app/button/button-demo.scss

@@ -8,7 +8,6 @@
   section {
     display: flex;
     align-items: center;
-    background-color: #f7f7f7;
     margin: 8px;
   }
 

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

@@ -43,5 +43,15 @@ <h1>md-checkbox: Basic Example</h1>
   </div>
 </div>
 
+<h1>Pseudo checkboxes</h1>
+<md-pseudo-checkbox></md-pseudo-checkbox>
+<md-pseudo-checkbox [disabled]="true"></md-pseudo-checkbox>
+
+<md-pseudo-checkbox state="checked"></md-pseudo-checkbox>
+<md-pseudo-checkbox state="checked" [disabled]="true"></md-pseudo-checkbox>
+
+<md-pseudo-checkbox state="indeterminate"></md-pseudo-checkbox>
+<md-pseudo-checkbox state="indeterminate" [disabled]="true"></md-pseudo-checkbox>
+
 <h1>Nested Checklist</h1>
 <md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>

src/demo-app/demo-app-module.ts

@@ -4,7 +4,12 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
-import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
+import {
+  MaterialModule,
+  OverlayContainer,
+  FullscreenOverlayContainer,
+  MdSelectionModule,
+} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, ContentElementDialog, DialogDemo, IFrameDialog} from './dialog/dialog-demo';
@@ -47,6 +52,7 @@ import {StyleDemo} from './style/style-demo';
     ReactiveFormsModule,
     RouterModule.forRoot(DEMO_APP_ROUTES),
     MaterialModule.forRoot(),
+    MdSelectionModule,
   ],
   declarations: [
     AutocompleteDemo,
@@ -93,7 +99,7 @@ import {StyleDemo} from './style/style-demo';
     SunnyTabContent,
     RainyTabContent,
     FoggyTabContent,
-    PlatformDemo
+    PlatformDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

src/demo-app/demo-app/demo-app-theme.scss

@@ -0,0 +1,16 @@
+@import '@angular/material/core/theming/all-theme';
+
+// Include core material styles.
+@include mat-core();
+
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink);
+
+$light-theme: mat-light-theme($primary, $accent);
+$dark-theme: mat-dark-theme($primary, $accent);
+
+@include angular-material-theme($light-theme);
+
+.demo-dark-theme {
+  @include angular-material-theme($dark-theme);
+}

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

@@ -1,41 +1,46 @@
-<md-sidenav-container class="demo-root" fullscreen>
-  <md-sidenav #start>
-    <md-nav-list>
-      <a *ngFor="let navItem of navItems"
-         md-list-item
-         (click)="start.close()"
-         [routerLink]="[navItem.route]">
-        {{navItem.name}}
-      </a>
+<!-- Theme class needs to be applied above sidenav-container to style content background. -->
+<div [class.demo-dark-theme]="isDarkTheme">
+  <md-sidenav-container class="demo-root" fullscreen>
+    <md-sidenav #start>
+      <md-nav-list>
+        <a *ngFor="let navItem of navItems"
+           md-list-item
+           (click)="start.close()"
+           [routerLink]="[navItem.route]">
+          {{navItem.name}}
+        </a>
 
-      <hr>
+        <hr>
 
-      <a md-list-item
-         (click)="start.close()"
-         [routerLink]="['baseline']">
-        Baseline
-      </a>
-    </md-nav-list>
-    <button md-button (click)="start.close()">CLOSE</button>
-  </md-sidenav>
-  <div>
-    <md-toolbar color="primary">
-      <button md-icon-button (click)="start.open()">
-        <md-icon class="md-24" >menu</md-icon>
-      </button>
-      <div class="demo-toolbar">
-        <h1>Angular Material Demos</h1>
-        <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-          Fullscreen
+        <a md-list-item
+           (click)="start.close()"
+           [routerLink]="['baseline']">
+          Baseline
+        </a>
+      </md-nav-list>
+      <button md-button (click)="start.close()">CLOSE</button>
+    </md-sidenav>
+    <div>
+      <md-toolbar color="primary">
+        <button md-icon-button (click)="start.open()">
+          <md-icon class="md-24" >menu</md-icon>
         </button>
-        <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
-          {{root.dir.toUpperCase()}}
-        </button>
-      </div>
-    </md-toolbar>
+        <div class="demo-toolbar">
+          <h1>Angular Material Demos</h1>
+          <span class="demo-flex-fill"></span>
+          <button md-button (click)="isDarkTheme = !isDarkTheme">Toggle Theme</button>
+          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            Fullscreen
+          </button>
+          <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
+            {{root.dir.toUpperCase()}}
+          </button>
+        </div>
+      </md-toolbar>
 
-    <div #root="$implicit" dir="ltr" class="demo-content">
-      <router-outlet></router-outlet>
+      <div #root="$implicit" dir="ltr" class="demo-content">
+        <router-outlet></router-outlet>
+      </div>
     </div>
-  </div>
-</md-sidenav-container>
+  </md-sidenav-container>
+</div>

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

@@ -31,7 +31,6 @@ body {
 
     .demo-toolbar {
       display: flex;
-      justify-content: space-between;
       width: 100%;
     }
   }
@@ -41,6 +40,11 @@ body {
   }
 }
 
+// Fills remaining flex space.
+.demo-flex-fill {
+  flex: 1 1 auto;
+}
+
 // stretch to screen size in fullscreen mode
 .demo-content {
   width: 100%;

src/demo-app/demo-app/demo-app.ts

@@ -15,10 +15,14 @@ export class Home {}
   selector: 'demo-app',
   providers: [],
   templateUrl: 'demo-app.html',
-  styleUrls: ['demo-app.css'],
+  styleUrls: ['demo-app.css', 'demo-app-theme.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class DemoApp {
+
+  /** Whether the demo-app should use a dark theme or not. */
+  isDarkTheme: boolean = false;
+
   navItems = [
     {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},

src/demo-app/index.html

@@ -8,7 +8,6 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">