fix(input): allow color inputs in mat-form-field

* Allows users to put an `input[type='color']` inside a form field. * Cleans out a few leftover `floatPlaceholder` usages. Fixes #8686.
angular · Nov 30, 2017 · 18b477f · 18b477f
1 parent 27dfd15
commit 18b477f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
@@ -8,7 +8,7 @@
 
       <table style="width: 100%" cellspacing="0"><tr>
         <td>
-          <mat-form-field style="width: 100%" floatPlaceholder="never">
+          <mat-form-field style="width: 100%" floatLabel="never">
             <input matInput placeholder="First name">
           </mat-form-field>
         </td>
@@ -304,11 +304,18 @@ <h4>Textarea</h4>
     </p>
 
     <p>
-      <mat-form-field [floatPlaceholder]="floatingLabel">
+      <mat-form-field [floatLabel]="floatingLabel">
         <input matInput placeholder="Placeholder">
       </mat-form-field>
     </p>
 
+    <p>
+      <mat-form-field [floatLabel]="floatingLabel">
+        <mat-label>What is your favorite color?</mat-label>
+        <input matInput type="color" value="#00ff00">
+      </mat-form-field>
+    </p>
+
     <p>
       <mat-form-field>
         <input matInput placeholder="Prefixed" value="example">

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
@@ -31,7 +31,6 @@ import {MAT_INPUT_VALUE_ACCESSOR} from './input-value-accessor';
 const MAT_INPUT_INVALID_TYPES = [
   'button',
   'checkbox',
-  'color',
   'file',
   'hidden',
   'image',

diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -103,7 +103,7 @@ <h2>Icon</h2>
 
 <h2>Input</h2>
 
-<mat-form-field floatPlaceholder="never">
+<mat-form-field floatLabel="never">
   <input matInput placeholder="name">
 </mat-form-field>