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

fixes #15602

Author: brandyscarney

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>

core/src/components/item/item.scss

@@ -181,7 +181,7 @@ button, a {
 
   display: flex;
 
-  /* This is required to work with an inset highlight */
+  // This is required to work with an inset highlight
   position: relative;
 
   flex: 1;
@@ -261,11 +261,6 @@ button, a {
   flex-direction: column;
 }
 
-// :host(.item-input-has-focus) a,
-// :host(.item-input-has-focus) button,
-// :host(.item-input-has-focus) textarea {
-//   pointer-events: auto;
-// }
 
 // Item Input Highlight
 // --------------------------------------------------
@@ -287,6 +282,7 @@ button, a {
   height: var(--inset-highlight-height);
 }
 
+
 // Item Input Focused
 // --------------------------------------------------
 

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 $label-md-transition-timing-function;
 }
 
 :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 $label-md-transition-timing-function,
+    transform 150ms $label-md-transition-timing-function;
 }
 
 :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
 // --------------------------------------------------

core/src/components/label/label.md.vars.scss

@@ -5,13 +5,13 @@
 // --------------------------------------------------
 
 /// @prop - Text color of the label by an input, select, or datetime
-$label-md-text-color:                 $text-color-step-600 !default;
+$label-md-text-color:                    $text-color-step-600 !default;
 
 /// @prop - Text color of the stacked/floating label when it is focused
-$label-md-text-color-focused:         ion-color(primary, base) !default;
+$label-md-text-color-focused:            ion-color(primary, base) !default;
 
 /// @prop - Line height of the label when the text wraps
-$label-md-text-wrap-line-height:      1.5 !default;
+$label-md-text-wrap-line-height:         1.5 !default;
 
-/// @prop - Color of the item paragraph
-$item-md-paragraph-text-color:        $text-color-step-400 !default;
+/// @prop - Transition timing function of the label (stacked / focused)
+$label-md-transition-timing-function:    cubic-bezier(.4, 0, .2, 1) !default;