fix(input): change dividerColor to color (#3726)

* fix(input): change dividerColor to color

* change over docs and demo usages

Author: mmalerba

src/demo-app/input/input-demo.html

@@ -119,24 +119,24 @@ <h4>Icons</h4>
   <md-toolbar color="primary">Divider Colors</md-toolbar>
   <md-card-content>
     <h4>Input</h4>
-    <md-input-container dividerColor="primary" >
+    <md-input-container color="primary" >
       <input mdInput placeholder="Default Color" value="example">
     </md-input-container>
-    <md-input-container dividerColor="accent">
+    <md-input-container color="accent">
       <input mdInput placeholder="Accent Color" value="example">
     </md-input-container>
-    <md-input-container dividerColor="warn">
+    <md-input-container color="warn">
       <input mdInput placeholder="Warn Color" value="example">
     </md-input-container>
 
     <h4>Textarea</h4>
-    <md-input-container dividerColor="primary">
+    <md-input-container color="primary">
       <textarea mdInput placeholder="Default Color">example</textarea>
     </md-input-container>
-    <md-input-container dividerColor="accent">
+    <md-input-container color="accent">
       <textarea mdInput placeholder="Accent Color">example</textarea>
     </md-input-container>
-    <md-input-container dividerColor="warn">
+    <md-input-container color="warn">
       <textarea mdInput placeholder="Warn Color">example</textarea>
     </md-input-container>
   </md-card-content>
@@ -173,7 +173,7 @@ <h4>Textarea</h4>
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">
     Hello&nbsp;
-    <md-input-container dividerColor="accent">
+    <md-input-container color="accent">
       <input mdInput [(ngModel)]="name" type="text" placeholder="First name">
     </md-input-container>,
     how are you?
@@ -222,9 +222,9 @@ <h4>Textarea</h4>
       </md-input-container>
     </p>
     <p>
-      <md-checkbox [(ngModel)]="dividerColor">Check to change the divider color:</md-checkbox>
-      <md-input-container [dividerColor]="dividerColor ? 'primary' : 'accent'">
-        <input mdInput [placeholder]="dividerColor ? 'Primary color' : 'Accent color'">
+      <md-checkbox [(ngModel)]="color">Check to change the color:</md-checkbox>
+      <md-input-container [color]="color ? 'primary' : 'accent'">
+        <input mdInput [placeholder]="color ? 'Primary color' : 'Accent color'">
       </md-input-container>
     </p>
     <p>

src/demo-app/input/input-demo.ts

@@ -14,7 +14,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
 })
 export class InputDemo {
   floatingLabel: string = 'auto';
-  dividerColor: boolean;
+  color: boolean;
   requiredField: boolean;
   ctrlDisabled = false;
 

src/lib/input/input-container.html

@@ -13,8 +13,8 @@
                [attr.for]="_mdInputChild.id"
                [class.mat-empty]="_mdInputChild.empty && !_shouldAlwaysFloat"
                [class.mat-float]="_canPlaceholderFloat"
-               [class.mat-accent]="dividerColor == 'accent'"
-               [class.mat-warn]="dividerColor == 'warn'"
+               [class.mat-accent]="color == 'accent'"
+               [class.mat-warn]="color == 'warn'"
                *ngIf="_hasPlaceholder()">
           <ng-content select="md-placeholder, mat-placeholder"></ng-content>
           {{_mdInputChild.placeholder}}
@@ -32,8 +32,8 @@
   <div class="mat-input-underline"
        [class.mat-disabled]="_mdInputChild.disabled">
     <span class="mat-input-ripple"
-          [class.mat-accent]="dividerColor == 'accent'"
-          [class.mat-warn]="dividerColor == 'warn'"></span>
+          [class.mat-accent]="color == 'accent'"
+          [class.mat-warn]="color == 'warn'"></span>
   </div>
 
   <div class="mat-input-subscript-wrapper" [ngSwitch]="_getDisplayedMessages()">

src/lib/input/input-container.ts

@@ -283,7 +283,12 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
   @Input() align: 'start' | 'end' = 'start';
 
   /** Color of the input divider, based on the theme. */
-  @Input() dividerColor: 'primary' | 'accent' | 'warn' = 'primary';
+  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
+
+  /** @deprecated Use color instead. */
+  @Input()
+  get dividerColor() { return this.color; }
+  set dividerColor(value) { this.color = value; }
 
   /** Whether the floating label should always float or not. */
   get _shouldAlwaysFloat() { return this._floatPlaceholder === 'always'; };

src/lib/input/input.md

@@ -79,9 +79,9 @@ Hint labels are specified in one of two ways: either using the `hintLabel` attri
 `align` attribute containing the side. The attribute version is assumed to be at the `start`.
 Specifying a side twice will result in an exception during initialization.
 
-### Divider Color
+### Underline Color
 
-The divider (line under the `input` content) color can be changed by using the `dividerColor`
+The underline (line under the `input` content) color can be changed by using the `color`
 attribute of `md-input-container`. A value of `primary` is the default and will correspond to the
 theme primary color. Alternatively, `accent` or `warn` can be specified to use the theme's accent or
 warn color.