Field error and help text in CSS package -- and implemented in Vue pa…

…ckage Input.vue
AgnosticUI · Oct 7, 2020 · ba3e9f8 · ba3e9f8
1 parent 00d4cc6
commit ba3e9f8
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 7 deletions.
diff --git a/agnosticui-css/input.css b/agnosticui-css/input.css
@@ -15,6 +15,9 @@
 }
 
 /* Electing to scope these as opposed to doing :root level definitions */
+.field-help,
+.field-help-large,
+.field-help-small,
 .field-error,
 .field-error-large,
 .field-error-small,
@@ -28,6 +31,7 @@
 .input {
   /* These custom props all fallback on the agnosticui main variables so main theme is preserved */
   --agnosticui-input-error-color: var(--agnosticui-error-color, var(--agnosticui-secondary));
+  --agnosticui-input-help-color: var(--agnosticui-help-color, var(--agnosticui-gray-dark));
   --agnosticui-input-font-color: var(--agnosticui-font-color, var(--agnosticui-dark));
   --agnosticui-input-font-weight: var(--agnosticui-font-weight, 300);
   --agnosticui-input-font-size: var(--agnosticui-font-size, var(--Space-16));
@@ -86,6 +90,7 @@
 }
 
 /* Reset labels and field errors to be 2px less then input font size */
+.field-help,
 .field-error,
 .label,
 .label-skin {
@@ -179,12 +184,21 @@
   color: var(--agnosticui-input-error-color);
 }
 
+.field-help,
+.field-help-small,
+.field-help-large {
+  color: var(--agnosticui-input-help-color);
+}
+
+.field-help,
+.field-help-small,
+.field-help-large,
 .field-error,
 .field-error-small,
 .field-error-large {
   display: inline-block;
   width: 100%;
-  margin: var(--agnosticui-input-vertical-pad) 0;
+  margin-top: calc(var(--agnosticui-input-vertical-pad) / 2);
 }
 
 /**
@@ -195,6 +209,7 @@
   line-height: calc(var(--agnosticui-input-line-height) + 4px);
 }
 
+.field-help-large,
 .field-error-large,
 .label-large {
   font-size: calc(var(--agnosticui-input-label-font-size) + 2px);
@@ -206,6 +221,7 @@
   line-height: calc(var(--agnosticui-input-line-height) - 4px);
 }
 
+.field-help-small,
 .field-error-small,
 .label-small {
   /* Since labels are already smaller, bringing them down var(--Space-4) here

diff --git a/agnosticui-css/input.html b/agnosticui-css/input.html
@@ -24,8 +24,8 @@
       margin-bottom: 40px;
     }
 
-    .input {
-      margin-bottom: var(--Space-12);
+    .label:not(.label-inline) {
+      margin-top: var(--Space-16);
     }
   </style>
 </head>
@@ -107,8 +107,27 @@ <h4>Textarea</h4>
       </form>
     </section>
 
+    <h3>Errors &amp; Help Text</h3>
+    <p>Apply help text by applying the <i>field-help</i> class.</p>
+    <div>
+      <label class="label" for="input-text-help-block">Block field help</label>
+      <input class="input" id="input-text-help-block" name="input-text-help-block" type="text">
+      <span class="field-help">Please fill out this field.</span>
+    </div>
+
+    <p><i>field-help-small</i> and <i>field-help-large</i></p>
+    <div>
+      <label class="label" for="input-text-help-small">Smaller field help</label>
+      <input class="input" id="input-text-help-small" name="input-text-help-small" type="text">
+      <span class="field-help-small">I'm smaller help text.</span>
+    </div>
+
+    <div>
+      <label class="label" for="input-text-help-large">Larger field help</label>
+      <input class="input" id="input-text-help-large" name="input-text-help-large" type="text">
+      <span class="field-help-large">I'm larger help text.</span>
+    </div>
 
-    <h3>Errors</h3>
     <p>Block level errors can be achieved declaritively by adding appropriate <i>TYPE-error</i> classes.</p>
     <div>
       <label class="label label-error" for="input-text-error-block">Block label error</label>

diff --git a/agnosticui-vue/src/stories/Input.stories.js b/agnosticui-vue/src/stories/Input.stories.js
@@ -89,9 +89,42 @@ export const Disabled = () => ({
   },
 })
 
-export const Error = () => ({
+export const HelpText = () => ({
   components: { Input },
-  template: '<Input isError uniqueId="myUniqueId" v-model="name" label="Error input" />',
+  template: '<Input helpText="Some useful help text." uniqueId="myUniqueId" v-model="name" label="Help text" />',
+  props: ['value'],
+  data() {
+    return {
+      name: ''
+    }
+  },
+})
+
+export const InvalidText = () => ({
+  components: { Input },
+  template: '<Input isInvalid invalidText="This field has errors." uniqueId="myUniqueId" v-model="name" label="Invalid text" />',
+  props: ['value'],
+  data() {
+    return {
+      name: ''
+    }
+  },
+})
+
+export const InvalidTextSmall = () => ({
+  components: { Input },
+  template: '<Input isInvalid size="small" invalidText="This field has errors." uniqueId="myUniqueId" v-model="name" label="Invalid text—size small results in smaller input and error text" />',
+  props: ['value'],
+  data() {
+    return {
+      name: ''
+    }
+  },
+})
+
+export const InvalidTextLarge = () => ({
+  components: { Input },
+  template: '<Input isInvalid size="large" invalidText="This field has errors." uniqueId="myUniqueId" v-model="name" label="Invalid text—size large results in larger input and error text" />',
   props: ['value'],
   data() {
     return {

diff --git a/agnosticui-vue/src/stories/Input.vue b/agnosticui-vue/src/stories/Input.vue
@@ -14,6 +14,10 @@
         input: (event) => $emit('input', event.target.value),
       }"
     />
+    <span v-if="isInvalid" :class="invalidClasses">
+      {{ invalidText }}
+    </span>
+    <span v-else-if="helpText" :class="helpClasses">{{ helpText }}</span>
   </div>
 </template>
 
@@ -50,6 +54,18 @@ export default {
       type: String,
       default: "",
     },
+    helpText: {
+      type: String,
+      default: "",
+    },
+    invalidText: {
+      type: String,
+      default: "",
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
     isDisabled: {
       type: Boolean,
       default: false,
@@ -87,6 +103,18 @@ export default {
     },
   },
   computed: {
+    helpClasses() {
+      return {
+        [this.$style["field-help"]]: !this.size,
+        [this.$style[`field-help-${this.size}`]]: this.size,
+      };
+    },
+    invalidClasses() {
+      return {
+        [this.$style["field-error"]]: !this.size,
+        [this.$style[`field-error-${this.size}`]]: this.size,
+      };
+    },
     inputClasses() {
       const sizeKlass = `input-${this.size}`;
       // console.log("sizeKlass: ", sizeKlass);
@@ -96,6 +124,7 @@ export default {
         [this.$style["input"]]: true,
         [this.$style["input-rounded"]]: this.isRounded,
         [this.$style["input-underlined"]]: this.isUnderlined,
+        [this.$style["input-error"]]: this.isInvalid,
         [this.$style["input-underlined-bg"]]: this.isUnderlinedWithBackground,
         [`${this.inputCss}`]: !!this.inputCss,
         [this.$style[`input-${this.size}`]]: this.size,
@@ -104,6 +133,8 @@ export default {
     labelClasses() {
       return {
         [this.$style["label"]]: true,
+        [this.$style["label-error"]]: this.isInvalid,
+        [this.$style[`label-${this.size}`]]: this.size,
         [`${this.labelCss}`]: !!this.labelCss,
       };
     },
@@ -128,6 +159,9 @@ export default {
 }
 
 /* Electing to scope these as opposed to doing :root level definitions */
