Merge pull request #33 from flowforge/textinput-error-docs

Add error example to docs
FlowFuse · Jul 29, 2022 · d91873e · d91873e
2 parents babc4bf + 7382fd6
commit d91873e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/docs/DesignLanguage.vue b/docs/DesignLanguage.vue
@@ -300,6 +300,11 @@
                         {{ models.textInput0 }}
                         <code>{{ groups['input'].components[0].examples[0].code }}</code>
                     </div>
+                    <div class="example">
+                        <h5>Error State</h5>
+                        <ff-text-input placeholder="Insert something here..." v-model="models.textInput1" :error="'This is the error'"/>
+                        <code>{{ groups['input'].components[0].examples[3].code }}</code>
+                    </div>
                     <div class="example">
                         <h5>Type: Password</h5>
                         <ff-text-input type="password" placeholder="Password goes here..."/>

diff --git a/docs/data/input.docs.json b/docs/data/input.docs.json
@@ -11,6 +11,8 @@
             "code": "<ff-text-input type\"email\" v-model=\"myEmail\" />"
         }, {
             "code": "<ff-text-input type\"email\" v-model=\"myEmail\">\n\t<template v-slot:icon><SearchIcon/></template>\n</ff-text-input>"
+        }, {
+            "code": "<ff-text-input type\"email\" v-model=\"myEmail\" :error=\"'This is the error.'\"></ff-text-input>"
         }],
         "props": [{
             "key": "disabled",
@@ -21,9 +23,13 @@
             "default": "null",
             "description": "Informative text to assist the user with the information required in this input field."
         }, {
-            "key": "password",
+            "key": "type",
+            "default": "'button'",
+            "description": "Any standard HTML button 'type'"
+        }, {
+            "key": "error",
             "default": "false",
-            "description": "Hide the content of this text input as a password field."
+            "description": "Anything other than null/undefined will result in the error state being visualised. Error message can be displayed manually with a <label class=\"ff-error-inline\">"
         }],
         "slots": [{
             "name": "icon",

diff --git a/src/stylesheets/ff-components.scss b/src/stylesheets/ff-components.scss
@@ -208,6 +208,8 @@ li.ff-list-item {
     display: flex;
     gap: 0px;
     align-items: center;
+    background-color: $ff-white;
+    border-color: $ff-grey-300;
     svg {
       width: 20px;
       height: 20px;
@@ -216,7 +218,7 @@ li.ff-list-item {
     input {
       flex-grow: 1;
       padding: $ff-unit-sm $ff-unit-md;
-      border-radius: $ff-unit-xs;
+      border-radius: $ff-unit-sm;
       background: none;
       height: 100%;
       border-width: 0;
@@ -238,7 +240,9 @@ li.ff-list-item {
 
 .ff-input--error {
   &.ff-text-input {
-    border-color: $ff-red-300;
+    border-color: $ff-red-500;
+    border-width: 2px;
+    outline: none;
   }
 }
 

diff --git a/src/stylesheets/ff-theme-light.scss b/src/stylesheets/ff-theme-light.scss
@@ -29,12 +29,4 @@
             color: $ff-grey-300;
         }
     }
-
-    .ff-input.ff-text-input {
-        background-color: $ff-white;
-        border-color: $ff-grey-300;
-        &:focus-within {
-          border-color: $ff-blue-600;
-        }
-    }
 }