Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Keegan George 2023-06-14 11:25:05 -07:00 committed by GitHub
parent 6084b331ed
commit 9dc63c0755
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 53 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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 }}

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

@ -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

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

@ -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 }}

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

@ -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}}

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

@ -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"

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

@ -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);
}
}

6
spec/system/composer/template_validation_spec.rb
View File

@ -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

6
spec/system/page_objects/components/composer.rb
View File

@ -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?