+.field-help,
+.field-help-large,
+.field-help-small,
 .field-error,
 .field-error-large,
 .field-error-small,
@@ -141,6 +175,7 @@ export default {
 .input {
   /* These custom props all fallback on the agnosticui main variables so main theme is preserved */
   --agnosticui-input-error-color: var(--agnosticui-error-color, var(--agnosticui-secondary));
+  --agnosticui-input-help-color: var(--agnosticui-help-color, var(--agnosticui-gray-dark));
   --agnosticui-input-font-color: var(--agnosticui-font-color, var(--agnosticui-dark));
   --agnosticui-input-font-weight: var(--agnosticui-font-weight, 300);
   --agnosticui-input-font-size: var(--agnosticui-font-size, var(--Space-16));
@@ -199,6 +234,7 @@ export default {
 }
 
 /* Reset labels and field errors to be 2px less then input font size */
+.field-help,
 .field-error,
 .label,
 .label-skin {
@@ -292,12 +328,21 @@ export default {
   color: var(--agnosticui-input-error-color);
 }
 
+.field-help,
+.field-help-small,
+.field-help-large {
+  color: var(--agnosticui-input-help-color);
+}
+
+.field-help,
+.field-help-small,
+.field-help-large,
 .field-error,
 .field-error-small,
 .field-error-large {
   display: inline-block;
   width: 100%;
-  margin: var(--agnosticui-input-vertical-pad) 0;
+  margin-top: calc(var(--agnosticui-input-vertical-pad) / 2);
 }
 
 /**
@@ -308,6 +353,7 @@ export default {
   line-height: calc(var(--agnosticui-input-line-height) + 4px);
 }
 
+.field-help-large,
 .field-error-large,
 .label-large {
   font-size: calc(var(--agnosticui-input-label-font-size) + 2px);
@@ -319,6 +365,7 @@ export default {
   line-height: calc(var(--agnosticui-input-line-height) - 4px);
 }
 
+.field-help-small,
 .field-error-small,
 .label-small {
   /* Since labels are already smaller, bringing them down var(--Space-4) here