feat(form-field): support for different spec variants (#9366)

* feat(form-field): implement hover state

[Based on the spec](https://material.io/guidelines/components/text-fields.html#text-fields-states) form fields should have a hover state where the underline gets darkened while the user is hovering and gets replaced by the theme color after the focus the input.

* branch css logic

* extract underline css into standard variant

* box variant underline

* box variant spacing

* add legacy variant

* fix select ellipsis

* move hover state changes out of legacy variant

* add variants section to input demo

* use filter/backface-visibility to address label jumpiness

* address comments

* fix box variant text fuzziness

* remove bluriness fixes that aren't needed anymore

* address comments

* remove the floatLabel=never option in the new variants

* variant --> appearance

* add tests for new label & placeholder behavior

* update demo to use mat-label

* fix bazel build

Author: mmalerba

src/demo-app/a11y/autocomplete/autocomplete-a11y.html

@@ -2,7 +2,8 @@
   <h2>Filtering and selection</h2>
   <p>Select your favorite state</p>
   <mat-form-field>
-    <input matInput placeholder="Search for a state" [matAutocomplete]="autocomplete"
+    <mat-label>Search for a state</mat-label>
+    <input matInput [matAutocomplete]="autocomplete"
       [(ngModel)]="value" (ngModelChange)="filteredStates = filter(value)">
     <mat-autocomplete #autocomplete="matAutocomplete">
       <mat-option *ngFor="let state of filteredStates" [value]="state.name">

src/demo-app/a11y/datepicker/datepicker-a11y.html

@@ -1,13 +1,13 @@
 <section>
   <h2>Choose a date (e.g. choose your date of birth)</h2>
   <mat-form-field>
+    <mat-label>Date of birth</mat-label>
     <input matInput
            [matDatepicker]="birthdayPicker"
            [(ngModel)]="birthday"
            #birthdayModel="ngModel"
            [max]="maxBirthday"
-           required
-           placeholder="Date of birth">
+           required>
     <mat-datepicker-toggle matSuffix [for]="birthdayPicker"></mat-datepicker-toggle>
     <mat-datepicker #birthdayPicker startView="year"></mat-datepicker>
     <mat-error *ngIf="birthdayModel.hasError('required')">
@@ -44,14 +44,14 @@ <h2>Choose a date with touch UI (e.g. choose a payment date on mobile)</h2>
 <section>
   <h2>Choose date with startAt, min and max (e.g. schedule a departing and returning flight)</h2>
   <mat-form-field>
+    <mat-label>Departure date</mat-label>
     <input matInput
            [matDatepicker]="departPicker"
            [(ngModel)]="departDate"
            #departDateModel="ngModel"
            [min]="minTripDate"
            [max]="maxTripDate"
-           required
-           placeholder="Departure date">
+           required>
     <mat-datepicker-toggle matSuffix [for]="departPicker"></mat-datepicker-toggle>
     <mat-datepicker #departPicker [startAt]="startTripDate"></mat-datepicker>
     <mat-error *ngIf="departDateModel.hasError('required')">
@@ -65,13 +65,13 @@ <h2>Choose date with startAt, min and max (e.g. schedule a departing and returni
     </mat-error>
   </mat-form-field>
   <mat-form-field>
+    <mat-label>Return date</mat-label>
     <input matInput
            [matDatepicker]="returnPicker"
            [(ngModel)]="returnDate"
            #returnDateModel="ngModel"
            [min]="departDate || minTripDate"
-           [max]="maxTripDate"
-           placeholder="Return date">
+           [max]="maxTripDate">
     <mat-datepicker-toggle matSuffix [for]="returnPicker"></mat-datepicker-toggle>
     <mat-datepicker #returnPicker [startAt]="startTripDate"></mat-datepicker>
     <mat-error *ngIf="returnDateModel.hasError('matDatepickerMin') && !departDate">
@@ -89,15 +89,15 @@ <h2>Choose date with startAt, min and max (e.g. schedule a departing and returni
 <section>
   <h2>Choose date with date filter (e.g. schedule a doctor's appointment)</h2>
   <mat-form-field>
+    <mat-label>Appointment date</mat-label>
     <input matInput
            [matDatepicker]="appointmentPicker"
            [(ngModel)]="appointmentDate"
            #appointmentDateModel="ngModel"
            [min]="minAppointmentDate"
            [max]="maxAppointmentDate"
            [matDatepickerFilter]="weekdaysOnly"
-           required
-           placeholder="Appointment date">
+           required>
     <mat-datepicker-toggle matSuffix [for]="appointmentPicker"></mat-datepicker-toggle>
     <mat-datepicker #appointmentPicker></mat-datepicker>
     <mat-error *ngIf="appointmentDateModel.hasError('required')">

src/demo-app/a11y/dialog/dialog-address-form-a11y.html

@@ -3,36 +3,44 @@ <h2 mat-dialog-title>Company</h2>
 <mat-dialog-content>
   <form class="example-form">
     <mat-form-field class="example-full-width">
-      <input matInput placeholder="Company (disabled)" disabled value="Google">
+      <mat-label>Company (disabled)</mat-label>
+      <input matInput disabled value="Google">
     </mat-form-field>
 
     <table class="example-full-width" cellspacing="0"><tr>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="First name">
+        <mat-label>First name</mat-label>
+        <input matInput>
       </mat-form-field></td>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="Long Last Name That Will Be Truncated">
+        <mat-label>Long last name that will be truncated</mat-label>
+        <input matInput>
       </mat-form-field></td>
     </tr></table>
 
     <p>
       <mat-form-field class="example-full-width">
-        <textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
+        <mat-label>Address</mat-label>
+        <textarea matInput>1600 Amphitheatre Pkwy</textarea>
       </mat-form-field>
       <mat-form-field class="example-full-width">
-        <textarea matInput placeholder="Address 2"></textarea>
+        <mat-label>Address 2</mat-label>
+        <textarea matInput></textarea>
       </mat-form-field>
     </p>
 
     <table class="example-full-width" cellspacing="0"><tr>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="City">
+        <mat-label>City</mat-label>
+        <input matInput>
       </mat-form-field></td>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="State">
+        <mat-label>State</mat-label>
+        <input matInput>
       </mat-form-field></td>
       <td><mat-form-field class="example-full-width">
-        <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+        <mat-label>Postal code</mat-label>
+        <input matInput #postalCode maxlength="5" value="94043">
         <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
       </mat-form-field></td>
     </tr></table>

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

@@ -1,18 +1,20 @@
 <section>
   <h2>Basic input box (e.g. name field)</h2>
   <mat-form-field floatLabel="never">
-    <input matInput placeholder="First name" [(ngModel)]="firstName">
+    <mat-label>First name</mat-label>
+    <input matInput [(ngModel)]="firstName">
   </mat-form-field>
   <mat-form-field floatLabel="never">
-    <input matInput placeholder="Last name" [(ngModel)]="lastName">
+    <mat-label>Last name</mat-label>
+    <input matInput [(ngModel)]="lastName">
   </mat-form-field>
 </section>
 
 <section>
   <h2>Input with hint (e.g. password field)</h2>
   <mat-form-field hideRequiredMarker>
-    <input matInput [type]="passwordType" placeholder="Password" [(ngModel)]="password" required
-           #passwordModel="ngModel">
+    <mat-label>Password</mat-label>
+    <input matInput [type]="passwordType" [(ngModel)]="password" required #passwordModel="ngModel">
     <button mat-icon-button matSuffix [attr.aria-label]="passwordToggleLabel"
             (click)="showPassword = !showPassword">
       <mat-icon>{{passwordToggleIcon}}</mat-icon>
@@ -25,8 +27,8 @@ <h2>Input with hint (e.g. password field)</h2>
 <section>
   <h2>Input with error message (e.g. email field)</h2>
   <mat-form-field>
-    <input matInput type="email" placeholder="Email" [(ngModel)]="email" required email
-           #emailModel="ngModel">
+    <mat-label>Email</mat-label>
+    <input matInput type="email" [(ngModel)]="email" required email #emailModel="ngModel">
     <mat-error *ngIf="emailModel.hasError('required')">You must enter your email.</mat-error>
     <mat-error *ngIf="emailModel.hasError('email')">Not a valid email address.</mat-error>
   </mat-form-field>
@@ -35,12 +37,14 @@ <h2>Input with error message (e.g. email field)</h2>
 <section>
   <h2>Input with prefix & suffix (e.g. currency converter)</h2>
   <mat-form-field floatLabel="always">
-    <input matInput type="number" placeholder="USD" [(ngModel)]="usd">
+    <mat-label>USD</mat-label>
+    <input matInput type="number" [(ngModel)]="usd">
     <span matPrefix>$</span>
   </mat-form-field>
   =
   <mat-form-field floatLabel="always">
-    <input matInput type="number" placeholder="JPY" [(ngModel)]="jpy">
+    <mat-label>JPY</mat-label>
+    <input matInput type="number" [(ngModel)]="jpy">
     <span matPrefix>‎¥‎</span>
   </mat-form-field>
   (as of 7/31/2017)

src/demo-app/a11y/select/select-a11y.html

@@ -3,7 +3,8 @@ <h2>Single selection</h2>
   <p>Select your favorite color</p>
 
   <mat-form-field>
-    <mat-select placeholder="Colors" [(ngModel)]="selectedColor">
+    <mat-label>Colors</mat-label>
+    <mat-select [(ngModel)]="selectedColor">
       <mat-option *ngFor="let color of colors" [value]="color.value">
         {{ color.label }}
       </mat-option>
@@ -16,7 +17,8 @@ <h2>Multiple selection</h2>
   <p>Pick toppings for your pizza</p>
 
   <mat-form-field>
-    <mat-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
+    <mat-label>Toppings</mat-label>
+    <mat-select [(ngModel)]="selectedTopping" multiple>
       <mat-option *ngFor="let topping of toppings" [value]="topping.value">
         {{ topping.label }}
       </mat-option>
@@ -29,7 +31,8 @@ <h2>Grouped options</h2>
   <p>Pick your Pokemon</p>
 
   <mat-form-field>
-    <mat-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
+    <mat-label>Pokemon</mat-label>
+    <mat-select [(ngModel)]="selectedPokemon">
       <mat-optgroup *ngFor="let group of pokemon" [label]="group.label">
         <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
           {{ creature.label }}
@@ -44,21 +47,24 @@ <h2>Colors</h2>
 
   <div class="select-a11y-spacer">
     <mat-form-field  color="primary">
-      <mat-select placeholder="ZIP code">
+      <mat-label>ZIP code</mat-label>
+      <mat-select>
         <mat-option value="2000">2000</mat-option>
         <mat-option value="2100">2100</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="accent">
-      <mat-select placeholder="State">
+      <mat-label>State</mat-label>
+      <mat-select>
         <mat-option value="alaska">Alaska</mat-option>
         <mat-option value="alabama">Alabama</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="warn">
-      <mat-select placeholder="Language">
+      <mat-label>Language</mat-label>
+      <mat-select>
         <mat-option value="english">English</mat-option>
         <mat-option value="spanish">Spanish</mat-option>
       </mat-select>
@@ -67,21 +73,24 @@ <h2>Colors</h2>
 
   <div class="select-a11y-spacer">
     <mat-form-field color="primary">
-      <mat-select placeholder="Digimon" multiple>
+      <mat-label>Digimon</mat-label>
+      <mat-select multiple>
         <mat-option value="mihiramon">Mihiramon</mat-option>
         <mat-option value="sandiramon">Sandiramon</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="accent">
-      <mat-select placeholder="Drink" multiple>
+      <mat-label>Drink</mat-label>
+      <mat-select multiple>
         <mat-option value="water">Water</mat-option>
         <mat-option value="coke">Coke</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="warn">
-      <mat-select placeholder="Theme" multiple>
+      <mat-label>Theme</mat-label>
+      <mat-select multiple>
         <mat-option value="light">Light</mat-option>
         <mat-option value="dark">Dark</mat-option>
       </mat-select>

src/demo-app/autocomplete/autocomplete-demo.html

@@ -7,7 +7,8 @@
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
     <mat-form-field floatLabel="never">
-      <input matInput placeholder="State" [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
+      <mat-label>State</mat-label>
+      <input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
       <mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
         <mat-option *ngFor="let state of reactiveStates | async" [value]="state">
           <span>{{ state.name }}</span>
@@ -33,7 +34,8 @@
 
     <!-- Added an ngIf below to test that autocomplete works with ngIf -->
     <mat-form-field *ngIf="true">
-      <input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
+      <mat-label>State</mat-label>
+      <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
         (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
       <mat-autocomplete #tdAuto="matAutocomplete">
         <mat-option *ngFor="let state of tdStates" [value]="state.name">
@@ -56,9 +58,9 @@
     <div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>
 
     <mat-form-field>
+      <mat-label>State</mat-label>
       <input
         matInput
-        placeholder="State"
         [matAutocomplete]="groupedAuto"
         [(ngModel)]="currentGroupedState"
         (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">

src/demo-app/baseline/baseline-demo.html

@@ -11,18 +11,21 @@
     <mat-radio-button value="option_3">Radio 3</mat-radio-button>
     | Text 4 |
     <mat-form-field>
-      <input matInput placeholder="Input" value="Text Input">
+      <mat-label>Input</mat-label>
+      <input matInput value="Text Input">
     </mat-form-field>
     | Text 5 |
     <mat-form-field>
-      <mat-select placeholder="This placeholder is really really really long">
+      <mat-label>This label is really really really long</mat-label>
+      <mat-select>
         <mat-option value="option">Option</mat-option>
         <mat-option value="long">This option is really really really long</mat-option>
       </mat-select>
     </mat-form-field>
     | Text 6 |
     <mat-form-field>
-      <textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
+      <mat-label>Input</mat-label>
+      <textarea matInput matTextareaAutosize>Textarea&#10;Line 2</textarea>
     </mat-form-field>
     | Text After
   </mat-card-content>
@@ -42,18 +45,21 @@ <h1>
       <mat-radio-button value="option_3">Radio 3</mat-radio-button>
       | Text 4 |
       <mat-form-field>
-        <input matInput placeholder="Input" value="Text Input">
+        <mat-label>Input</mat-label>
+        <input matInput value="Text Input">
       </mat-form-field>
       | Text 5 |
       <mat-form-field>
-        <mat-select placeholder="This placeholder is really really really long">
+        <mat-label>This label is really really really long</mat-label>
+        <mat-select>
           <mat-option value="option">Option</mat-option>
           <mat-option value="long">This option is really really really long</mat-option>
         </mat-select>
       </mat-form-field>
       | Text 6 |
       <mat-form-field>
-        <textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
+        <mat-label>Input</mat-label>
+        <textarea matInput matTextareaAutosize>Textarea&#10;Line 2</textarea>
       </mat-form-field>
       | Text After
     </h1>