Skip to content

Commit

Permalink
Merge branch 'master' into focus-trap-refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
crisbeto authored Feb 23, 2017
2 parents 016f9c2 + a4da08b commit cf14d74
Show file tree
Hide file tree
Showing 67 changed files with 1,049 additions and 327 deletions.
65 changes: 33 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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 | - | - |
Expand All @@ -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
Expand Down
18 changes: 13 additions & 5 deletions e2e/components/slide-toggle/slide-toggle.e2e.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand Down
3 changes: 3 additions & 0 deletions e2e/screenshot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion guides/theming-your-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
1 change: 0 additions & 1 deletion src/demo-app/button/button-demo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
section {
display: flex;
align-items: center;
background-color: #f7f7f7;
margin: 8px;
}

Expand Down
10 changes: 10 additions & 0 deletions src/demo-app/checkbox/checkbox-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
10 changes: 8 additions & 2 deletions src/demo-app/demo-app-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -47,6 +52,7 @@ import {StyleDemo} from './style/style-demo';
ReactiveFormsModule,
RouterModule.forRoot(DEMO_APP_ROUTES),
MaterialModule.forRoot(),
MdSelectionModule,
],
declarations: [
AutocompleteDemo,
Expand Down Expand Up @@ -93,7 +99,7 @@ import {StyleDemo} from './style/style-demo';
SunnyTabContent,
RainyTabContent,
FoggyTabContent,
PlatformDemo
PlatformDemo,
],
providers: [
{provide: OverlayContainer, useClass: FullscreenOverlayContainer}
Expand Down
16 changes: 16 additions & 0 deletions src/demo-app/demo-app/demo-app-theme.scss
Original file line number Diff line number Diff line change
@@ -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);
}
77 changes: 41 additions & 36 deletions src/demo-app/demo-app/demo-app.html
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 5 additions & 1 deletion src/demo-app/demo-app/demo-app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ body {

.demo-toolbar {
display: flex;
justify-content: space-between;
width: 100%;
}
}
Expand All @@ -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%;
Expand Down
6 changes: 5 additions & 1 deletion src/demo-app/demo-app/demo-app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand Down
1 change: 0 additions & 1 deletion src/demo-app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading

0 comments on commit cf14d74

Please sign in to comment.