Skip to content

Replace generic checkbox with GitLab UI styled checkbox in app/components/pajamas/checkbox_component.html.haml

One or more checkboxes in app/components/pajamas/checkbox_component.html.haml are not Pajamas-compliant. See the parent epic for guidance on migration strategies.

How to migrate

  1. Locate the check_box_tag method in the HAML partial. Make note of the arguments being passed to it. See https://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-check_box_tag for details (also summarized below)
    • The first argument is the name (required)
    • The second argument is the value (defaults to 1)
    • The third attribute is if it is checked (defaults to false)
    • The fourth argument is additional options such as data attributes and CSS classes
  2. Use Pajamas::CheckboxTagComponent to render the checkbox. This component also renders the label. See example below:

Before

.form-check
  = check_box_tag 'project[initialize_with_readme]', '1', true, class: 'form-check-input', data: { qa_selector: 'initialize_with_readme_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_readme' }
  = label_tag 'project[initialize_with_readme]', s_('ProjectsNew|Initialize repository with a README'), class: 'form-check-label'
  .form-text.text-muted
    = s_('ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository.')

After

.form-group
  = render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_readme]',
    checked: true,
    checkbox_options: { data: { qa_selector: 'initialize_with_readme_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_readme' } }) do |c|
    = c.label do
      = s_('ProjectsNew|Initialize repository with a README')
    = c.help_text do
      = s_('ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository.')
  1. Ensure everything looks and functions as it did before. Take before and after screenshots and post to MR.
  2. Make sure all specs and QA E2E specs are passing.