feat(chips): add (select), [color] and dark theme to chips. (#2242)

Add new functionality/options to chips for managing selection/color.

*MdChipList Options*

 - `[selectable]` - Programmatically control whether or not the chips
   in the list are capable of being selected.
 - The SPACE key will automatically select the currently focused chip.

*MdChip Options*

 - `[color]` - Programmatically control the selected color of the
   chip.
 - `[selected]` - Programmatically control whether or not the chip
   is selected.
 - `(select)` - Event emitted when the chip is selected.
 - `(deselect)` - Event emitted when the chip is deselected.

Additionally, adds basic support for dark themeed chips using existing
colors from other components in the spec and cleanup demos by using
cards and toolbars like other demos.

References #120.

Author: topherfangio

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

@@ -1,68 +1,65 @@
 <div class="chips-demo">
-  <section>
-    <h3>Static Chips</h3>
-
-    <h5>Simple</h5>
-
-    <md-chip-list>
-      <md-chip>Chip 1</md-chip>
-      <md-chip>Chip 2</md-chip>
-      <md-chip>Chip 3</md-chip>
-    </md-chip-list>
-
-    <h5>Advanced</h5>
-
-    <md-chip-list>
-      <md-chip class="md-accent selected">Selected/Colored</md-chip>
-      <md-chip class="md-warn" *ngIf="visible"
-               (destroy)="alert('chip destroyed')" (click)="toggleVisible()">
-        With Events
-      </md-chip>
-    </md-chip-list>
-
-    <h5>Unstyled</h5>
-
-    <md-chip-list>
-      <md-basic-chip>Basic Chip 1</md-basic-chip>
-      <md-basic-chip>Basic Chip 2</md-basic-chip>
-      <md-basic-chip>Basic Chip 3</md-basic-chip>
-    </md-chip-list>
-
-    <h3>Material Contributors</h3>
-
-    <md-chip-list>
-      <md-chip *ngFor="let person of people; let even = even" [ngClass]="[color, even ? 'selected' : '' ]">
-        {{person.name}}
-      </md-chip>
-    </md-chip-list>
-
-    <br />
-
-    <md-input #input (keyup.enter)="add(input)" (blur)="add(input)" placeholder="New Contributor...">
-    </md-input>
-
-    <h3>Stacked Chips</h3>
-
-    <p>
-      You can also stack the chips if you want them on top of each other.
-    </p>
-
-    <md-chip-list class="md-chip-list-stacked">
-      <md-chip (focus)="color = ''" class="selected">
-        None
-      </md-chip>
-
-      <md-chip (focus)="color = 'md-primary'" class="selected md-primary">
-        Primary
-      </md-chip>
-
-      <md-chip (focus)="color = 'md-accent'" class="selected md-accent">
-        Accent
-      </md-chip>
-
-      <md-chip (focus)="color = 'md-warn'" class="selected md-warn">
-        Warn
-      </md-chip>
-    </md-chip-list>
-  </section>
+  <md-card>
+    <md-toolbar color="primary">Static Chips</md-toolbar>
+
+    <md-card-content>
+      <h4>Simple</h4>
+
+      <md-chip-list>
+        <md-chip>Chip 1</md-chip>
+        <md-chip>Chip 2</md-chip>
+        <md-chip>Chip 3</md-chip>
+      </md-chip-list>
+
+      <h4>Unstyled</h4>
+
+      <md-chip-list>
+        <md-basic-chip>Basic Chip 1</md-basic-chip>
+        <md-basic-chip>Basic Chip 2</md-basic-chip>
+        <md-basic-chip>Basic Chip 3</md-basic-chip>
+      </md-chip-list>
+
+      <h4>Advanced</h4>
+
+      <md-chip-list selectable="false">
+        <md-chip color="accent" selected="true">Selected/Colored</md-chip>
+        <md-chip color="warn" selected="true" *ngIf="visible"
+                 (destroy)="alert('chip destroyed')" (click)="toggleVisible()">
+          With Events
+        </md-chip>
+      </md-chip-list>
+    </md-card-content>
+  </md-card>
+
+  <md-card>
+    <md-toolbar color="primary">Dynamic Chips</md-toolbar>
+
+    <md-card-content>
+      <h4>Input Container</h4>
+
+      <md-chip-list>
+        <md-chip *ngFor="let person of people" [color]="color">
+          {{person.name}}
+        </md-chip>
+      </md-chip-list>
+
+      <md-input-container>
+        <input md-input #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
+      </md-input-container>
+
+      <h4>Stacked Chips</h4>
+
+      <p>
+        You can also stack the chips if you want them on top of each other and/or use the
+        <code>(focus)</code> event to run custom code.
+      </p>
+
+      <md-chip-list class="md-chip-list-stacked">
+        <md-chip *ngFor="let aColor of availableColors"
+                 (focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
+          {{aColor.name}}
+        </md-chip>
+      </md-chip-list>
+    </md-card-content>
+  </md-card>
 </div>

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

@@ -4,6 +4,19 @@
     max-width: 200px;
   }
 
+  md-card {
+    padding: 0;
+    margin: 16px;
+
+    & md-toolbar {
+      margin: 0;
+    }
+
+    & md-card-content {
+      padding: 24px;
+    }
+  }
+
   md-basic-chip {
     margin: auto 10px;
   }

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

@@ -5,6 +5,11 @@ export interface Person {
   name: string;
 }
 
+export interface DemoColor {
+  name: string;
+  color: string;
+}
+
 @Component({
   moduleId: module.id,
   selector: 'chips-demo',
@@ -24,6 +29,13 @@ export class ChipsDemo {
     { name: 'Paul' }
   ];
 
+  availableColors: DemoColor[] = [
+    { name: 'none', color: '' },
+    { name: 'Primary', color: 'primary' },
+    { name: 'Accent', color: 'accent' },
+    { name: 'Warn', color: 'warn' }
+  ];
+
   alert(message: string): void {
     alert(message);
   }

src/lib/chips/_chips-theme.scss

@@ -1,3 +1,4 @@
+@import '../core/theming/palette';
 @import '../core/theming/theming';
 
 @mixin md-chips-theme($theme) {
@@ -6,27 +7,40 @@
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  // Use spec-recommended color for regular foreground, and utilise contrast color for a grey very
+  // close to the selected spec since no guidance is provided and to ensure palette consistency.
+  $light-foreground: rgba(0, 0, 0, 0.87);
+  $light-selected-foreground: md-contrast($md-grey, 600);
+
+  // The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back
+  // to standard background and foreground colors.
+  $unselected-background: if($is-dark-theme, md-color($background, card), #e0e0e0);
+  $unselected-foreground: if($is-dark-theme, md-color($foreground, text), $light-foreground);
+
+  $selected-background: if($is-dark-theme, md-color($background, app-bar), #808080);
+  $selected-foreground: if($is-dark-theme, md-color($foreground, text), $light-selected-foreground);
 
   .md-chip {
-    background-color: #e0e0e0;
-    color: rgba(0, 0, 0, 0.87);
+    background-color: $unselected-background;
+    color: $unselected-foreground;
   }
 
-  .md-chip.selected {
-    // There is no dark theme in the current spec, so this applies to both
-    background-color: #808080;
-
-    // Use a contrast color for a grey very close to the background color
-    color: md-contrast($md-grey, 600);
+  .md-chip.md-chip-selected {
+    background-color: $selected-background;
+    color: $selected-foreground;
 
     &.md-primary {
       background-color: md-color($primary, 500);
       color: md-contrast($primary, 500);
     }
+
     &.md-accent {
       background-color: md-color($accent, 500);
       color: md-contrast($accent, 500);
     }
+
     &.md-warn {
       background-color: md-color($warn, 500);
       color: md-contrast($warn, 500);