docs(component-styles): add chapter about styling components

public/docs/_examples/component-styles/e2e-spec.js

@@ -0,0 +1,69 @@
+describe('Component Style Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('scopes component styles to component view', function() {
+    var componentH1 = element(by.css('hero-app > h1'));
+    var externalH1 = element(by.css('body > h1'));
+
+    expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
+    expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
+  });
+
+
+  it('allows styling :host element', function() {
+    var host = element(by.css('hero-details'));
+
+    expect(host.getCssValue('borderWidth')).toEqual('1px');
+  });
+
+  it('supports :host() in function form', function() {
+    var host = element(by.css('hero-details'));
+
+    host.element(by.buttonText('Activate')).click();
+    expect(host.getCssValue('borderWidth')).toEqual('3px');
+  });
+
+  it('allows conditional :host-context() styling', function() {
+    var h2 = element(by.css('hero-details h2'));
+
+    expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
+  });
+
+  it('styles both view and content children with /deep/', function() {
+    var viewH3 = element(by.css('hero-team h3'));
+    var contentH3 = element(by.css('hero-controls h3'));
+
+    expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
+    expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
+  });
+
+  it('includes styles loaded with CSS @import', function() {
+    var host = element(by.css('hero-details'));
+
+    expect(host.getCssValue('padding')).toEqual('10px');
+  });
+
+  it('processes template inline styles', function() {
+    var button = element(by.css('hero-controls button'));
+    var externalButton = element(by.css('body > button'));
+    expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+    expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
+  });
+
+  it('processes template <link>s', function() {
+    var li = element(by.css('hero-team li:first-child'));
+    var externalLi = element(by.css('body > ul li'));
+
+    expect(li.getCssValue('listStyleType')).toEqual('square');
+    expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
+  });
+
+  it('supports relative loading with moduleId', function() {
+    var host = element(by.css('quest-summary'));
+    expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+  });
+
+});

public/docs/_examples/component-styles/ts/.gitignore

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts

@@ -0,0 +1,19 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroDetailsComponent} from './hero-details.component';
+import {HeroControlsComponent} from './hero-controls.component';
+import {QuestSummaryComponent} from './quest-summary.component';
+
+@Component({
+  selector: 'hero-app-main',
+  template: `
+    <quest-summary></quest-summary>
+    <hero-details [hero]=hero [class.active]=hero.active>
+      <hero-controls [hero]=hero></hero-controls>
+    </hero-details>
+  `,
+  directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
+})
+export class HeroAppMainComponent {
+  @Input() hero: Hero;
+}

public/docs/_examples/component-styles/ts/app/hero-app.component.ts

