fix(label): use primary color on focus for md input labels

adds transition for color fixes #15602
ionic-team · May 1, 2019 · 3a96d6f · 3a96d6f
1 parent 38ffb98
commit 3a96d6f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git 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
@@ -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
 // --------------------------------------------------