Merge branch 'master' into 2351/dialog-document-doctype

Author: crisbeto

.gitignore

@@ -33,4 +33,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
-/.chrome
+/.chrome

CHANGELOG.md

@@ -43,8 +43,8 @@ if (!$attrs['tabindex']) {
 For example, rather than doing this:
 ```html
 <md-button>Basic button</md-button>
-<md-button class="md-fab">FAB</md-button>
-<md-button class="md-icon-button">pony</md-button>
+<md-button class="mat-fab">FAB</md-button>
+<md-button class="mat-icon-button">pony</md-button>
 ```
 
 do this:
@@ -192,13 +192,13 @@ code organization.** This will allow users to much more easily override styles.
 
 For example, rather than doing this:
 ```scss
-md-calendar {
+.mat-calendar {
   display: block;
 
-  .md-month {
+  .mat-month {
     display: inline-block;
 
-    .md-date.md-selected {
+    .mat-date.mat-selected {
       font-weight: bold;
     }
   }
@@ -207,15 +207,15 @@ md-calendar {
 
 do this:
 ```scss
-md-calendar {
+.mat-calendar {
   display: block;
 }
 
-.md-calendar-month {
+.mat-calendar-month {
   display: inline-block;
 }
 
-.md-calendar-date.md-selected {
+.mat-calendar-date.mat-selected {
   font-weight: bold;
 }
 ```
@@ -260,11 +260,11 @@ This is a low-effort task that makes a big difference for low-vision users. Exam
 When it is not super obvious, include a brief description of what a class represents. For example:
 ```scss
 // The calendar icon button used to open the calendar pane.
-.md-datepicker-button { ... }
+.mat-datepicker-button { ... }
 
 // Floating pane that contains the calendar at the bottom of the input.
-.md-datepicker-calendar-pane { ... }
+.mat-datepicker-calendar-pane { ... }
 
 // Portion of the floating panel that sits, invisibly, on top of the input.
-.md-datepicker-input-mask { }
+.mat-datepicker-input-mask { }
 ``` 

CODING_STANDARDS.md

@@ -39,6 +39,7 @@ Also see our [`Good for community contribution`](https://github.com/angular/mate
 label.
 
 High level items planned for January 2017:
+
 * Initial version of md-autocomplete
 * Prototyping for data-table
 * Improvements to https://material.angular.io
@@ -73,8 +74,8 @@ High level items planned for January 2017:
 | ripples          |                           Available | [README][19] |   [#108][0108] |
 | dialog           |                           Available | [README][22] |   [#114][0114] |
 | snackbar / toast |                           Available | [README][21] |   [#115][0115] |
-| select           |                           Available |           -  |   [#118][0118] |
-| textarea         |                           Available |           -  |              - |
+| select           |                           Available | [README][23] |   [#118][0118] |
+| textarea         |                           Available | [README][5]  |              - |
 | autocomplete     |                         In-progress |           -  |   [#117][0117] |
 | chips            |  Initial version, features evolving |           -  |   [#120][0120] |
 | theming          |   Available, need guidance overlays | [Guide][20]  |              - |
@@ -114,6 +115,7 @@ High level items planned for January 2017:
 [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
 
 [0107]: https://github.com/angular/material2/issues/107
 [0119]: https://github.com/angular/material2/issues/119

README.md

@@ -1,4 +1,4 @@
-import {browser, by, element} from 'protractor';
+import {browser, by, element, ExpectedConditions} from 'protractor';
 import {screenshot} from '../../screenshot';
 
 
@@ -9,12 +9,16 @@ describe('button', () => {
     it('should prevent click handlers from executing when disabled', () => {
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
-      screenshot('clicked once');
+      browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+        .then(() => screenshot('clicked once'));
 
       element(by.id('disable-toggle')).click();
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
-      screenshot('click disabled');
+      browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+        .then(() => screenshot('click disabled'));
     });
   });
 });

e2e/components/button/button.e2e.ts

@@ -1,4 +1,4 @@
-import {browser, by, element, Key} from 'protractor';
+import {browser, by, element, Key, ExpectedConditions} from 'protractor';
 import {screenshot} from '../../screenshot';
 
 describe('checkbox', function () {
@@ -17,31 +17,32 @@ describe('checkbox', function () {
       checkboxEl.click();
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
+        browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+          .then(() => screenshot('checked'));
       });
-      screenshot('checked');
 
       checkboxEl.click();
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
+        browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+          .then(() => screenshot('unchecked'));
       });
-      screenshot('unchecked');
     });
 
     it('should toggle the checkbox when pressing space', () => {
       let inputEl = element(by.css('input[id=input-test-checkbox]'));
 
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
-        screenshot('start');
       });
 
       inputEl.sendKeys(Key.SPACE);
 
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
-        screenshot('pressed space');
       });
     });
-
   });
 });

e2e/components/checkbox/checkbox.e2e.ts

@@ -11,6 +11,12 @@ describe('dialog', () => {
     expectToExist('md-dialog-container');
   });
 
+  it('should open a template dialog', () => {
+    expectToExist('.my-template-dialog', false);
+    element(by.id('template')).click();
+    expectToExist('.my-template-dialog');
+  });
+
   it('should close by clicking on the backdrop', () => {
     element(by.id('default')).click();
 
@@ -29,6 +35,16 @@ describe('dialog', () => {
     });
   });
 
+  it('should close by pressing escape when the first tabbable element has lost focus', () => {
+    element(by.id('default')).click();
+
+    waitForDialog().then(() => {
+      clickElementAtPoint('md-dialog-container', { x: 0, y: 0 });
+      pressKeys(Key.ESCAPE);
+      expectToExist('md-dialog-container', false);
+    });
+  });
+
   it('should close by clicking on the "close" button', () => {
     element(by.id('default')).click();
 

e2e/components/dialog/dialog.e2e.ts

@@ -1,38 +1,38 @@
-import {browser, by, element, Key, ProtractorBy} from 'protractor';
+import {browser, by, element} from 'protractor';
 
 describe('fullscreen', () => {
-  beforeEach(() => browser.get('/fullscreen'));
 
-  let overlayInBody = () =>
-    browser.isElementPresent(by.css('body > .cdk-overlay-container') as ProtractorBy);
-  let overlayInFullscreen = () =>
-    browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container') as ProtractorBy);
+  beforeEach(() => browser.get('/fullscreen'));
 
   it('should open a dialog inside a fullscreen element and move it to the document body', () => {
     element(by.id('fullscreen')).click();
     element(by.id('dialog')).click();
 
-    overlayInFullscreen().then((isPresent: boolean) => {
-        expect(isPresent).toBe(true);
-        element(by.id('exitfullscreenindialog')).click();
-        overlayInBody().then((isPresent: boolean) => {
-            expect(isPresent).toBe(true);
-        });
-    });
+    expectOverlayInFullscreen();
+
+    element(by.id('exitfullscreenindialog')).click();
+    expectOverlayInBody();
   });
 
   it('should open a dialog inside the document body and move it to a fullscreen element', () => {
     element(by.id('dialog')).click();
-    overlayInBody().then((isPresent: boolean) => {
-        expect(isPresent).toBe(true);
-        element(by.id('fullscreenindialog')).click();
-        overlayInFullscreen().then((isPresent: boolean) => {
-            expect(isPresent).toBe(true);
-            element(by.id('exitfullscreenindialog')).click();
-            overlayInBody().then((isPresent: boolean) => {
-                expect(isPresent).toBe(true);
-            });
-        });
-    });
+    expectOverlayInBody();
+
+    element(by.id('fullscreenindialog')).click();
+    expectOverlayInFullscreen();
+
+    element(by.id('exitfullscreenindialog')).click();
+    expectOverlayInBody();
   });
+
+  /** Expects the overlay container to be inside of the body element. */
+  function expectOverlayInBody() {
+    expect(browser.isElementPresent(by.css('body > .cdk-overlay-container'))).toBe(true);
+  }
+
+  /** Expects the overlay container to be in fullscreen mode. */
+  function expectOverlayInFullscreen() {
+    expect(browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container'))).toBe(true);
+  }
+
 });

e2e/components/fullscreen/fullscreen.e2e.ts

@@ -1,11 +1,13 @@
 import {browser} from 'protractor';
 import {expectToExist} from '../../util/asserts';
+import {screenshot} from '../../screenshot';
 
 describe('grid-list', () => {
   beforeEach(() => browser.get('/grid-list'));
 
   it('should render a grid list container', () => {
     expectToExist('md-grid-list');
+    screenshot();
   });
 
   it('should render list items inside the grid list container', () => {

e2e/components/grid-list/grid-list.e2e.ts

@@ -1,4 +1,5 @@
 import {browser, by, element} from 'protractor';
+import {screenshot} from '../../screenshot';
 
 describe('icon', () => {
   describe('font icons by ligature', () => {
@@ -13,6 +14,7 @@ describe('icon', () => {
       testIcon.getAttribute('aria-label').then((attr: string) => {
         expect(attr).toEqual('favorite');
       });
+      screenshot();
     });
 
     it('should have the correct class when used', () => {

e2e/components/icon/icon.e2e.ts

@@ -1,11 +1,13 @@
 import {browser} from 'protractor';
 import {expectToExist} from '../../util/asserts';
+import {screenshot} from '../../screenshot';
 
 describe('list', () => {
   beforeEach(() => browser.get('/list'));
 
   it('should render a list container', () => {
     expectToExist('md-list');
+    screenshot();
   });
 
   it('should render list items inside the list container', () => {

e2e/components/list/list.e2e.ts

@@ -3,7 +3,7 @@ import {browser, by, element, ElementFinder} from 'protractor';
 export class MenuPage {
   constructor() { browser.get('/menu'); }
 
-  menu(): ElementFinder { return element(by.css('.md-menu-panel')); }
+  menu(): ElementFinder { return element(by.css('.mat-menu-panel')); }
 
   start(): ElementFinder { return element(by.id('start')); }
 
@@ -23,11 +23,11 @@ export class MenuPage {
 
   combinedTrigger(): ElementFinder { return element(by.id('combined-t')); }
 
-  beforeMenu(): ElementFinder { return element(by.css('.md-menu-panel.before')); }
+  beforeMenu(): ElementFinder { return element(by.css('.mat-menu-panel.before')); }
 
-  aboveMenu(): ElementFinder { return element(by.css('.md-menu-panel.above')); }
+  aboveMenu(): ElementFinder { return element(by.css('.mat-menu-panel.above')); }
 
-  combinedMenu(): ElementFinder { return element(by.css('.md-menu-panel.combined')); }
+  combinedMenu(): ElementFinder { return element(by.css('.mat-menu-panel.combined')); }
 
   getResultText() { return this.textArea().getText(); }
 }

e2e/components/menu/menu-page.ts

@@ -1,10 +1,11 @@
-import {browser, Key, protractor} from 'protractor';
+import {Key, protractor} from 'protractor';
 import {MenuPage} from './menu-page';
 import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '../../util/asserts';
 import {pressKeys} from '../../util/actions';
+import {screenshot} from '../../screenshot';
 
 describe('menu', () => {
-  const menuSelector = '.md-menu-panel';
+  const menuSelector = '.mat-menu-panel';
   let page: MenuPage;
 
   beforeEach(() => page = new MenuPage());
@@ -15,28 +16,33 @@ describe('menu', () => {
 
     expectToExist(menuSelector);
     expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
+    screenshot();
   });
 
   it('should close menu when menu item is clicked', () => {
     page.trigger().click();
     page.items(0).click();
     expectToExist(menuSelector, false);
+    screenshot();
   });
 
   it('should run click handlers on regular menu items', () => {
     page.trigger().click();
     page.items(0).click();
     expect(page.getResultText()).toEqual('one');
+    screenshot('one');
 
     page.trigger().click();
     page.items(1).click();
     expect(page.getResultText()).toEqual('two');
+    screenshot('two');
   });
 
   it('should run not run click handlers on disabled menu items', () => {
     page.trigger().click();
     page.items(2).click();
     expect(page.getResultText()).toEqual('');
+    screenshot();
   });
 
   it('should support multiple triggers opening the same menu', () => {
@@ -60,7 +66,7 @@ describe('menu', () => {
   it('should mirror classes on host to menu template in overlay', () => {
     page.trigger().click();
     page.menu().getAttribute('class').then((classes: string) => {
-      expect(classes).toContain('md-menu-panel custom');
+      expect(classes).toContain('mat-menu-panel custom');
     });
   });