feat: adds validOutline prop to Input field

solfacil · Jan 26, 2022 · 68c2b91 · 68c2b91
1 parent 08a7116
commit 68c2b91
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/assets/scss/_input-text.scss b/src/assets/scss/_input-text.scss
@@ -25,6 +25,10 @@
         margin: 0;
       }
     }
+
+    &.valid {
+      @apply border-green2;
+    }
   }
 
   .icon {

diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue
@@ -19,6 +19,7 @@
           search: inputType === 'search',
           hasIconVisibility: controlVisibility,
           'no-arrows': noArrows,
+          valid: validOutline,
         }"
         data-testid="input"
         :disabled="disabled"
@@ -136,6 +137,12 @@ export default {
       default: null,
     },
 
+    /** Provides a green "valid" border to the input */
+    validOutline: {
+      type: Boolean,
+      default: false,
+    },
+
     /** Specify the type of the Input: <br/> "date" | "email" | "password"  | "search"  | "tel"  | "text"  | "time" | "url" | "number" */
     type: {
       default: 'text',