sync test & address comments

Author: tinayuangao

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

@@ -51,7 +51,7 @@ <h4>Input Container</h4>
           <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (remove)="remove(person)">
             {{person.name}}
-            <md-icon mdChipRemove>cancel</md-icon>
+            <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
           </md-chip>
         </md-chip-list>
         <input mdInput placeholder="New Contributor..."
@@ -72,7 +72,7 @@ <h4>Input Container</h4>
         <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                  [removable]="removable" (remove)="remove(person)">
           {{person.name}}
-          <md-icon mdChipRemove>cancel</md-icon>
+          <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
         </md-chip>
       </md-chip-list>
       <md-input-container>

src/lib/chips/_chips-theme.scss

@@ -45,19 +45,8 @@ $mat-chip-line-height: 16px;
   $selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080);
   $selected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-selected-foreground);
 
-  $focus-color: mat-color($foreground, secondary-text);
-
   .mat-chip {
     @include mat-chips-color($unselected-foreground, $unselected-background);
-
-    .mat-chip-focus-border {
-      pointer-events: none;
-    }
-
-    &:focus {
-      outline: none;
-      border: 2px solid $focus-color;
-    }
   }
 
   .mat-chip.mat-chip-selected {

src/lib/chips/chip-input.spec.ts

@@ -4,9 +4,11 @@ import {Component, DebugElement} from '@angular/core';
 import {MdChipInput, MdChipInputEvent} from './chip-input';
 import {By} from '@angular/platform-browser';
 import {Directionality} from '../core';
-import {createKeyboardEvent} from '../core/testing/event-objects';
+import {createKeyboardEvent} from '@angular/cdk/testing';
 
-import {ENTER, COMMA} from '../core/keyboard/keycodes';
+import {ENTER} from '../core/keyboard/keycodes';
+
+const COMMA = 188;
 
 describe('MdChipInput', () => {
   let fixture: ComponentFixture<any>;

src/lib/chips/chip-list.spec.ts

@@ -2,13 +2,12 @@ import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/t
 import {Component, DebugElement, QueryList} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MdChip, MdChipList, MdChipsModule} from './index';
+import {MdChipList, MdChipsModule} from './index';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {SPACE, LEFT_ARROW, RIGHT_ARROW, TAB} from '../core/keyboard/keycodes';
 import {createKeyboardEvent} from '@angular/cdk/testing';
 
 import {MdInputModule} from '../input/index';
-import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, SPACE, TAB} from '../core/keyboard/keycodes';
+import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, TAB} from '../core/keyboard/keycodes';
 import {Directionality} from '../core';
 
 describe('MdChipList', () => {
@@ -17,7 +16,7 @@ describe('MdChipList', () => {
   let chipListNativeElement: HTMLElement;
   let chipListInstance: MdChipList;
   let testComponent: StandardChipList;
-  let chips: QueryList<MdChip>;
+  let chips: QueryList<any>;
   let manager: FocusKeyManager;
 
   let dir = 'ltr';

src/lib/chips/chip-list.ts

@@ -22,21 +22,10 @@ import {
 
 import {MdChip} from './chip';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {BACKSPACE, DELETE, SPACE, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes';
+import {BACKSPACE, DELETE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes';
 import {coerceBooleanProperty, Directionality} from '@angular/cdk';
 import {Subscription} from 'rxjs/Subscription';
 
-/** Utility to check if an input element has no value. */
-function _isInputEmpty(element: HTMLElement): boolean {
-  if (element && element.nodeName.toLowerCase() == 'input') {
-    let input = element as HTMLInputElement;
-
-    return !input.value;
-  }
-
-  return false;
-}
-
 /**
  * A material design chips component (named ChipList for it's similarity to the List component).
  *
@@ -116,7 +105,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
       this._subscribeChips(chips);
 
       // If we have 0 chips, attempt to focus an input (if available)
-      if (chips.length == 0) {
+      if (chips.length === 0) {
         this._focusInput();
       }
 
@@ -139,7 +128,10 @@ export class MdChipList implements AfterContentInit, OnDestroy {
    * it's selected state is always ignored.
    */
   @Input()
-  get selectable(): boolean { return this._selectable; }
+  get selectable(): boolean {
+    return this._selectable;
+  }
+
   set selectable(value: boolean) {
     this._selectable = coerceBooleanProperty(value);
   }
@@ -175,26 +167,19 @@ export class MdChipList implements AfterContentInit, OnDestroy {
   _keydown(event: KeyboardEvent) {
     let code = event.keyCode;
     let target = event.target as HTMLElement;
-    let isInputEmpty = _isInputEmpty(target);
+    let isInputEmpty = this._isInputEmpty(target);
     let isRtl = this._dir && this._dir.value == 'rtl';
 
-    let isPrevKey = (code == (isRtl ? RIGHT_ARROW : LEFT_ARROW));
-    let isNextKey = (code == (isRtl ? LEFT_ARROW : RIGHT_ARROW));
-    let isBackKey = (code == BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey);
-    let isForwardKey = (code == DOWN_ARROW || isNextKey);
+    let isPrevKey = (code === (isRtl ? RIGHT_ARROW : LEFT_ARROW));
+    let isNextKey = (code === (isRtl ? LEFT_ARROW : RIGHT_ARROW));
+    let isBackKey = (code === BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey);
     // If they are on an empty input and hit backspace/delete/left arrow, focus the last chip
     if (isInputEmpty && isBackKey) {
       this._keyManager.setLastItemActive();
       event.preventDefault();
       return;
     }
 
-    let focusedIndex = this._keyManager.activeItemIndex;
-
-    if (typeof focusedIndex === 'number' && this._isValidIndex(focusedIndex)) {
-      let focusedChip: MdChip = this.chips.toArray()[focusedIndex];
-    }
-
     // If they are on a chip, check for space/left/right, otherwise pass to our key manager (like
     // up/down keys)
     if (target && target.classList.contains('mat-chip')) {
@@ -225,7 +210,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
    */
   protected _updateTabIndex(): void {
     // If we have 0 chips, we should not allow keyboard focus
-    this._tabIndex = (this.chips.length == 0 ? -1 : 0);
+    this._tabIndex = (this.chips.length === 0 ? -1 : 0);
   }
 
   /**
@@ -263,7 +248,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
             this._keyManager.setActiveItem(chipIndex - 1);
           }
         }
-        if (this._keyManager.activeItemIndex == chipIndex) {
+        if (this._keyManager.activeItemIndex === chipIndex) {
           this._lastDestroyedIndex = chipIndex;
         }
 
@@ -308,4 +293,14 @@ export class MdChipList implements AfterContentInit, OnDestroy {
   private _isValidIndex(index: number): boolean {
     return index >= 0 && index < this.chips.length;
   }
+
+  private _isInputEmpty(element: HTMLElement): boolean {
+    if (element && element.nodeName.toLowerCase() === 'input') {
+      let input = element as HTMLInputElement;
+
+      return !input.value;
+    }
+
+    return false;
+  }
 }

src/lib/chips/chip-remove.spec.ts

@@ -48,20 +48,6 @@ describe('Chip Remove', () => {
 
       expect(testChip.didRemove).toHaveBeenCalled();
     });
-
-    it(`should monitors the parent chip's [removable] property`, () => {
-      let hrefElement = chipNativeElement.querySelector('a')!;
-
-      testChip.removable = true;
-      fixture.detectChanges();
-
-      expect(hrefElement.classList).not.toContain('mat-chip-remove-hidden');
-
-      testChip.removable = false;
-      fixture.detectChanges();
-
-      expect(hrefElement.classList).toContain('mat-chip-remove-hidden');
-    });
   });
 });
 

src/lib/chips/chip.spec.ts

@@ -1,9 +1,9 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, DebugElement}  from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {createKeyboardEvent} from '@angular/cdk/testing';
 import {MdChipList, MdChip, MdChipEvent, MdChipsModule} from './index';
 import {SPACE, DELETE, BACKSPACE} from '../core/keyboard/keycodes';
-import {createKeyboardEvent} from '../core/testing/event-objects';
 import {Directionality} from '../core';
 
 describe('Chips', () => {

src/lib/chips/chips.scss

@@ -2,6 +2,7 @@
 
 $mat-chip-vertical-padding: 8px;
 $mat-chip-horizontal-padding: 12px;
+$mat-chip-remove-margin: -4px;
 
 $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
@@ -63,3 +64,7 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 .mat-input-prefix .mat-chip-list-wrapper {
   margin-bottom: $mat-chip-vertical-padding;
 }
+
+.mat-chip-remove {
+  margin: 0 $mat-chip-remove-margin 0 0;
+}