Add isInvalid states for TextInput, TextArea, and SearchInput components. (#11995)

ui_framework/components/_mixins.scss

@@ -147,15 +147,8 @@
   border-radius: $borderRadius;
   transition: border-color $globalInputTransitionTiming;
 
-  /**
-   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
-   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
-   *    with it.
-   */
   &:invalid {
-    &:not(.ng-untouched) { /* 1 */
-      border-color: $globalDangerBorderColor;
-    }
+    @include formControlInvalid;
   }
 
   &:focus {
@@ -177,6 +170,17 @@
   }
 }
 
+/**
+ * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
+ *    We only want invalid inputs to appear invalid after the user has had a chance to interact
+ *    with it.
+ */
+@mixin formControlInvalid {
+  &:not(.ng-untouched) { /* 1 */
+    border-color: $globalDangerBorderColor;
+  }
+}
+
 /**
  * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
  * 2. Make room on right side for the caret.

ui_framework/components/form/_search_input.scss

@@ -5,6 +5,12 @@ $searchInputTextColor: #ACACAC;
   position: relative;
   font-size: $globalFontSize;
   line-height: $globalLineHeight;
+
+  &.kuiSearchInput-isInvalid {
+    .kuiSearchInput__input {
+      @include formControlInvalid;
+    }
+  }
 }
 
   .kuiSearchInput__icon {

ui_framework/components/form/_text_area.scss

@@ -1,5 +1,9 @@
 .kuiTextArea {
   @include formControl;
+
+  &.kuiTextArea-isInvalid {
+    @include formControlInvalid;
+  }
 }
 
 .kuiTextArea--nonResizable {

ui_framework/components/form/_text_input.scss

@@ -1,5 +1,9 @@
 .kuiTextInput {
   @include formControl;
+
+  &.kuiTextInput-isInvalid {
+    @include formControlInvalid;
+  }
 }
 
 .kuiTextInput--small {

ui_framework/dist/ui_framework.css

@@ -24,6 +24,11 @@
 /**
  * Nothing fancy, just the basics so we can use this for both regular and static controls.
  */
+/**
+ * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
+ *    We only want invalid inputs to appear invalid after the user has had a chance to interact
+ *    with it.
+ */
 /**
  * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
  * 2. Make room on right side for the caret.
@@ -809,6 +814,9 @@ body {
   position: relative;
   font-size: 14px;
   line-height: 1.5; }
+  .kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input:not(.ng-untouched) {
+    /* 1 */
+    border-color: #D86051; }
 
 .kuiSearchInput__icon {
   position: absolute;
@@ -835,11 +843,6 @@ body {
   border: 1px solid #DEDEDE;
   border-radius: 4px;
   transition: border-color 0.1s linear;
-  /**
-   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
-   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
-   *    with it.
-   */
   padding-left: 28px;
   /* 1 */
   width: 100%;
@@ -876,11 +879,6 @@ body {
   border: 1px solid #DEDEDE;
   border-radius: 4px;
   transition: border-color 0.1s linear;
-  /**
-   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
-   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
-   *    with it.
-   */
   padding-right: 30px;
   /* 2 */
   background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
@@ -948,12 +946,7 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  transition: border-color 0.1s linear;
-  /**
-   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
-   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
-   *    with it.
-   */ }
+  transition: border-color 0.1s linear; }
   .theme-dark .kuiTextArea {
     color: #cecece; }
   .kuiTextArea:invalid:not(.ng-untouched) {
@@ -971,6 +964,9 @@ body {
     .theme-dark .kuiTextArea:focus {
       outline: none;
       border-color: #6EADC1; }
+  .kuiTextArea.kuiTextArea-isInvalid:not(.ng-untouched) {
+    /* 1 */
+    border-color: #D86051; }
 
 .kuiTextArea--nonResizable {
   resize: none; }
@@ -988,12 +984,7 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  transition: border-color 0.1s linear;
-  /**
-   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
-   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
-   *    with it.
-   */ }
+  transition: border-color 0.1s linear; }
   .theme-dark .kuiTextInput {
     color: #cecece; }
   .kuiTextInput:invalid:not(.ng-untouched) {
@@ -1011,6 +1002,9 @@ body {
     .theme-dark .kuiTextInput:focus {
       outline: none;
       border-color: #6EADC1; }
+  .kuiTextInput.kuiTextInput-isInvalid:not(.ng-untouched) {
+    /* 1 */
+    border-color: #D86051; }
 
 .kuiTextInput--small {
   width: 100%;
@@ -1792,11 +1786,6 @@ body {
   border: 1px solid #DEDEDE;
   border-radius: 4px;
   transition: border-color 0.1s linear;
-  /**
-   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
-   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
-   *    with it.
-   */
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 100%;
       -ms-flex: 1 1 100%;
@@ -1874,11 +1863,6 @@ body {
   border: 1px solid #DEDEDE;
   border-radius: 4px;
   transition: border-color 0.1s linear;
-  /**
-   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
-   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
-   *    with it.
-   */
   padding-right: 30px;
   /* 2 */
   background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');

ui_framework/doc_site/src/views/form/search_input.html

@@ -6,3 +6,14 @@
     placeholder="Search..."
   >
 </div>
+
+<hr class="guideBreak">
+
+<div class="kuiSearchInput kuiSearchInput-isInvalid">
+  <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
+  <input
+    class="kuiSearchInput__input"
+    type="text"
+    placeholder="Search..."
+  >
+</div>

ui_framework/doc_site/src/views/form/text_area.html

@@ -9,7 +9,7 @@ Entered text
 
 <hr class="guideBreak">
 
-<textarea type="text" class="kuiTextArea" required>
+<textarea type="text" class="kuiTextArea kuiTextArea-isInvalid">
 </textarea>
 
 <hr class="guideBreak">

ui_framework/doc_site/src/views/form/text_input.html

@@ -6,7 +6,7 @@
 
 <hr class="guideBreak">
 
-<input type="text" class="kuiTextInput" required>
+<input type="text" class="kuiTextInput kuiTextInput-isInvalid">
 
 <hr class="guideBreak">