autofloat label for special types

Author: notwaldorf

paper-input-behavior.html

@@ -394,8 +394,20 @@
       return this.inputElement;
     },
 
+    registered: function() {
+      // These types have some default placeholder text; overlapping
+      // the label on top of it looks terrible. Auto-float the label in this case.
+      this._typesThatHaveText = ["date", "datetime", "datetime-local", "month",
+          "time", "week", "file"];
+    },
+
     attached: function() {
       this._updateAriaLabelledBy();
+
+      if (this.inputElement &&
+          this._typesThatHaveText.indexOf(this.inputElement.type) !== -1) {
+        this.alwaysFloatLabel = true;
+      }
     },
 
     _appendStringWithSpace: function(str, more) {

paper-input.html

@@ -39,9 +39,10 @@
     </paper-input>
 
 A `paper-input` can use the native `type=search` or `type=file` features.
-However, since we can't control the native styling of the input, in these cases
-it's recommended to use a placeholder text, or `always-float-label`,
-as to not overlap the native UI (search icon, file button, etc.).
+However, since we can't control the native styling of the input (search icon,
+file button, date placeholder, etc.), in these cases the label will be
+automatically floated. The `placeholder` attribute can still be used for
+additional informational text.
 
     <paper-input label="search!" type="search"
         placeholder="search for cats" autosave="test" results="5">

test/paper-input.html

@@ -70,7 +70,6 @@
     </template>
   </test-fixture>
 
-
   <test-fixture id="required-char-counter">
     <template>
       <paper-input auto-validate char-counter required error-message="error"></paper-input>
@@ -95,6 +94,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="date">
+    <template>
+      <paper-input label="foo" type="date"></paper-input>
+    </template>
+  </test-fixture>
+
   <letters-only></letters-only>
 
   <test-fixture id="validator">
@@ -121,6 +126,18 @@
         assert.ok(floatingLabel);
       });
 
+      test('special types autofloat the label', function() {
+        var input = fixture('date');
+        // Browsers that don't support special <input> types like `date` fallback
+        // to `text`, so make sure to only test if type is still preserved after
+        // the element is attached.
+        if (input.inputElement.type === "date") {
+          assert.equal(input.alwaysFloatLabel, true);
+          var floatingLabel = Polymer.dom(Polymer.dom(input.root).querySelector('paper-input-container').root).querySelector('.label-is-floating');
+          assert.ok(floatingLabel);
+        }
+      });
+
       test('always-float-label attribute works without placeholder', function() {
         var input = fixture('always-float-label');
         var container = Polymer.dom(input.root).querySelector('paper-input-container');