Add chip list container

Author: tinayuangao

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

@@ -44,24 +44,19 @@ <h4>Input Container</h4>
         <code>&lt;md-input-container&gt;</code>.
       </p>
 
-      <md-input-container>
+      <md-input-container mdChipListContainer>
         <md-chip-list mdPrefix #chipList>
           <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-chip>
-
         </md-chip-list>
         <input mdInput placeholder="New Contributor..."
                [mdChipList] ="chipList" (chipAdded)="add($event)"
                [separatorKeys]="separatorKeys" [addOnBlur]="addOnBlur" />
       </md-input-container>
 
-      <md-input-container>
-        <input mdInput placeholder="New Contributor..."/>
-      </md-input-container>
-
       <p>
         The example above has overridden the <code>[separatorKeys]</code> input to allow for
         <code>ENTER</code>, <code>COMMA</code> and <code>SEMI COLON</code> keys.

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

@@ -102,9 +102,9 @@ describe('MdChipInput', () => {
 @Component({
   template: `
     <md-chip-list>
-      <input mdChipInput [addOnBlur]="addOnBlur" [separatorKeys]="separatorKeys"
-             (chipAdded)="add($event)" />
     </md-chip-list>
+    <input mdInput mdChipList [addOnBlur]="addOnBlur" [separatorKeys]="separatorKeys"
+       (chipAdded)="add($event)" />
   `
 })
 class TestChipInput {

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

@@ -43,7 +43,7 @@ describe('MdChipList', () => {
         setupStandardList();
       }));
 
-      it('adds the `mat-chip-list` class', () => {
+      it('should add the `mat-chip-list` class', () => {
         expect(chipListNativeElement.classList).toContain('mat-chip-list');
       });
     });
@@ -65,7 +65,6 @@ describe('MdChipList', () => {
         let array = chips.toArray();
         let lastIndex = array.length - 1;
         let lastItem = array[lastIndex];
-
         lastItem.focus();
         fixture.detectChanges();
 
@@ -98,7 +97,7 @@ describe('MdChipList', () => {
       });
 
       describe('on chip destroy', () => {
-        it('focuses the next item', () => {
+        it('should focus the next item', () => {
           let array = chips.toArray();
           let midItem = array[2];
 
@@ -114,7 +113,7 @@ describe('MdChipList', () => {
         });
 
 
-        it('focuses the previous item', () => {
+        it('should focus the previous item', () => {
           let array = chips.toArray();
           let lastIndex = array.length - 1;
           let lastItem = array[lastIndex];
@@ -140,7 +139,7 @@ describe('MdChipList', () => {
           manager = chipListInstance._keyManager;
         }));
 
-        it('LEFT ARROW focuses previous item', () => {
+        it('should focus previous item when press LEFT ARROW', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
           let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;
 
@@ -161,7 +160,7 @@ describe('MdChipList', () => {
           expect(manager.activeItemIndex).toEqual(lastIndex - 1);
         });
 
-        it('RIGHT ARROW focuses next item', () => {
+        it('should focus next item when press RIGHT ARROW', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
           let firstNativeChip = nativeChips[0] as HTMLElement;
 
@@ -191,7 +190,7 @@ describe('MdChipList', () => {
           manager = chipListInstance._keyManager;
         }));
 
-        it('RIGHT ARROW focuses previous item', () => {
+        it('should focus previous item when press RIGHT ARROW', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
           let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;
 
@@ -213,7 +212,7 @@ describe('MdChipList', () => {
           expect(manager.activeItemIndex).toEqual(lastIndex - 1);
         });
 
-        it('LEFT ARROW focuses next item', () => {
+        it('should focus next item when press LEFT ARROW', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
           let firstNativeChip = nativeChips[0] as HTMLElement;
 
@@ -234,7 +233,7 @@ describe('MdChipList', () => {
           expect(manager.activeItemIndex).toEqual(1);
         });
 
-        it('allow focus to escape when tabbing away', fakeAsync(() => {
+        it('should allow focus to escape when tabbing away', fakeAsync(() => {
           chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
 
           expect(chipListInstance._tabIndex)
@@ -259,15 +258,10 @@ describe('MdChipList', () => {
         manager = chipListInstance._keyManager;
       });
 
-      it('SPACE ignores selection', () => {
-        let SPACE_EVENT = createKeyboardEvent('keydown', SPACE);
-        let firstChip: MdChip = chips.toArray()[0];
-      });
-
       describe('when the input has focus', () => {
 
-        it('DELETE focuses the last chip', () => {
-          let nativeInput = chipListNativeElement.querySelector('input');
+        it('should focus the last chip when press DELETE', () => {
+          let nativeInput = fixture.nativeElement.querySelector('input');
           let DELETE_EVENT: KeyboardEvent =
               createKeyboardEvent('keydown', DELETE, nativeInput);
 
@@ -283,8 +277,8 @@ describe('MdChipList', () => {
           expect(manager.activeItemIndex).toEqual(chips.length - 1);
         });
 
-        it('BACKSPACE focuses the last chip', () => {
-          let nativeInput = chipListNativeElement.querySelector('input');
+        it('should focus the last chip when press BACKSPACE', () => {
+          let nativeInput = fixture.nativeElement.querySelector('input');
           let BACKSPACE_EVENT: KeyboardEvent =
               createKeyboardEvent('keydown', BACKSPACE, nativeInput);
 
@@ -352,12 +346,12 @@ class StandardChipList {
 @Component({
   template: `
     <md-input-container>
-      <md-chip-list>
+      <md-chip-list mdPrefix #chipList>
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
-        <input mdInput name="test" />
       </md-chip-list>
+      <input mdInput name="test" [mdChipList]="chipList"/>
     </md-input-container>
   `
 })

src/lib/chips/chip-list.ts

@@ -11,6 +11,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ContentChildren,
+  Directive,
   Input,
   QueryList,
   ViewEncapsulation,
@@ -29,6 +30,14 @@ import {
 } from '../core/keyboard/keycodes';
 import {Dir} from '../core/rtl/dir';
 
+@Directive({
+  selector: '[mdChipListContainer], [matChipListContainer]',
+  host: {
+    '[class.mat-chip-list-container]': 'true'
+  }
+})
+export class MdChipListContainer {}
+
 /**
  * A material design chips component (named ChipList for it's similarity to the List component).
  *
@@ -127,17 +136,13 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     }
   }
 
-  /**
-   * Associates an HTML input element with this chip list.
-   *
-   * @param inputElement The input to associate.
-   */
   @Input()
   get selectable(): boolean { return this._selectable; }
   set selectable(value: boolean) {
     this._selectable = coerceBooleanProperty(value);
   }
 
+  /** Associates an HTML input element with this chip list. */
   registerInput(inputElement: HTMLInputElement) {
     this._inputElement = inputElement;
   }

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

@@ -30,13 +30,13 @@ describe('Chip Remove', () => {
   }));
 
   describe('basic behavior', () => {
-    it('applies the `mat-chip-remove` CSS class', () => {
+    it('should applies the `mat-chip-remove` CSS class', () => {
       let hrefElement = chipNativeElement.querySelector('a');
 
       expect(hrefElement.classList).toContain('mat-chip-remove');
     });
 
-    it('emits (remove) on click', () => {
+    it('should emits (remove) on click', () => {
       let hrefElement = chipNativeElement.querySelector('a');
 
       testChip.removable = true;
@@ -49,7 +49,7 @@ describe('Chip Remove', () => {
       expect(testChip.didRemove).toHaveBeenCalled();
     });
 
-    it(`monitors the parent chip's [removable] property`, () => {
+    it(`should monitors the parent chip's [removable] property`, () => {
       let hrefElement = chipNativeElement.querySelector('a');
 
       testChip.removable = true;
@@ -67,7 +67,7 @@ describe('Chip Remove', () => {
 
 @Component({
   template: `
-    <md-chip [removable]="removable" (remove)="didRemove()"><a md-chip-remove></a></md-chip>
+    <md-chip [removable]="removable" (remove)="didRemove()"><a mdChipRemove></a></md-chip>
   `
 })
 class TestChip {

src/lib/chips/chips.scss

@@ -19,45 +19,33 @@ $mat-chip-remove-font-size: 18px;
   flex-wrap: wrap;
   align-items: flex-start;
 
-  /*
-   * Only apply the margins to chips
-   */
   .mat-chip:not(.mat-basic-chip) {
     margin: $mat-chip-margin;
 
     // Do not apply the special margins inside an input container
-    :not(.mat-input-wrapper) & {
-      // Remove the margin from the first element (in both LTR and RTL)
-      &:first-child {
-        margin: {
-          left: 0;
-          right: $mat-chip-margin;
-        }
-
-        [dir='rtl'] & {
-          margin: {
-            left: $mat-chip-margin;
-            right: 0;
-          }
-        }
+    // Remove the margin from the first element (in both LTR and RTL)
+    &:first-child {
+      margin-left: 0;
+      margin-right: $mat-chip-margin;
+
+      [dir='rtl'] & {
+        margin-right: 0;
+        margin-left: $mat-chip-margin;
       }
+    }
+
+    // Remove the margin from the last element (in both LTR and RTL)
+    &:last-child {
+      margin-right: 0;
+      margin-left: $mat-chip-margin;
 
-      // Remove the margin from the last element (in both LTR and RTL)
-      &:last-child {
-        margin: {
-          left: $mat-chip-margin;
-          right: 0;
-        }
-
-        [dir='rtl'] & {
-          margin: {
-            left: 0;
-            right: $mat-chip-margin;
-          }
-        }
+      [dir='rtl'] & {
+        margin-left: 0;
+        margin-right: $mat-chip-margin;
       }
     }
   }
+
 }
 
 .mat-input-prefix .mat-chip-list-wrapper {
@@ -87,15 +75,6 @@ $mat-chip-remove-font-size: 18px;
     display: block;
     margin: 0;
     margin-bottom: $mat-chip-vertical-padding;
-
-    [dir='rtl'] & {
-      margin: 0;
-      margin-bottom: $mat-chip-vertical-padding;
-    }
-
-    &:last-child, [dir='rtl'] &:last-child {
-      margin-bottom: 0;
-    }
   }
 }
 
@@ -115,6 +94,18 @@ $mat-chip-remove-font-size: 18px;
   display: none;
 }
 
+.mat-chip-list-container .mat-input-placeholder-wrapper {
+  top: -4px;
+
+  [dir='rtl'] & {
+    right: 8px;
+  }
+
+  [dir='ltr'] & {
+    margin-left: 8px;
+  }
+}
+
 .mat-chip-input {
   [dir='rtl'] & {
     margin-right: 8px;

src/lib/chips/index.ts

@@ -7,8 +7,8 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MdChipList} from './chip-list';
-import {MdChip, MdBasicChip} from './chip';
+import {MdChipList, MdChipListContainer} from './chip-list';
+import {MdChip} from './chip';
 import {MdChipInput} from './chip-input';
 import {MdChipRemove} from './chip-remove';
 
@@ -19,11 +19,7 @@ export * from './chip-remove';
 
 @NgModule({
   imports: [],
-  exports: [MdChipList, MdChip, MdBasicChip, MdChipInput, MdChipRemove],
-  declarations: [MdChipList, MdChip, MdBasicChip, MdChipInput, MdChipRemove]
+  exports: [MdChipList, MdChip, MdChipInput, MdChipRemove, MdChipListContainer, MdChipRemove],
+  declarations: [MdChipList, MdChip, MdChipInput, MdChipRemove, MdChipListContainer, MdChipRemove]
 })
 export class MdChipsModule {}
-
-
-export * from './chip-list';
-export * from './chip';