sync & address comments

Author: tinayuangao

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

@@ -26,9 +26,10 @@
   }
 
   .mat-chip-remove.mat-icon {
-    font-size: 18px;
+    font-size: 16px;
     width: 1em;
     height: 1em;
     vertical-align: middle;
+    cursor: pointer;
   }
 }

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

@@ -1,5 +1,7 @@
 import {Component} from '@angular/core';
-import {MdChipInputEvent, ENTER, COMMA} from '@angular/material';
+import {MdChipInputEvent, ENTER} from '@angular/material';
+
+const COMMA = 188;
 
 export interface Person {
   name: string;

src/lib/chips/chip-list.ts

@@ -22,8 +22,7 @@ import {
 
 import {MdChip} from './chip';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {SPACE, LEFT_ARROW, RIGHT_ARROW} from '../core/keyboard/keycodes';
-import {Subscription} from 'rxjs/Subscription';
+import {BACKSPACE, DELETE, SPACE, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes';
 import {coerceBooleanProperty, Directionality} from '@angular/cdk';
 import {Subscription} from 'rxjs/Subscription';
 

src/lib/chips/chip.ts

@@ -100,7 +100,6 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, Ca
 
   set removable(value: boolean) {
     this._removable = coerceBooleanProperty(value);
-    if (this._chipRemove) { this._chipRemove.visible = this._removable; }
   }
   protected _removable: boolean = true;
 
@@ -146,20 +145,14 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, Ca
    * Allows for programmatic removal of the chip. Called by the MdChipList when the DELETE or
    * BACKSPACE keys are pressed.
    *
-   * Note: This only informs any listeners of the removal request, it does **not** actually remove
-   * the chip from the DOM.
+   * Informs any listeners of the removal request. Does not remove the chip from the DOM.
    */
   remove(): void {
     if (this.removable) {
       this.onRemove.emit({chip: this});
     }
   }
 
-  /** The aria-disabled state for the chip */
-  _isAriaDisabled(): string {
-    return String(this.disabled);
-  }
-
   /** Ensures events fire properly upon click. */
   _handleClick(event: Event) {
     // Check disabled
@@ -198,15 +191,6 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, Ca
         break;
     }
   }
-
-  protected _checkDisabled(event: Event): boolean {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    return this.disabled;
-  }
 }
 
 
@@ -217,7 +201,7 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, Ca
  * Example:
  *
  *     <md-chip>
- *       <md-icon mdChipRemove>clear</md-icon>
+ *       <md-icon mdChipRemove>cancel</md-icon>
  *     </md-chip>
  *
  * You *may* use a custom icon, but you may need to override the `md-chip-remove` positioning styles
@@ -227,19 +211,10 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, Ca
   selector: '[mdChipRemove], [matChipRemove]',
   host: {
     'class': 'mat-chip-remove',
-    '[class.mat-chip-remove-hidden]': '!visible',
     '(click)': '_handleClick($event)'
   }
 })
 export class MdChipRemove {
-
-  /** Whether or not the remove icon is visible. */
-  _isVisible: boolean = true;
-
-  @Input('mdChipRemoveVisible')
-  get visible() { return this._isVisible; }
-  set visible(value) { this._isVisible = coerceBooleanProperty(value); }
-
   constructor(protected _parentChip: MdChip) {}
 
   /** Calls the parent chip's public `remove()` method if applicable. */

src/lib/chips/chips.scss

@@ -3,89 +3,18 @@
 $mat-chip-vertical-padding: 8px;
 $mat-chip-horizontal-padding: 12px;
 
-$mat-chip-vertical-padding: 8px - $mat-chip-border-width;
-$mat-chip-horizontal-padding: 12px - $mat-chip-border-width;
-
-$mat-chip-margin: ($mat-chip-horizontal-padding / 4);
-
-$mat-chip-remove-margin: $mat-chip-line-height * 2;
-$mat-chip-remove-icon-offset: 3px;
-$mat-chip-remove-size: 24px;
-$mat-chip-remove-font-size: 18px;
-
-@mixin chip-margin() {
-  [dir='rtl'] & {
-    margin-right: $mat-chip-margin;
-    margin-left: $mat-chip-margin;
-  }
-
-  [dir='ltr'] & {
-    margin-right: $mat-chip-margin;
-    margin-left: $mat-chip-margin;
-  }
-}
-
-@mixin chip-margin-last() {
-  [dir='rtl'] & {
-    margin-left: 0;
-    margin-right: $mat-chip-margin;
-  }
-
-  [dir='ltr'] & {
-    margin-right: 0;
-    margin-left: $mat-chip-margin;
-  }
-}
-
-@mixin chip-margin-first() {
-  [dir='ltr'] & {
-    margin-left: 0;
-    margin-right: $mat-chip-margin;
-  }
-
-  [dir='rtl'] & {
-    margin-right: 0;
-    margin-left: $mat-chip-margin;
-  }
-}
+$mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
 .mat-chip-list-wrapper {
-
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
-
-  .mat-chip {
-    margin: $mat-chip-margin;
-
-    // Do not apply the special margins inside an input container
-    // Remove the margin from the first element (in both LTR and RTL)
-    &:first-child {
-      @include chip-margin-first();
-    }
-
-    // Remove the margin from the last element (in both LTR and RTL)
-    &:last-child {
-        @include chip-margin-last();
-    }
-  }
-}
-
-.mat-input-container .mat-chip-list-wrapper .map-chip:last-child {
-  @include chip-margin();
 }
 
-.mat-input-prefix .mat-chip-list-wrapper {
-  flex-wrap: nowrap;
-}
-
-.mat-chip {
+.mat-chip:not(.mat-basic-chip) {
   display: inline-block;
-  position: relative;
-
-  padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding;
-  border: $mat-chip-border-width solid transparent;
+  padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding $mat-chip-horizontal-padding;
   border-radius: $mat-chip-horizontal-padding * 2;
 
   // Apply a margin to adjacent sibling chips.
@@ -95,6 +24,16 @@ $mat-chip-remove-font-size: 18px;
     [dir='rtl'] & {
       margin: 0 $mat-chips-chip-margin 0 0;
     }
+
+    .mat-input-prefix & {
+      &:last-child {
+        margin-right: $mat-chips-chip-margin;
+      }
+
+      [dir='rtl'] &:last-child {
+        margin-left: $mat-chips-chip-margin;
+      }
+    }
   }
 
   @include cdk-high-contrast {
@@ -105,17 +44,22 @@ $mat-chip-remove-font-size: 18px;
 .mat-chip-list-stacked .mat-chip-list-wrapper {
   display: block;
 
-  .mat-chip {
+  .mat-chip:not(.mat-basic-chip) {
     display: block;
     margin: 0;
     margin-bottom: $mat-chip-vertical-padding;
-  }
-}
 
-.mat-chip-remove.mat-chip-remove-hidden {
-  display: none;
+    [dir='rtl'] & {
+      margin: 0;
+      margin-bottom: $mat-chip-vertical-padding;
+    }
+
+    &:last-child, [dir='rtl'] &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
-.mat-chip-input {
-  @include chip-margin-last();
+.mat-input-prefix .mat-chip-list-wrapper {
+  margin-bottom: $mat-chip-vertical-padding;
 }