LITE-30108: Update styles for "required" inputs

components/src/widgets/select/widget.spec.js

@@ -17,7 +17,7 @@ describe('Select', () => {
 
   describe('render', () => {
     it('renders the base component', () => {
-      expect(wrapper.get('.select-input__label').text()).toEqual('My select');
+      expect(wrapper.get('.select-input__label').text()).toEqual('My select (Optional)');
       expect(wrapper.get('.select-input__hint').text()).toEqual('Some random hint');
       expect(wrapper.get('.select-input__no-selection').text()).toEqual('—');
     });
@@ -31,6 +31,14 @@ describe('Select', () => {
       expect(menuOptions[2].text()).toEqual('baz');
     });
 
+    it('does not render the "(Optional)" text in the label if required is true', async () => {
+      await wrapper.setProps({
+        required: true,
+      });
+
+      expect(wrapper.get('.select-input__label').text()).toEqual('My select');
+    });
+
     it('renders a complex array of objects', async () => {
       await wrapper.setProps({
         options: [

components/src/widgets/select/widget.vue

@@ -7,7 +7,10 @@
       v-if="label"
       class="select-input__label"
     >
-      <p>{{ label }}</p>
+      <p>
+        {{ label }}
+        <span v-if="!required">(Optional)</span>
+      </p>
     </div>
     <ui-menu
       v-bind="menuProps"
@@ -133,7 +136,6 @@ 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(() =>
@@ -163,14 +165,6 @@ 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.spec.js

@@ -9,10 +9,10 @@ describe('Textfield widget', () => {
       wrapper = mount(Textfield);
 
       expect(wrapper.get('.text-field').exists()).toBeTruthy();
-      expect(wrapper.get('.text-field label').text()).toEqual('');
       expect(wrapper.get('.text-field__input').exists()).toBeTruthy();
       expect(wrapper.get('.text-field__input').element.value).toEqual('');
       expect(wrapper.get('.text-field__input').attributes('placeholder')).toEqual('');
+      expect(wrapper.find('.text-field label').exists()).toBeFalsy();
       expect(wrapper.find('.text-field__suffix').exists()).toBeFalsy();
       expect(wrapper.find('.text-field_focused').exists()).toBeFalsy();
       expect(wrapper.find('.text-field__input_right').exists()).toBeFalsy();
@@ -29,7 +29,7 @@ describe('Textfield widget', () => {
       });
 
       expect(wrapper.get('.text-field').exists()).toBeTruthy();
-      expect(wrapper.get('.text-field label').text()).toEqual('My text input');
+      expect(wrapper.get('.text-field label').text()).toEqual('My text input (Optional)');
       expect(wrapper.get('.text-field__input').exists()).toBeTruthy();
       expect(wrapper.get('.text-field__input').element.value).toEqual('Foo');
       expect(wrapper.get('.text-field__input').attributes('placeholder')).toEqual(
@@ -49,6 +49,17 @@ describe('Textfield widget', () => {
 
       expect(wrapper.get('.text-field__hint').text()).toEqual('Please fill this input');
     });
+
+    it('does not render the "(Optional)" text in label if required is true', () => {
+      wrapper = mount(Textfield, {
+        props: {
+          label: 'My input',
+          required: true,
+        },
+      });
+
+      expect(wrapper.get('.text-field label').text()).toEqual('My input');
+    });
   });
 
   describe('validation', () => {

components/src/widgets/textfield/widget.vue

@@ -3,7 +3,13 @@
     class="text-field"
     :class="computedClasses"
   >
-    <label for="textfield">{{ label }}</label>
+    <label
+      v-if="label"
+      for="textfield"
+    >
+      {{ label }}
+      <span v-if="!required">(Optional)</span>
+    </label>
     <div
       class="text-field__wrapper"
       @click="setFocus"
@@ -90,7 +96,6 @@ 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);
@@ -131,14 +136,6 @@ 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;