Replace generic checkbox with GitLab UI styled checkbox in app/views/groups/_create_chat_team.html.haml
The HAML template app/views/groups/_create_chat_team.html.haml
contains a reference to the f.check_box
form helper method which generates a vanilla <input type="checkbox" />
element. We want to migrate these to the styled checkboxes defined in the Pajamas design system.
There are rails helpers for radios and checkboxes which will generate these styled checkboxes and radio buttons for you. You can read their documentation here.
How to migrate
Migrating f.check_box
to f.gitlab_ui_checkbox_component
can be done with the following steps:
- Change
form_for
togitlab_ui_form_for
. Sometimes when dealing with small partials this call toform_for
instance is actually found in a parent template so you may need to dig around for it. - Change
f.check_box
tof.gitlab_ui_checkbox_component
. - Remove
f.label
and instead pass the label as the second argument inf.gitlab_ui_checkbox_component
. - Optionally remove any secondary text for this checkbox and pass it as the
help_text
argument inf.gitlab_ui_checkbox_component
.
Notes:
- If the form helper method for the checkbox you are attempting to migrate is using a
bootstrap_form_for
block (rather thanform_for
orgitlab_ui_form_for
) this is a special case, and we need to create an issue to migrate away from thebootstrap_form
gem. Please ping@mikegreiling
in this issue. - Issues are being created for each HAML partial in which
f.check_box
is found. There may be other checkboxes in the same form or page that make sense to migrate within a single merge request. If you work on these, ensure you assign yourself in the issues associated with those other HAML partials as well so that you do not duplicate someone else's work. - If this checkbox requires any special QA data attributes or classes, these can be passed in the
checkbox_options
argument.
Example Migration:
-
Before:
= form_for @group do |f| .form-group.gl-mb-3 .gl-form-checkbox.custom-control.custom-checkbox = f.check_box :prevent_sharing_groups_outside_hierarchy, disabled: !can_change_prevent_sharing_groups_outside_hierarchy?(@group), class: 'custom-control-input' = f.label :prevent_sharing_groups_outside_hierarchy, class: 'custom-control-label' do %span = s_('GroupSettings|Prevent members from sending invitations to groups outside of %{group} and its subgroups.').html_safe % { group: link_to_group(@group) } %p.help-text= prevent_sharing_groups_outside_hierarchy_help_text(@group)
-
After:
= gitlab_ui_form_for @group do |f| .form-group.gl-mb-3 = f.gitlab_ui_checkbox_component :prevent_sharing_groups_outside_hierarchy, s_('GroupSettings|Prevent members from sending invitations to groups outside of %{group} and its subgroups.').html_safe % { group: link_to_group(@group) }, help_text: prevent_sharing_groups_outside_hierarchy_help_text(@group), checkbox_options: { disabled: !can_change_prevent_sharing_groups_outside_hierarchy?(@group) }
You can also look at this commit for another example migration.