Add `gitlab_ui_radio_component` custom field to GitLab UI form builder
What does this MR do?
This extends the custom rails form builder (added in !64260 (merged)) by adding a component for radio inputs (named gitlab_ui_radio_component
). Analog to the checkbox component, this reduces the visual clutter of the current form markup and provides a consistent way to write forms.
To demonstrate the new component, the access level radio inputs are being replaced to the new radio component.
Note: While keyboard-selection works, clicking on a radio input doesn't select it. Keyboard-selection was fixed by adding a value
parameter to the label to ensure consistent for
and name
attributes on the radio label and button.
To learn more about the GitLab UI form builder see the docs.
Related to #336682 (closed)
How to use?
- In HAML change
form_for
togitlab_ui_form_for
- Change
f.radio_button
tof.gitlab_ui_radio_component
- Pass the method name as the first argument
- Pass the radio value as the second argument
- Pass the label as the third argument
= gitlab_ui_form_for @user do |f|
.form-group
= f.gitlab_ui_radio_component :access_level, :admin, _('Admin Access Level')
Steps to test
- Go to the Admin Area
- Go to "Overview > Users"
- Click on the edit icon of a user
- Scroll to the Access section
- See the updated Access level radio buttons
Screenshots
View | Before | After |
---|---|---|
Editing yourself | ||
Editing another user |
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.