LITE-30423: Minor ui fixes

components/src/stories/Textarea.stories.js

@@ -9,13 +9,31 @@ export const Basic = {
     setup() {
       return { args };
     },
-    template: '<ui-textarea v-bind="args"></ui-textarea>',
+    template: '<ui-textarea v-bind="args" style="width:400px;"></ui-textarea>',
   }),
 
   args: {
+    label: 'Simple textarea',
+    hint: 'This is a hint for the text area input',
     value: '',
     placeholder: 'Placeholder text',
-    label: 'Label',
+  },
+};
+
+export const Validation = {
+  name: 'Input validation',
+  render: Basic.render,
+
+  args: {
+    label: 'Text area with validation',
+    hint: 'This is a text area with validation. The text should be < 30 characters.',
+    value: '',
+    placeholder: 'Lorem ipsum dolor sit amet',
+    required: true,
+    rules: [
+      (value) => !!value || 'This field is required',
+      (value) => value.length < 30 || 'The value must be less than 30 characters',
+    ],
   },
 };
 
@@ -28,10 +46,12 @@ export default {
   argTypes: {
     value: 'text',
     readonly: 'boolean',
+    hint: 'text',
     placeholder: 'text',
     required: 'boolean',
     autoGrow: 'boolean',
     noBorder: 'boolean',
+    monospace: 'boolean',
     rows: 'number',
     label: 'string',
   },

components/src/widgets/menu/widget.vue

@@ -91,7 +91,7 @@ onUnmounted(() => {
 
 .menu-content {
   position: absolute;
-  top: 0;
+  top: 2px;
   width: max-content;
 
   &_align-right {

components/src/widgets/textarea/widget.vue

@@ -8,7 +8,7 @@
     <label
       v-if="label"
       class="textarea-field__label"
-      :for="textarea"
+      for="textarea"
     >
       <slot name="label">
         <span>{{ props.label }}</span>
@@ -18,14 +18,12 @@
       ref="txtarea"
       v-model="localValue"
       class="textarea-field__input"
-      :class="{
-        'textarea-field__input_no-resize': autoGrow,
-        'textarea-field__input_no-border': noBorder,
-      }"
+      :class="inputClasses"
       :placeholder="placeholder"
       :readonly="props.readonly"
       :rows="rows"
       name="textarea"
+      @focus="setFocus"
       @input.stop
     ></textarea>
     <div
@@ -86,6 +84,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  monospace: {
+    type: Boolean,
+    default: false,
+  },
   rules: {
     type: Array,
     default: () => [],
@@ -125,6 +127,12 @@ const computedClasses = computed(() => ({
   'textarea-field_optional': !props.required,
 }));
 
+const inputClasses = computed(() => ({
+  'textarea-field__input_no-resize': props.autoGrow,
+  'textarea-field__input_no-border': props.noBorder,
+  'textarea-field__input_monospace': props.monospace,
+}));
+
 onMounted(() => {
   if (props.autoGrow) calculateInputHeight();
 });
@@ -166,6 +174,7 @@ watch(localValue, async (newValue) => {
     border-radius: 2px;
     padding: 11px;
     resize: vertical;
+    font-family: inherit;
 
     &_no-resize {
       resize: none;
@@ -175,6 +184,10 @@ watch(localValue, async (newValue) => {
       border: none;
       outline: none;
     }
+
+    &_monospace {
+      font-family: monospace;
+    }
   }
 
   &__label {

components/src/widgets/textfield/widget.vue

@@ -2,6 +2,7 @@
   <div
     class="text-field"
     :class="computedClasses"
+    @click="setFocus"
   >
     <label
       v-if="label"
@@ -12,7 +13,6 @@
     </label>
     <div
       class="text-field__wrapper"
-      @click="setFocus"
       @focusout="removeFocus"
     >
       <div class="text-field__body">
@@ -24,6 +24,7 @@
           :placeholder="placeholder"
           name="textfield"
           type="text"
+          @focus="setFocus"
           @input.stop
         />
         <span