feat(input): add form highlighting

core/src/components/input/input.md.outline.scss

@@ -15,11 +15,32 @@
 }
 
 /**
- * The border should get thicker when
+ * If the input has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.input-fill-outline.ion-touched.ion-valid),
+:host(.input-fill-outline.ion-touched.ion-invalid) {
+  --border-color: var(--highlight-color);
+}
+
+/**
+ * Border should be
+ * slightly darker on hover.
+ */
+@media (any-hover: hover) {
+  :host(.input-fill-outline:hover) {
+    --border-color: #{$background-color-step-750};
+  }
+}
+
+/**
+ * The border should get thicker
+ * and take on component color when
  * the input is focused.
  */
 :host(.input-fill-outline.has-focus) {
   --border-width: 2px;
+  --border-color: var(--highlight-color);
 }
 
 /**
@@ -30,16 +51,6 @@
   border-top: none;
 }
 
-/**
- * Border should be
- * slightly darker on hover.
- */
-@media (any-hover: hover) {
-  :host(.input-fill-outline:hover) {
-    --border-color: #{$background-color-step-750};
-  }
-}
-
 /**
  * Outline inputs do not have a bottom border.
  * Instead, they have a border that wraps the

core/src/components/input/input.md.scss

@@ -49,6 +49,39 @@
   min-height: 56px;
 }
 
+// Input Label
+// ----------------------------------------------------------------
+
+/**
+ * When the input is focused the label should
+ * take on the highlight color.
+ */
+:host(.has-focus) label {
+  color: var(--highlight-color);
+}
+
+// Input Highlight
+// ----------------------------------------------------------------
+
+.input-highlight {
+  @include position(null, null, -1px, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 2px;
+
+  transform: scale(0);
+
+  transition: transform 200ms;
+
+  background: var(--highlight-color);
+}
+
+:host(.has-focus) .input-highlight {
+  transform: scale(1);
+}
+
 // Input Shape Rounded
 // ----------------------------------------------------------------
 

core/src/components/input/input.md.solid.scss

@@ -19,6 +19,15 @@
   border-bottom: var(--border-width) var(--border-style) var(--border-color);
 }
 
+/**
+ * If the input has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.input-fill-solid.ion-touched.ion-valid) .input-wrapper,
+:host(.input-fill-solid.ion-touched.ion-invalid) .input-wrapper {
+  --border-color: var(--highlight-color);
+}
+
 :host(.input-fill-solid) .input-bottom {
   border-top: none;
 }

core/src/components/input/input.scss

@@ -43,6 +43,14 @@
   --highlight-color-valid: #{ion-color(success, base)};
   --highlight-color-invalid: #{ion-color(danger, base)};
 
+  /**
+   * This is a private API that is used to switch
+   * out the highlight color based on the state
+   * of the component without having to write
+   * different selectors for different fill variants.
+   */
+  --highlight-color: var(--highlight-color-focused);
+
   display: block;
 
   position: relative;
@@ -77,10 +85,14 @@
   --padding-start: 0;
 }
 
-:host(.ion-color) {
+:host(.legacy-input.ion-color) {
   color: current-color(base);
 }
 
+:host(.ion-color) {
+  --highlight-color-focused: #{current-color(base)};
+}
+
 // Native Text Input
 // --------------------------------------------------
 
@@ -251,6 +263,17 @@
   background: var(--background);
 }
 
+// Input Highlight
+// ----------------------------------------------------------------
+
+:host(.ion-touched.ion-invalid) {
+  --highlight-color: var(--highlight-color-invalid);
+}
+
+:host(.ion-touched.ion-valid) {
+  --highlight-color: var(--highlight-color-valid);
+}
+
 // Input Bottom Content
 // ----------------------------------------------------------------
 
@@ -271,6 +294,20 @@
   font-size: 12px;
 }
 
+/**
+ * If the input has a validity state, the
+ * border and label should reflect that as a color.
+ */
+:host(.ion-touched.ion-valid) .input-bottom,
+:host(.ion-touched.ion-invalid) .input-bottom {
+  --border-color: var(--highlight-color);
+}
+
+:host(.ion-touched.ion-valid) label,
+:host(.ion-touched.ion-invalid) label {
+  color: var(--highlight-color);
+}
+
 // Input Hint Text
 // ----------------------------------------------------------------
 
@@ -347,7 +384,7 @@
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-// Input Label Placement
+// Input Label Placement - Start
 // ----------------------------------------------------------------
 
 /**
@@ -358,6 +395,9 @@
   flex-direction: row;
 }
 
+// Input Label Placement - End
+// ----------------------------------------------------------------
+
 /**
  * Label is on the right of the input in LTR and
  * on the left in RTL.
@@ -375,6 +415,9 @@
   @include margin(0, 0, 0, 8px);
 }
 
+// Input Label Placement - Fixed
+// ----------------------------------------------------------------
+
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -389,6 +432,9 @@
   max-width: 200px;
 }
 
+// Input Label Placement - Stacked and Floating
+// ----------------------------------------------------------------
+
 /**
  * Stacked: Label sits above the input and is scaled down.
  * Floating: Label sits over the input when the input has no

core/src/components/input/input.tsx

@@ -604,6 +604,7 @@ export class Input implements ComponentInterface {
     const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
+    const shouldRenderHighlight = mode === 'md' && fill !== 'outline';
 
     return (
       <Host
@@ -669,6 +670,7 @@ export class Input implements ComponentInterface {
               onClick={this.onClearButtonClick}
             />
           )}
+          {shouldRenderHighlight && <div class="input-highlight"></div>}
         </div>
         {this.renderBottomContent()}
       </Host>