floating labels

ionic/components/text-input/label.scss

@@ -8,6 +8,7 @@ ion-label {
   max-width: 200px;
   font-size: inherit;
   white-space: nowrap;
+  pointer-events: none;
 }
 
 [fixed-label] ion-label {
@@ -16,9 +17,14 @@ ion-label {
   max-width: 200px;
 }
 
-ion-input[stacked-label] {
+ion-input[stacked-label],
+ion-input[floating-label] {
   flex-direction: column;
   align-items: flex-start;
+}
+
+[stacked-label],
+[floating-label] {
 
   ion-label {
     align-self: stretch;
@@ -30,4 +36,5 @@ ion-input[stacked-label] {
     align-self: stretch;
     width: auto;
   }
+
 }

ionic/components/text-input/modes/ios.scss

@@ -28,9 +28,22 @@ ion-card[mode=ios] {
     margin-bottom: 4px;
   }
 
-  [stacked-label] .text-input {
+  [stacked-label] .text-input,
+  [floating-label] .text-input {
     margin-top: 8px;
     margin-bottom: 8px;
   }
 
+  [floating-label] ion-label {
+    margin-bottom: 0;
+    transform-origin: left top;
+    transform: translate3d(0, 27px, 0);
+    transition: transform 150ms ease-in-out;
+  }
+
+  [floating-label].has-focus ion-label,
+  [floating-label].has-value ion-label  {
+    transform: translate3d(0, 0, 0) scale(0.8);
+  }
+
 }

ionic/components/text-input/modes/material.scss

@@ -43,14 +43,28 @@ ion-card[mode=md] {
     margin-bottom: 0;
   }
 
-  [stacked-label].has-focus ion-label {
+  [stacked-label].has-focus ion-label,
+  [floating-label].has-focus ion-label {
     color: $text-input-highlight-color;
   }
 
-  [stacked-label] .text-input {
+  [stacked-label] .text-input,
+  [floating-label] .text-input {
     margin-bottom: 8px;
     margin-top: 8px;
   }
+
+  [floating-label] ion-label {
+    margin-bottom: 0;
+    transform-origin: left top;
+    transform: translate3d(0, 27px, 0);
+    transition: transform 150ms ease-in-out;
+  }
+
+  [floating-label].has-focus ion-label,
+  [floating-label].has-value ion-label  {
+    transform: translate3d(0, 0, 0) scale(0.8);
+  }
 }
 
 .list[mode=md][inset] ion-input.item {

ionic/components/text-input/test/floating-labels/e2e.ts

@@ -0,0 +1 @@
+

ionic/components/text-input/test/floating-labels/index.ts

@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

ionic/components/text-input/test/floating-labels/main.html

@@ -0,0 +1,61 @@
+
+<ion-toolbar><ion-title>Floating Label Text Input</ion-title></ion-toolbar>
+
+
+<ion-content>
+
+  <ion-list inset>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 1</ion-label>
+      <input type="text">
+    </ion-input>
+
+    <ion-input floating-label class="has-value">
+      <ion-label>Floating Label 2</ion-label>
+      <input value="Has Value" type="text">
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 3</ion-label>
+      <input type="number">
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 4</ion-label>
+      <textarea></textarea>
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 5</ion-label>
+      <input type="url">
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 6</ion-label>
+      <input type="email">
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 7</ion-label>
+      <textarea></textarea>
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 8</ion-label>
+      <input type="text">
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 9</ion-label>
+      <input type="number">
+    </ion-input>
+
+    <ion-input floating-label>
+      <ion-label>Floating Label 10</ion-label>
+      <textarea></textarea>
+    </ion-input>
+
+  </ion-list>
+
+</ion-content>

ionic/components/text-input/text-input.ts

@@ -57,6 +57,14 @@ export class TextInputElement {
   get hasFocus() {
     return dom.hasFocus(this.elementRef);
   }
+
+  /**
+   * Whether the input has a value.
+   * @returns {boolean}  true if the input has a value, otherwise false.
+   */
+  get hasValue() {
+    return (this.elementRef.nativeElement.value !== '');
+  }
 }
 
 /**
@@ -75,6 +83,7 @@ export class TextInputElement {
     '(^touchend)': 'pointerEnd($event)',
     '(^mouseup)': 'pointerEnd($event)',
     '[class.has-focus]': 'inputHasFocus',
+    '[class.has-value]': 'inputHasValue',
     '[tabIndex]': 'activeTabIndex',
     'class': 'item'
   }
@@ -404,6 +413,10 @@ export class TextInput extends Ion {
     return !!this.input && this.input.hasFocus;
   }
 
+  get inputHasValue() {
+    return !!this.input && this.input.hasValue;
+  }
+
   get activeTabIndex() {
     this.input.tabIndex = (this.inputHasFocus ? 1000 : -1);
     return -1;