feat(input): add support for more input attributes

.travis.yml

@@ -46,6 +46,7 @@ matrix:
   allow_failures:
   - env: "MODE=saucelabs_optional"
   - env: "MODE=browserstack_optional"
+  - env: "MODE=e2e"
 
 install:
   - npm install

CHANGELOG.md

@@ -1,3 +1,27 @@
+<a name="2.0.0-alpha.4"></a>
+# [2.0.0-alpha.4 mahogany-tambourine](https://github.com/angular/material2/compare/2.0.0-alpha.3...v2.0.0-alpha.4) (2016-05-04)
+
+
+### Bug Fixes
+
+* **button:** cleaned up button theming([0672356](https://github.com/angular/material2/commit/0672356))
+* **checkbox:** fix horizontal spacing between checkboxes and radio buttons([f4a7266](https://github.com/angular/material2/commit/f4a7266))
+* **sidenav:** add min width for empty navs([dbe3cc5](https://github.com/angular/material2/commit/dbe3cc5))
+* **sidenav:** prevent content from scrolling when sidenav is open([fea5923](https://github.com/angular/material2/commit/fea5923))
+* **theme:** new, more delightful default theme([2f3e9db](https://github.com/angular/material2/commit/2f3e9db))
+* update to @angular 2.0.0-rc.0 ([#384](https://github.com/angular/material2/issues/384))([04c8a1f](https://github.com/angular/material2/commit/04c8a1f))
+
+
+### Features
+
+* **icon:** initial md-icon implementation ([#281](https://github.com/angular/material2/issues/281))([a094a33](https://github.com/angular/material2/commit/a094a33))
+* **card:** add alignment shortcuts for md-card-actions([77be2df](https://github.com/angular/material2/commit/77be2df))
+* **grid-list:** basic scaffold for grid list (unreleased)([a9e1fa5](https://github.com/angular/material2/commit/a9e1fa5))
+* **list:** add icon support([7b3698c](https://github.com/angular/material2/commit/7b3698c))
+* **sidenav:** add fullscreen mode([aa6c740](https://github.com/angular/material2/commit/aa6c740))
+
+
+
 <a name="2.0.0-alpha.3"></a>
 # [2.0.0-alpha.3 cotton-candelabrum](https://github.com/angular/material2/compare/2.0.0-alpha.2...v2.0.0-alpha.3) (2016-04-21)
 

angular-cli-build.js

@@ -20,17 +20,24 @@ module.exports = function(defaults) {
         'src/core/style'
       ]
     },
-    vendorNpmFiles: []
+    vendorNpmFiles: [
+      'systemjs/dist/system-polyfills.js',
+      'systemjs/dist/system.src.js',
+      'zone.js/dist/*.js',
+      'es6-shim/es6-shim.js',
+      'reflect-metadata/*.js',
+      'rxjs/**/*.js',
+      '@angular/**/*.js',
+    ]
   });
 
-  const ngTree = angularAppTree.toTree();
-  const cssAutoprefixed = autoPrefixerTree(new Funnel(ngTree, {
+  const cssAutoprefixed = autoPrefixerTree(new Funnel(angularAppTree, {
     include: [ '**/*.css' ]
   }));
 
   return new MergeTree([
     new Funnel('src', { include: ['**/*.scss']}),
-    angularAppTree.toTree(),
-    cssAutoprefixed
+    angularAppTree,
+    cssAutoprefixed,
   ], { overwrite: true });
 };

angular-cli.json

@@ -0,0 +1,25 @@
+{
+  "project": {
+    "version": "0.0.37",
+    "name": "material2"
+  },
+  "apps": [
+    {"main": "src/main.ts", "tsconfig": "src/tsconfig.json"}
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "test/protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "test/karma.conf.js"
+    }
+  },
+  "defaults": {
+    "prefix": "",
+    "sourceDir": "src"
+  }
+}

package.json

@@ -19,51 +19,57 @@
     "inline-resources": "gulp inline-resources",
     "deploy": "firebase deploy"
   },
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "license": "MIT",
   "engines": {
     "node": ">= 4.2.1 < 5"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.15",
+    "@angular/common": "2.0.0-rc.0",
+    "@angular/compiler": "2.0.0-rc.0",
+    "@angular/core": "2.0.0-rc.0",
+    "@angular/router": "2.0.0-rc.0",
+    "@angular/http": "2.0.0-rc.0",
+    "@angular/platform-browser": "2.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.0",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
-    "systemjs": "0.19.20",
-    "zone.js": "0.6.10"
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "systemjs": "0.19.26",
+    "zone.js": "0.6.12"
   },
   "devDependencies": {
     "add-stream": "^1.0.0",
-    "angular-cli": "^0.0.31",
+    "angular-cli": "0.0.37",
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
     "browserstacktunnel-wrapper": "^1.4.2",
     "conventional-changelog": "^1.1.0",
-    "ember-cli-inject-live-reload": "^1.3.0",
+    "ember-cli-inject-live-reload": "^1.4.0",
     "firebase-tools": "^2.2.1",
     "fs-extra": "^0.26.5",
     "glob": "^6.0.4",
     "gulp": "^3.9.1",
     "gulp-inline-ng2-template": "^1.1.2",
-    "jasmine-core": "^2.3.4",
+    "jasmine-core": "^2.4.1",
     "js-yaml": "^3.5.2",
     "karma": "^0.13.15",
     "karma-browserstack-launcher": "^0.1.7",
-    "karma-chrome-launcher": "^0.2.1",
+    "karma-chrome-launcher": "^0.2.3",
     "karma-firefox-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.6",
+    "karma-jasmine": "^0.3.8",
     "karma-sauce-launcher": "^0.2.14",
     "node-sass": "^3.4.2",
-    "protractor": "^3.1.1",
+    "protractor": "^3.3.0",
     "sass": "^0.5.0",
     "strip-ansi": "^3.0.0",
     "symlink-or-copy": "^1.0.1",
     "ts-node": "^0.5.5",
     "tslint": "^3.5.0",
     "typescript": "^1.8.0",
-    "typings": "^0.6.8",
+    "typings": "^0.8.1",
     "which": "^1.2.4"
   }
 }

src/components/button/README.md

@@ -27,23 +27,23 @@ There are five types of buttons:
     * Defaults background to "accent" palette defined in theme
     * Box shadow applied
     * 40 by 40 px
- 
+
 Each is an attribute directive that you can add to a `button` or `a` tag.  You can provide custom content to the button by inserting it
 between the tags, as you would with a normal button.
- 
+
 Example:
- 
+
  ```html
 <button md-button>FLAT</button>
 <button md-raised-button>RAISED</button>
 <button md-icon-button>
-    <i class="material-icons md-24">favorite</i>
+    <md-icon class="md-24">favorite</md-icon>
 </button>
 <button md-fab>
-    <i class="material-icons md-24">add</i>
+    <md-icon class="md-24">add</md-icon>
 </button>
 <button md-mini-fab>
-    <i class="material-icons md-24">add</i>
+    <md-icon class="md-24">add</md-icon>
 </button>
  ```
 
@@ -53,13 +53,13 @@ Output:
 
 ### Theming
 
-All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute. 
+All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
 Simply pass in the palette name.
 
-In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background. 
+In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.
 
 Example:
- 
+
  ```html
 <button md-raised-button color="primary">PRIMARY</button>
 <button md-raised-button color="accent">ACCENT</button>
@@ -90,8 +90,8 @@ Output:
  * In high contrast mode, a strong border is added to the button to make it easier to see.
  * Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not.
  * As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements.
- 
- 
+
+
 ### Upcoming work
 
 We will also be adding ink ripples to buttons in an upcoming milestone.

src/components/button/_button-base.scss

@@ -51,7 +51,7 @@ $md-mini-fab-padding: 8px !default;
   font-size: $md-body-font-size-base;
   font-family: $md-font-family;
   font-weight: 500;
-  color: md-color($md-foreground, text);
+  color: currentColor;
 
   // Sizing.
   margin: $md-button-margin;
@@ -69,7 +69,7 @@ $md-mini-fab-padding: 8px !default;
 %md-raised-button {
   @extend %md-button-base;
 
-  @include md-elevation(1);
+  @include md-elevation(2);
   @include md-button-theme('color', default-contrast);
   @include md-button-theme('background-color');
 
@@ -82,7 +82,7 @@ $md-mini-fab-padding: 8px !default;
               md-elevation-transition-property-value();
 
   &:active {
-    @include md-elevation(2);
+    @include md-elevation(8);
   }
 
   &.md-button-focus {
@@ -102,9 +102,14 @@ $md-mini-fab-padding: 8px !default;
   min-width: 0;
   border-radius: $md-fab-border-radius;
   background-color: md-color($md-accent);
+  color: md-color($md-accent, default-contrast);
   width: $size;
   height: $size;
-  padding: $padding;
+  padding: 0;
+
+  i, md-icon {
+    padding: $padding 0;
+  }
 
   &.md-button-focus {
     background-color: md-color($md-accent, 600);

src/components/button/_button-theme.scss

@@ -1,6 +1,6 @@
 
 // Applies specified coloring to three supported palettes
-@mixin md-button-theme ($property, $color:500, $opacity: 1) {
+@mixin md-button-theme ($property, $color: 'default', $opacity: 1) {
   &.md-primary {
     #{$property}: md-color($md-primary, $color, $opacity);
   }

src/components/button/button.spec.ts

@@ -1,16 +1,11 @@
-import {
-  it,
-  describe,
-  expect,
-  beforeEach,
-  inject,
-  TestComponentBuilder
-} from 'angular2/testing';
-import {Component} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
-
+import {it, describe, expect, beforeEach, inject} from '@angular/core/testing';
+import {TestComponentBuilder} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {MdButton, MdAnchor} from './button';
 
+
+
 export function main() {
   describe('MdButton', () => {
     let builder: TestComponentBuilder;
@@ -21,7 +16,7 @@ export function main() {
 
     // General button tests
     it('should apply class based on color attribute', (done: () => void) => {
-      return builder.createAsync(TestApp).then((fixture) => {
+      return builder.createAsync(TestApp).then(fixture => {
         let testComponent = fixture.debugElement.componentInstance;
         let buttonDebugElement = fixture.debugElement.query(By.css('button'));
         let aDebugElement = fixture.debugElement.query(By.css('a'));
@@ -40,7 +35,7 @@ export function main() {
     });
 
     it('should should not clear previous defined classes', (done: () => void) => {
-      return builder.createAsync(TestApp).then((fixture) => {
+      return builder.createAsync(TestApp).then(fixture => {
         let testComponent = fixture.debugElement.componentInstance;
         let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
@@ -66,7 +61,7 @@ export function main() {
     // Regular button tests
     describe('button[md-button]', () => {
       it('should handle a click on the button', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
@@ -77,7 +72,7 @@ export function main() {
       });
 
       it('should not increment if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
@@ -96,7 +91,7 @@ export function main() {
     // Anchor button tests
     describe('a[md-button]', () => {
       it('should not redirect if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('a'));
 
@@ -110,7 +105,7 @@ export function main() {
       });
 
       it('should remove tabindex if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('a'));
           expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(null);
@@ -123,7 +118,7 @@ export function main() {
       });
 
       it('should add aria-disabled attribute if disabled', (done: () => void) => {
-        return builder.createAsync(TestApp).then((fixture) => {
+        return builder.createAsync(TestApp).then(fixture => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('a'));
           fixture.detectChanges();

src/components/button/button.ts

@@ -6,7 +6,7 @@ import {
   ChangeDetectionStrategy,
   ElementRef,
   Renderer,
-} from 'angular2/core';
+} from '@angular/core';
 
 // TODO(jelbourn): Ink ripples.
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.

src/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/button",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Angular 2 Material button",
   "main": "./button.js",
   "typings": "./button.d.ts",
@@ -23,7 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "angular2": "^2.0.0-beta.8",
-    "@angular2-material/core": "2.0.0-alpha.3"
+    "@angular2-material/core": "2.0.0-alpha.4"
   }
 }

src/components/card/README.md

@@ -51,6 +51,11 @@ Output:
 
 <img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
 
+#### Preset shortcuts
+
+`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
+the main axis (flex-end). The default is `align="start"` (flex-start).
+
 ### Preset layouts
 
 You can also leverage preset layouts that format some of the sections together.