adata-ui 0.1.84 → 0.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.84",
+  "version": "0.1.87",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/_text_field.scss

@@ -56,13 +56,14 @@
   &__field {
     position: relative;
     overflow: hidden;
-    @media(max-width: 1025px) {
+    @media (max-width: 1025px) {
       width: 100%;
       display: flex;
     }
   }
 
-  &__input, &__textarea {
+  &__input,
+  &__textarea textarea {
     background: #ffffff;
     border: 0.5px solid #c4c4c4;
     box-sizing: border-box;
@@ -70,10 +71,10 @@
     width: 100%;
     height: 40px;
     font-size: 14px;
-    color: #1A2030;
+    color: #1a2030;
     padding: 19px 40px 5px 16px;
     transition: 0.3s all;
-    @media(max-width: 1025px) {
+    @media (max-width: 1025px) {
       padding: 19px 36px 7px 12px;
       height: 40px;
       font-size: 12px;
@@ -85,28 +86,58 @@
     &:not(:-webkit-autofill):valid ~ #{$self}__label {
       top: 12px;
       font-size: 10px;
-      color: #71757A;
+      color: #71757a;
       text-overflow: inherit;
       width: 100%;
-      @media(max-width: 1025px) {
+      @media (max-width: 1025px) {
         font-size: 8px;
       }
     }
     &:hover {
-      border: 0.5px solid #2C3E50;
+      border: 0.5px solid #2c3e50;
     }
 
     &:focus {
-      border: 0.5px solid #2C3E50;
+      border: 0.5px solid #2c3e50;
     }
 
     &::placeholder {
       font-size: 12px;
     }
+  }
 
-    &.error {
-      border: 1px solid #FF2E43;
+  &__textarea {
+    border: 0.5px solid #c4c4c4;
+    height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    position: relative;
+    overflow: hidden;
+    &--error {
+      border: none;
+      border: 0.5px solid #ff2e43;
       background: #ff2e431f;
+      textarea {
+        background: transparent;
+      }
+    }
+    &:focus,
+    &:hover {
+      border: 0.5px solid #2c3e50;
+    }
+    textarea {
+      border: none;
+      height: 92px;
+      padding: 0 40px 5px 16px;
+      resize: none;
+      &:focus,
+      &:hover {
+        border: none;
+      }
+    }
+    .adt-text-block__label {
+      top: 20px;
     }
   }
 
@@ -120,21 +151,16 @@
     overflow: hidden;
     line-height: 40px;
     transition: 0.3s;
-    color: #71757A;
+    color: #71757a;
     font-size: 14px;
-    @media(max-width: 1025px) {
+    @media (max-width: 1025px) {
       left: 12px;
       font-size: 14px;
       line-height: 16px;
-      color: #71757A;
+      color: #71757a;
     }
   }
 
-  &__textarea {
-    min-height: 120px;
-    resize: none;
-  }
-
   &__textarea + label {
     top: 20px;
   }
@@ -159,7 +185,7 @@
   }
 
   &__required {
-    color: #FF2E43;
+    color: #ff2e43;
   }
 
   &__options {
@@ -171,9 +197,8 @@
     z-index: 1000;
     border-radius: 2px;
     padding: 8px 0;
-    @media(max-width: 1025px) {
-      overflow: auto;
-    }
+    max-height: 250px;
+    overflow: auto;
 
     #searchVariant {
       background: #eef0f5;
@@ -188,7 +213,7 @@
       color: #71757a;
       transition: 0.3s all;
       cursor: pointer;
-      @media(max-width: 1025px) {
+      @media (max-width: 1025px) {
         font-size: 12px;
       }
 
@@ -196,5 +221,14 @@
         background: #eef0f5;
       }
     }
+    &::-webkit-scrollbar {
+      width: 4px;
+      &-thumb {
+        background: #c4c4c4;
+      }
+      &-track {
+        background: #fff;
+      }
+    }
   }
 }

package/src/components/Button/AButton.vue

@@ -48,6 +48,7 @@ export default {
             'md',
             'extra_sm',
             'fit',
+            'fit-md',
           ].includes(value)
         );
       },
@@ -109,6 +110,11 @@ export default {
       padding: 8px 0;
       width: 100%;
     }
+    &_fit-md {
+      height: 40px;
+      padding: 8px 0;
+      width: 100%;
+    }
   }
 
   &_grey {

package/src/components/SearchTextField/SearchTextField.stories.js

@@ -25,6 +25,50 @@ WithIcon.args = {
             id: 1,
             name: "a"
         },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
+        {
+            id: 2,
+            name: "b"
+        },
         {
             id: 2,
             name: "b"

package/src/components/TextArea/TextArea.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="adt-text-block">
-    <div :class="['adt-text-block__field', { error: !!errorText }]">
+  <div class="adt-text-block__wrapper">
+    <div
+      class="adt-text-block__textarea"
+      :class="{ 'adt-text-block__textarea--error': !!errorText }"
+    >
       <textarea
         ref="textarea"
         :type="type"
@@ -9,10 +12,11 @@
         required
         @input="$emit('input', $event.target.value)"
         @keyup.enter="enterPressed"
-        class="adt-text-block__textarea"
-        :class="{ error: !!errorText }"
       />
-      <label class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
+      <label
+        class="adt-text-block__label"
+        :class="{ 'adt-text-block--ellipsis': isEllipsis }"
+      >
         {{ label }}
         <span v-if="required" class="adt-text-block__required">*</span>
       </label>
@@ -98,7 +102,7 @@ export default {
     isEllipsis: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   data() {
     return {