UX: Add required indicator to fields with required validation (#22096)

app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs

@@ -7,5 +7,8 @@
       required={{if @validations.required "required" ""}}
     />
     {{@attributes.label}}
+    {{#if @validations.required}}
+      {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+    {{/if}}
   </label>
 </div>

app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs

@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="dropdown">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
 
   {{! TODO(@keegan): Update implementation to use <ComboBox/> instead }}

app/assets/javascripts/discourse/app/components/form-template-field/input.hbs

@@ -1,7 +1,12 @@
 <div class="control-group form-template-field" data-field-type="input">
-  {{! TODO(@keegan): Make label required }}
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
+
   {{/if}}
 
   <Input

app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs

@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="multi-select">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
 
   {{! TODO(@keegan): Update implementation to use <MultiSelect/> instead }}

app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs

@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="textarea">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
   <Textarea
     name={{@attributes.label}}

app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs

@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="upload">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
   <input
     type="file"

app/assets/stylesheets/common/components/form-template-field.scss

@@ -13,4 +13,11 @@
     padding: 0.5em 0.65em;
     font-size: var(--font-0);
   }
+  // END of what should be removed after updating dropdown/multi-select to use select-kit
+
+  &__required-indicator {
+    color: var(--danger);
+    margin-left: 0.5em;
+    font-size: var(--font-down-4);
+  }
 }

spec/system/composer/template_validation_spec.rb

@@ -68,6 +68,12 @@ describe "Composer Form Template Validations", type: :system, js: true do
     sign_in user
   end
 
+  it "shows an asterisk on the label of the required fields" do
+    category_page.visit(category_with_template)
+    category_page.new_topic_button.click
+    expect(composer).to have_form_template_field_required_indicator("input")
+  end
+
   it "shows an error when a required input is not filled in" do
     category_page.visit(category_with_template)
     category_page.new_topic_button.click

spec/system/page_objects/components/composer.rb

@@ -142,6 +142,12 @@ module PageObjects
         page.has_css?(".form-template-field[data-field-type='#{field}']")
       end
 
+      def has_form_template_field_required_indicator?(field)
+        page.has_css?(
+          ".form-template-field[data-field-type='#{field}'] .form-template-field__required-indicator",
+        )
+      end
+
       FORM_TEMPLATE_CHOOSER_SELECTOR = ".composer-select-form-template"
 
       def has_no_form_template_chooser?