[Settings > Merge requests] Use Pajamas components for description template form input
Problem to solve
The text-area
field for "Default description template for merge requests" does not have the necessary gl-form-input
class, and also doesn't have an accessible label.
Screenshots
Proposal
Make textarea use gl-form-input
and ensure it has an accessible label.
Implementation guide
Add the gl-form-input
class and make the label use the actual <label>
element:
diff --git a/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml b/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml
index 9331e2b7376c..38341241f09b 100644
--- a/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml
+++ b/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml
@@ -22,13 +22,13 @@
- if @project.feature_available?(:issuable_default_templates)
.form-group
- %b= _('Default description template for merge requests')
+ %label.gl-mb-0{ for: 'merge_requests_template' }= _('Default description template for merge requests')
%p.gl-text-subtle
= s_('ProjectSettings|Used for every new merge request.')
- link = link_to('', help_page_path('user/project/description_templates.md', anchor: 'create-a-merge-request-template'), target: '_blank', rel: 'noopener noreferrer')
= safe_format(s_('ProjectSettings|%{link_start}What are description templates?%{link_end}'), tag_pair(link, :link_start, :link_end))
- = form.text_area :merge_requests_template, class: "form-control", rows: 3, data: { testid: 'default-merge-request-template-field' }
+ = form.text_area :merge_requests_template, id: 'merge_requests_template', class: "form-control gl-form-input", rows: 3, data: { testid: 'default-merge-request-template-field' }
.gl-text-subtle
- link = link_to('', help_page_path('user/markdown.md'), target: '_blank', rel: 'noopener noreferrer')
Edited by Scott de Jonge