@avakhula/ui 0.0.78 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/components/Form/Input/input.scss

@@ -14,7 +14,7 @@ $input-hover-color: $neutral-900;
 $input-hover-bg: $blue-200;
 $input-hover-border-color: $blue-700;
 $input-hover-placeholder-color: $neutral-600;
-$input-hover-error-color: $red-800;
+$input-border-error-color: $red-800;
 
 .ib-input-wrapper {
   position: relative;
@@ -123,7 +123,7 @@ $input-hover-error-color: $red-800;
     &.ib-error {
       border-radius: 4px;
       border-color: transparent;
-      @include outline(-2px, $input-hover-error-color);
+      @include outline(-2px, $input-border-error-color);
     }
   }
 }

package/src/components/TreeSelect/Select.stories.js

@@ -73,6 +73,9 @@ export default {
     emptyMessage: {
       control: { type: "text" },
     },
+    errorMessage: {
+      control: { type: "text" },
+    },
     allOptions: {
       control: { type: "boolean" },
     },

package/src/components/TreeSelect/Select.vue

@@ -1,4 +1,8 @@
 <template>
+  <ib-alert class="tree-select-error" v-if="errorMessage">
+    {{ errorMessage }}
+  </ib-alert>
+
   <div class="tree-select">
     <ib-dropdown
       :disabled="isLoading"
@@ -22,6 +26,7 @@
           :class="{
             'tree-choice-opened': isOpened,
             'has-clear-button': !showClearButton,
+            'tree-choice-error': errorMessage,
           }"
         >
           <template v-if="htmlOptionTitle">
@@ -232,6 +237,7 @@ import generateUID from "../../helpers/generateUID";
 import IbDropdown from "../Dropdown/Dropdown.vue";
 import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
+import IbAlert from "../Alert/Alert.vue";
 import List from "../List.vue";
 
 export default {
@@ -359,6 +365,10 @@ export default {
       type: String,
       default: "",
     },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
     allOptions: {
       type: Boolean,
       default: true,
@@ -938,6 +948,7 @@ export default {
     },
   },
   components: {
+    IbAlert,
     IbIconButton,
     IbIcon,
     IbDropdown,

package/src/components/TreeSelect/scss/select.scss

@@ -17,10 +17,22 @@ $choice-hover-icon-color: $blue-700;
 $choice-opened-bg: $blue-50;
 $choice-opened-border-color: $blue-900;
 $choice-opened-icon-color: $blue-900;
-
+$choice-border-error-color: $red-800;
 $tree-search-border-color: $gray-600;
+
+.tree-select-error {
+  margin-bottom: 5px;
+}
+
 .tree-select {
+  width: 100%;
+
+  .ib-dropdown {
+    width: 100%;
+  }
+
   .dropdown-trigger {
+    width: inherit;
     display: inline-block;
     position: relative;
 
@@ -60,7 +72,6 @@ $tree-search-border-color: $gray-600;
     background-color: $choice-bg;
     color: $choice-text-color;
     border-radius: 4px 4px 0 0;
-    width: 280px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -92,6 +103,12 @@ $tree-search-border-color: $gray-600;
         color: $choice-opened-icon-color;
       }
     }
+
+    &.tree-choice-error {
+      border-radius: 4px;
+      border-color: transparent;
+      @include outline(-2px, $choice-border-error-color);
+    }
   }
 
   .button-clear {