Merge pull request #768 from BY00565233/SURF-2065

feat(hx-text-control): add help and error text

Author: 100stacks

docs/components/text-input/index.html

@@ -91,6 +91,42 @@ <h2 id="basic-text-input">Basic Text Input</h2>
               </p>
             </hx-checkbox-control>
           </fieldset>
+
+          <fieldset>
+            <legend class="beta-hxFieldName">Optional Text</legend>
+            <hx-checkbox-control>
+              <input
+                id="chkHasHelpText"
+                type="checkbox"
+                v-model="helpTextToDisplay"
+              />
+              <label for="chkHasHelpText">
+                <hx-checkbox></hx-checkbox>
+                Help Text
+              </label>
+            </hx-checkbox-control>
+            <hx-checkbox-control>
+              <input
+                id="chkHasError"
+                type="checkbox"
+                v-model="errorTextToDisplay"
+              />
+              <label for="chkHasError">
+                <hx-checkbox></hx-checkbox>
+                Error Text
+              </label>
+            </hx-checkbox-control>
+
+            <hx-text-control>
+              <label> Help Text</label>
+              <input type="text" v-model="helpText" :disabled="!helpTextToDisplay">
+             </hx-text-control>
+
+             <hx-text-control>
+                <label> Error Text</label>
+              <input type="text" v-model="errorText" :disabled="!errorTextToDisplay">
+             </hx-text-control>
+          </fieldset>
         </form>
       </header>
 
@@ -108,6 +144,14 @@ <h2 id="basic-text-input">Basic Text Input</h2>
           >
             {% raw %}{{label}}{% endraw %}
           </label>
+          <p class="hxHelpText" :hidden="!helpTextToDisplay">
+            {% raw %}{{helpText}} {% endraw %}
+          </p>
+          <p class="hxErrorText" :hidden="!errorTextToDisplay">
+            <hx-error>
+              {% raw %}{{errorText}} {% endraw %}
+            </hx-error>
+          </p>
         </hx-text-control>
       </div>
 

docs/components/text-input/text-input-demo.js

@@ -9,6 +9,10 @@ if (document.getElementById('vue-textInputDemo')) {
             isDisabled: false,
             isRequired: false,
             label: 'Username',
+            errorTextToDisplay: false,
+            helpTextToDisplay: false,
+            helpText: 'Please enter username.',
+            errorText: 'Username should not be empty',
         },
         computed: {
             attrDisabled: function () {
@@ -32,6 +36,12 @@ if (document.getElementById('vue-textInputDemo')) {
 
                 return (classNames === '' ? '' : `class="${classNames}"`);
             },
+            isHelpTextHidden: function () {
+                return (this.helpTextToDisplay ? '' : 'hidden');
+            },
+            isErrorTextHidden: function () {
+                return (this.errorTextToDisplay ? '' : 'hidden');
+            },
             snippet: function () {
                 return Util.snippet(`
                     <hx-text-control>
@@ -47,6 +57,14 @@ if (document.getElementById('vue-textInputDemo')) {
                       >
                         ${this.label}
                       </label>
+                      <p class="hxHelpText" ${this.isHelpTextHidden}>
+                        ${this.helpText}
+                      </p>
+                      <p class="hxErrorText" ${this.isErrorTextHidden}>
+                        <hx-error>
+                            ${this.errorText}
+                        </hx-error>
+                      </p>
                     </hx-text-control>
                 `);
             },

src/scss/components/text-input/_index.scss

@@ -8,12 +8,16 @@
 ///  +----------+---------+----------+
 ///  | [prefix] | control | [suffix] | auto
 ///  +----------+---------+----------+
+///  | help     | help    | help     | auto
+///  +----------+---------+----------+
+///  | error    | error   | error    | auto
+///  +----------+---------+----------+
 ///
-///  * column will collapse if content not present
+///  column will collapse if content not present
 
 hx-text-control {
   $ctrl-columns: auto 1fr auto;
-  $ctrl-rows: auto auto;
+  $ctrl-rows: auto auto auto auto;
   $ctrl-row-align: center;
 
   -ms-grid-columns: $ctrl-columns;
@@ -23,7 +27,9 @@ hx-text-control {
   display: grid;
   grid-template-areas:
     "label  label   label"
-    "prefix control suffix";
+    "prefix control suffix"
+    "help   help    help"
+    "error  error   error";
   grid-template-columns: $ctrl-columns;
   grid-template-rows: $ctrl-rows;
 
@@ -36,7 +42,8 @@ hx-text-control {
   > label,
   > input[type="text"],
   > .hxPrefix,
-  > .hxSuffix {
+  > .hxSuffix,
+  > p {
     display: block;
   }
 
@@ -83,6 +90,31 @@ hx-text-control {
     justify-self: $justify;
     margin-left: 0.25rem;
   }
+
+  > p,
+  p.hxHelpText {
+    $justify: start;
+
+    -ms-grid-column-align: $justify;
+    -ms-grid-column-span: 3;
+    -ms-grid-column: 1;
+    -ms-grid-row: 3;
+    -ms-grid-row-align: $ctrl-row-align; // because IE
+    grid-area: help;
+    justify-self: $justify;
+  }
+
+  > p.hxErrorText {
+    $justify: start;
+
+    -ms-grid-column-align: $justify;
+    -ms-grid-column-span: 3;
+    -ms-grid-column: 1;
+    -ms-grid-row: 4;
+    -ms-grid-row-align: $ctrl-row-align; // because IE
+    grid-area: error;
+    justify-self: $justify;
+  }
 }
 
 // ----- PRISTINE ----------
@@ -98,6 +130,18 @@ hx-text-control {
       @include hxTextControl($focused: true);
     }
   }
+
+  > p,
+  p.hxHelpText {
+    @include hxHelpText();  // default styles
+  }
+
+  > p.hxErrorText {
+    color: $red-900;
+    font-size: 0.75rem;
+    margin-top: 0;
+    width: 100%; // for IE11
+  }
 }
 
 // ----- INVALID ----------