Skip to content

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
Screen_Shot_2022-05-10_at_1.39.55_PM Screen_Shot_2022-05-10_at_1.38.54_PM

How to set up and validate locally

  • Navigate to /flightjs/Flight/-/settings/ci_cd. Open the Auto DevOps panel and check the Default 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.

Edited by Peter Hegman

Merge request reports