@@ -0,0 +1,25 @@
+import {Component, HostBinding} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroAppMainComponent} from './hero-app-main.component';
+
+// #docregion
+@Component({
+  selector: 'hero-app',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-app-main [hero]=hero></hero-app-main>`,
+  styles: ['h1 { font-weight: normal; }'],
+  directives: [HeroAppMainComponent]
+})
+// #enddocregion
+export class HeroAppComponent {
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  )
+
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+
+}

public/docs/_examples/component-styles/ts/app/hero-controls.component.ts

@@ -0,0 +1,26 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+
+// #docregion inlinestyles
+@Component({
+  selector: 'hero-controls',
+  template: `
+    <style>
+      button {
+        background-color: white;
+        border: 1px solid #777;
+      }
+    </style>
+    <h3>Controls</h3>
+    <button (click)="activate()">Activate</button>
+  `
+})
+// #enddocregion inlinestyles
+export class HeroControlsComponent {
+
+  @Input() hero: Hero;
+
+  activate() {
+    this.hero.active = true;
+  }
+}

public/docs/_examples/component-styles/ts/app/hero-details-box.css

@@ -0,0 +1,3 @@
+:host {
+  padding: 10px;
+}

public/docs/_examples/component-styles/ts/app/hero-details.component.css

@@ -0,0 +1,28 @@
+/* #docregion import */
+@import 'hero-details-box.css';
+/* #enddocregion import */
+
+/* #docregion host */
+:host {
+  display: block;
+  border: 1px solid black;
+}
+/* #enddocregion host */
+
+/* #docregion hostfunction */
+:host(.active) {
+  border-width: 3px;
+}
+/* #enddocregion hostfunction */
+
+/* #docregion hostcontext */
+:host-context(.theme-light) h2 {
+  background-color: #eef;
+}
+/* #enddocregion hostcontext */
+
+/* #docregion deep */
+:host /deep/ h3 {
+  font-style: italic;
+}
+/* #enddocregion deep */

public/docs/_examples/component-styles/ts/app/hero-details.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroTeamComponent} from './hero-team.component';
+
+// #docregion styleurls
+@Component({
+  selector: 'hero-details',
+  template: `
+    <h2>{{hero.name}}</h2>
+    <hero-team [hero]=hero></hero-team>
+    <ng-content></ng-content>
+  `,
+  styleUrls: ['app/hero-details.component.css'],
+  directives: [HeroTeamComponent]
+})
+export class HeroDetailsComponent {
+// #enddocregion styleurls
+
+  @Input() hero:Hero;
+}

public/docs/_examples/component-styles/ts/app/hero-team.component.css

@@ -0,0 +1,3 @@
+li {
+  list-style-type: square;
+}

public/docs/_examples/component-styles/ts/app/hero-team.component.ts

@@ -0,0 +1,19 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+
+// #docregion stylelink
+@Component({
+  selector: 'hero-team',
+  template: `
+    <link rel="stylesheet" href="app/hero-team.component.css">
+    <h3>Team</h3>
+    <ul>
+      <li *ngFor="#member of hero.team">
+        {{member}}
+      </li>
+    </ul>`
+})
+// #enddocregion stylelink
+export class HeroTeamComponent {
+  @Input() hero: Hero;
+}

public/docs/_examples/component-styles/ts/app/hero.ts

@@ -0,0 +1,7 @@
+export class Hero {
+  active:boolean;
+
+  constructor(public name:string,
+              public team:string[]) {
+  }
+}

public/docs/_examples/component-styles/ts/app/main.ts

@@ -0,0 +1,4 @@
+import {bootstrap} from 'angular2/platform/browser';
+import {HeroAppComponent} from './hero-app.component';
+
+bootstrap(HeroAppComponent);

public/docs/_examples/component-styles/ts/app/quest-summary.component.css

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  background-color: green;
+  color: white;
+}

public/docs/_examples/component-styles/ts/app/quest-summary.component.html

@@ -0,0 +1 @@
+No quests in progress

public/docs/_examples/component-styles/ts/app/quest-summary.component.ts

@@ -0,0 +1,32 @@
+// #docplaster
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+// #docregion
+// Let TypeScript know about the special SystemJS __moduleName variable
+declare var __moduleName: string;
+// #enddocregion
+// moduleName is not set in some module loaders; set it explicitly
+if (!__moduleName) {
+  __moduleName = `http://${location.host}/${location.pathname}/app/`;
+}
+console.log(`The __moduleName is ${__moduleName} `);
+// #docregion
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'quest-summary',
+  // #docregion urls
+  templateUrl: 'quest-summary.component.html',
+  styleUrls:  ['quest-summary.component.css']
+  // #enddocregion urls  
+// #enddocregion
+/*
+  // #docregion encapsulation.native
+  // warning: few browsers support shadow DOM encapsulation at this time
+  encapsulation: ViewEncapsulation.Native 
+  // #enddocregion encapsulation.native
+*/
+// #docregion
+})
+export class QuestSummaryComponent { }
+// #enddocregion

public/docs/_examples/component-styles/ts/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+    <title>Component Styles</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="../node_modules/systemjs/dist/system.src.js"></script>
+    <script src="../node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script>
+      System.config({
+        packages: {
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
+      });
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+ </head>
+
+  <body>
+    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
+    <hero-app></hero-app>
+    <button style="visibility: hidden;">External button for E2E test</button>
+    <ul style="visibility: hidden;">
+      <li>External list for E2E test</li>
+    </ul>
+  </body>
+
+</html>

public/docs/_examples/component-styles/ts/plnkr.json

@@ -0,0 +1,9 @@
+{
+  "description": "Component Styles",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.native.*"
+  ],
+  "tags": ["CSS"]
+}

public/docs/dart/latest/guide/_data.json

@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",

public/docs/dart/latest/guide/component-styles.jade

@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")

public/docs/js/latest/guide/_data.json

@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",

public/docs/js/latest/guide/component-styles.jade

@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")

public/docs/ts/latest/guide/_data.json

@@ -56,12 +56,17 @@
     "nextable": true,
     "basics": true
   },
-  
+
   "attribute-directives": {
     "title": "Attribute Directives",
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",
@@ -107,7 +112,7 @@
     "title": "TypeScript Configuration",
     "intro": "TypeScript configuration for Angular 2 developers"
   },
-  
+
   "upgrade": {
     "title": "Upgrading from 1.x",
     "intro": "Angular 1 applications can be incrementally upgraded to Angular 2."