address comments

Author: tinayuangao

src/lib/chips/chip-input.ts

@@ -35,7 +35,8 @@ export interface MdChipInputEvent {
 
 /**
  * A material design chips input component working with chip list component.
- * To be placed inside md-form-field. Can be placed inside <md-chip-list> or outside <md-chip-list>.
+ * To be placed inside <md-form-field>. Can be placed inside <md-chip-list> or outside
+ * <md-chip-list>.
  *
  * Example:
  *     <md-form-field>

src/lib/chips/chip-list.ts

@@ -41,7 +41,7 @@ import {MdChip, MdChipEvent, MdChipSelectionChange} from './chip';
 import {MdChipInput} from './chip-input';
 import {MdFormFieldControl} from '../form-field/form-field-control';
 
-
+// Increasing integer for generating unique ids for chip-list components.
 let nextUniqueId = 0;
 
 /** Change event object that is emitted when the chip list value has changed. */
@@ -138,7 +138,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
 
   protected _value: any;
 
-  /** Placeholder for the chip list. Alternatively, placeholder can set to MdChipInput */
+  /** Placeholder for the chip list. Alternatively, placeholder can be set on MdChipInput */
   protected _placeholder: string;
 
   /** Tab index for the chip list. */
@@ -246,7 +246,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
 
   /**
    * Whether or not this chip is selectable. When a chip is not selectable,
-   * it's selected state is always ignored.
+   * its selected state is always ignored.
    */
   @Input()
   get selectable(): boolean { return this._selectable; }
@@ -277,7 +277,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
   @Output() change: EventEmitter<MdChipListChange> = new EventEmitter<MdChipListChange>();
 
   /**
-   * Event that emits whenever the raw value of the select changes. This is here primarily
+   * Event that emits whenever the raw value of the chip-list changes. This is here primarily
    * to facilitate the two-way binding for the `value` input.
    * @docs-private
    */
@@ -452,7 +452,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
     let chipIndex: number = this.chips.toArray().indexOf(chip);
     if (this._isValidIndex(chipIndex)) {
       if (chip._hasFocus) {
-        // Check whether the chip is the last item
+        // Check whether the chip is not the last item
         if (chipIndex < this.chips.length - 1) {
           this._keyManager.setActiveItem(chipIndex);
         } else if (chipIndex - 1 >= 0) {
@@ -519,8 +519,8 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
   }
 
   /**
-   * Finds and selects and option based on its value.
-   * @returns Option that has the corresponding value.
+   * Finds and selects the chip based on its value.
+   * @returns Chip that has the corresponding value.
    */
   private _selectValue(value: any, isUserInput: boolean = true): MdChip | undefined {
 
@@ -546,8 +546,8 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
   }
 
   /**
-   * Clears the select trigger and deselects every option in the list.
-   * @param skip Option that should not be deselected.
+   * Deselects every chip in the list.
+   * @param skip Chip that should not be deselected.
    */
   private _clearSelection(skip?: MdChip): void {
     this._selectionModel.clear();
@@ -625,7 +625,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
     }
   }
 
-  /** Listens to user-generated selection events on each option. */
+  /** Listens to user-generated selection events on each chip. */
   private _listenToChipsSelection(): void {
     this._chipSelectionSubscription = this.chipSelectionChanges.subscribe(event => {
       event.source.selected
@@ -637,7 +637,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
     });
   }
 
-  /** Listens to user-generated selection events on each option. */
+  /** Listens to user-generated selection events on each chip. */
   private _listenToChipsFocus(): void {
     this._chipFocusSubscription = this.chipFocusChanges.subscribe(event => {
       let chipIndex: number = this.chips.toArray().indexOf(event.chip);

src/lib/chips/chip.ts

@@ -95,7 +95,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
     this.onSelectionChange.emit({source: this, isUserInput: false});
   }
 
-  /** The value of the chip. Default to the content inside <md-chip> tags. */
+  /** The value of the chip. Defaults to the content inside <md-chip> tags. */
   @Input()
   get value(): any {
     return this._value != undefined

src/lib/chips/chips.scss

@@ -9,6 +9,9 @@ $mat-chip-remove-margin-after: -4px;
 $mat-chips-chip-margin: 8px;
 $mat-chips-chip-bottom-margin: 3px;
 
+$mat-chip-input-width: 150px;
+$mat-chip-input-margin: 3px;
+
 .mat-chip-list-wrapper {
   display: flex;
   flex-direction: row;
@@ -93,6 +96,6 @@ $mat-chips-chip-bottom-margin: 3px;
 }
 
 input.mat-chip-input {
-  width: 150px;
-  margin: 3px;
+  width: $mat-chip-input-width;
+  margin: $mat-chip-input-margin;
 }