From 3a96d6f3a3e74fe5540045dafe75057a65df70a9 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 1 May 2019 17:01:22 -0400
Subject: [PATCH] fix(label): use primary color on focus for md input labels

adds transition for color

fixes #15602
---
 .../src/components/input/test/spec/index.html | 35 +++++++++++++------
 core/src/components/label/label.md.scss       | 11 +++++-
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/core/src/components/input/test/spec/index.html b/core/src/components/input/test/spec/index.html
index faea8416d88..23a9c9c08c3 100644
--- a/core/src/components/input/test/spec/index.html
+++ b/core/src/components/input/test/spec/index.html
@@ -15,37 +15,41 @@
   <ion-app>
     <ion-content class="ion-padding">
       <ion-item>
-        <ion-label position="floating">Standard</ion-label>
+        <ion-label position="floating">Floating: input</ion-label>
         <ion-input></ion-input>
       </ion-item>
-      <ion-item>
-        <ion-label position="floating">Standard</ion-label>
+      <ion-item class="item-has-focus">
+        <ion-label position="floating">Floating: input focused value</ion-label>
         <ion-input value="value"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="stacked">Stacked</ion-label>
+        <ion-label position="stacked">Stacked: input</ion-label>
         <ion-input></ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="stacked">Stacked</ion-label>
+        <ion-label position="stacked">Stacked: input value</ion-label>
         <ion-input value="value"></ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">Floating</ion-label>
+        <ion-label position="floating">Floating: textarea</ion-label>
         <ion-textarea></ion-textarea>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">Floating</ion-label>
+        <ion-label position="floating">Floating: textarea value</ion-label>
         <ion-textarea value="value"></ion-textarea>
       </ion-item>
       <ion-item>
-        <ion-label position="stacked">Stacked</ion-label>
+        <ion-label position="stacked">Stacked: textarea</ion-label>
         <ion-textarea></ion-textarea>
       </ion-item>
-      <ion-item>
-        <ion-label position="stacked">Stacked</ion-label>
+      <ion-item class="item-has-focus">
+        <ion-label position="stacked">Stacked: textarea focused value</ion-label>
         <ion-textarea value="value"></ion-textarea>
       </ion-item>
+      <ion-item class="custom item-has-focus">
+        <ion-label position="stacked">Stacked: textarea focus</ion-label>
+        <ion-textarea></ion-textarea>
+      </ion-item>
 
     </ion-content>
 
@@ -54,6 +58,17 @@
         --background: #f5f5f5;
       }
 
+      .custom {
+        --background: lightblue;
+      }
+
+      .custom ion-label {
+        color: white !important;
+      }
+
+      .custom.item-has-focus ion-label {
+        color: purple !important;
+      }
     </style>
   </ion-app>
 </body>
diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss
index 098f373499c..3f03db84ff3 100644
--- a/core/src/components/label/label.md.scss
+++ b/core/src/components/label/label.md.scss
@@ -15,13 +15,17 @@
 :host(.label-stacked) {
   @include transform-origin(start, top);
   @include transform(translate3d(0, 50%, 0), scale(.75));
+
+  transition: color 150ms cubic-bezier(.4,0,.2,1);
 }
 
 :host(.label-floating) {
   @include transform(translate3d(0, 96%, 0));
   @include transform-origin(start, top);
 
-  transition: transform 150ms cubic-bezier(.4,0,.2,1);
+  transition:
+    color 150ms cubic-bezier(.4,0,.2,1),
+    transform 150ms cubic-bezier(.4,0,.2,1);
 }
 
 :host(.label-stacked),
@@ -39,6 +43,11 @@
   @include transform(translate3d(0, 50%, 0), scale(.75));
 }
 
+:host-context(.item-has-focus).label-stacked,
+:host-context(.item-has-focus).label-floating {
+  color: $label-md-text-color-focused;
+}
+
 
 // MD Typography
 // --------------------------------------------------