Skip to content

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?

  1. In HAML change form_for to gitlab_ui_form_for
  2. Change f.radio_button to f.gitlab_ui_radio_component
  3. Pass the method name as the first argument
  4. Pass the radio value as the second argument
  5. 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

  1. Go to the Admin Area
  2. Go to "Overview > Users"
  3. Click on the edit icon of a user
  4. Scroll to the Access section
  5. See the updated Access level radio buttons

Screenshots

View Before After
Editing yourself Screen_Shot_2021-09-21_at_7.52.06_AM own-user
Editing another user Screen_Shot_2021-09-21_at_7.53.17_AM Screen_Shot_2021-09-21_at_7.47.51_AM

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