Add form input field validation icons

Updates form validation to match updated style guide:
- Datepicker and password toggle form field
  padding adjusted to accomodate validation icons
- Valid form validation icon is hidden
- Adds carbon icons and enables validation icons in
  IBM environment

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I7edff1e9527ad2c2cfec236daacb83ad4864d785

2 files changed, 3 insertions, 10 deletions

diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 40fb7443..519a808f 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -49,7 +49,7 @@ export default {
   position: absolute;
   right: 0;
   top: 0;
-
+  padding: 0.4rem 1rem;
   svg {
     margin-left: 0;
     vertical-align: sub;
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index ab501ea3..538f0e05 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -12,6 +12,7 @@
             v-model="fromDate"
             placeholder="YYYY-MM-DD"
             :state="getValidationState($v.fromDate)"
+            class="form-control-with-button"
             @blur="$v.fromDate.$touch()"
           />
           <b-form-invalid-feedback role="alert">
@@ -58,6 +59,7 @@
             v-model="toDate"
             placeholder="YYYY-MM-DD"
             :state="getValidationState($v.toDate)"
+            class="form-control-with-button"
             @blur="$v.toDate.$touch()"
           />
           <b-form-invalid-feedback role="alert">
@@ -163,12 +165,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.b-form-datepicker {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: $zindex-dropdown + 1;
-}
-</style>