Merge pull request #81 from cloudblue/feat/LITE-30032-add-required-pr…

…op-to-inputs

LITE-30032: Add "required" prop to Select and TextField

components/src/stories/Select.stories.js

@@ -47,6 +47,7 @@ export const Validation = {
     hint: 'Select the second option if you want the validation to be successful',
     propValue: 'id',
     propText: 'name',
+    required: true,
     options: [
       { id: 'OBJ-123', name: 'The first object' },
       { id: 'OBJ-456', name: 'The second object' },
@@ -133,6 +134,7 @@ export default {
     hint: 'text',
     propValue: 'text',
     propText: 'text',
+    required: 'boolean',
     options: { control: 'array' },
   },
 };

components/src/stories/TextField.stories.js

@@ -32,6 +32,7 @@ export const Validation = {
     hint: 'This is a text field with validation. The value should be an email',
     value: '',
     placeholder: '[email protected]',
+    required: true,
     rules: [
       (value) => !!value || 'This field is required',
       (value) => isEmail(value) || 'The value is not a valid email address',
@@ -50,5 +51,6 @@ export default {
     value: 'text',
     placeholder: 'text',
     suffix: 'text',
+    required: 'boolean',
   },
 };

components/src/widgets/select/widget.vue

@@ -118,6 +118,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['valueChange']);
@@ -129,6 +133,7 @@ const isFocused = ref(false);
 const computedClasses = computed(() => ({
   'select-input_focused': isFocused.value,
   'select-input_invalid': !isValid.value,
+  'select-input_required': props.required,
 }));
 
 const computedOptions = computed(() =>
@@ -158,6 +163,14 @@ const getDisplayText = (item) => {
 .select-input {
   color: #212121;
 
+  &_required .select-input__label p::after {
+    content: '*';
+    margin-left: 3px;
+    color: #FF0000;
+    text-decoration: none;
+    display: inline-block;
+  }
+
   &__selected {
     height: 44px;
     border-radius: 2px;

components/src/widgets/textfield/widget.vue

@@ -72,6 +72,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['input']);
@@ -86,6 +90,7 @@ const isFocused = ref(false);
 const computedClasses = computed(() => ({
   'text-field_focused': isFocused.value,
   'text-field_invalid': !isValid.value,
+  'text-field_required': props.required,
 }));
 
 const removeFocus = () => (isFocused.value = false);
@@ -126,6 +131,14 @@ watch(localValue, (newValue) => {
     line-height: 1.4;
   }
 
+  &_required label::after {
+    content: '*';
+    margin-left: 3px;
+    color: #FF0000;
+    text-decoration: none;
+    display: inline-block;
+  }
+
   &__body {
     flex-grow: 1;