Add slot support to form builder radio and checkbox components
What does this MR do and why?
Related to #362013 (closed)
I have noticed when migrating checkboxes to use gitlab_ui_checkbox_component
sometimes the checkbox requires HTML in the label or help text. With the current implementation you have to use sprintf
to create a string and then pass it to the label
or help_text
argument. This MR utilizes ViewComponent slots to make using HTML in the label or help text easier and cleaner. This MR also gives the same treatment to gitlab_ui_radio_component
.
Before
- label = _('Allow projects within this group to use Git LFS')
- help_link = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index'), class: 'gl-ml-2'
= f.gitlab_ui_checkbox_component :lfs_enabled,
'%{label}%{help_link}'.html_safe % { label: label, help_link: help_link },
help_text: _('This setting can be overridden in each project.'),
checkbox_options: { checked: @group.lfs_enabled? }
After
= f.gitlab_ui_checkbox_component :lfs_enabled, checkbox_options: { checked: @group.lfs_enabled? } do |c|
= c.label do
= _('Allow projects within this group to use Git LFS')
= link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index'), class: 'gl-ml-2'
= c.help_text do
= _('This setting can be overridden in each project.')
To demonstrate how this update works I updated an instance of a checkbox and an instance of a radio button. See screenshots below.
Screenshots or screen recordings
Admin edit group
Expected to look the same, has already been migrated to be Pajamas compliant
Before | After |
---|---|
How to set up and validate locally
- Navigate to
/flightjs/Flight/-/settings/ci_cd
. Open theAuto DevOps
panel and check theDefault to Auto DevOps pipeline
checkbox - Navigate to
/admin/groups/Commit451/edit
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.