HAML

HAML is the Ruby on Rails template language that GitLab uses.

GitLab UI form builder

GitLab UI is a Vue component library that conforms to the Pajamas design system. Most of these components rely on JavaScript and therefore can only be used in Vue.

However, some of the simpler components (checkboxes, radio buttons, form inputs) can be used in HAML by applying the correct CSS classes to the elements. A custom Ruby on Rails form builder exists to help use GitLab UI components in HAML.

Use the GitLab UI form builder

To use the GitLab UI form builder:

Change form_for to gitlab_ui_form_for.
Change f.check_box to f.gitlab_ui_checkbox_component.
Remove f.label and instead pass the label as the second argument in f.gitlab_ui_checkbox_component.

For example:

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) }

Available components

When using the GitLab UI form builder, the following components are available for use in HAML.

NOTE: Currently only the listed components are available but more components are planned.

gitlab_ui_checkbox_component

GitLab UI Docs

Argument	Description	Type	Required (default value)
`method`	Attribute on the object passed to `gitlab_ui_form_for`.	`Symbol`	`true`
`label`	Checkbox label.	`String`	`true`
`help_text`	Help text displayed below the checkbox.	`String`	`false` (`nil`)
`checkbox_options`	Options that are passed to Rails `check_box` method.	`Hash`	`false` (`{}`)
`checked_value`	Value when checkbox is checked.	`String`	`false` (`'1'`)
`unchecked_value`	Value when checkbox is unchecked.	`String`	`false` (`'0'`)
`label_options`	Options that are passed to Rails `label` method.	`Hash`	`false` (`{}`)

gitlab_ui_radio_component

GitLab UI Docs

Argument	Description	Type	Required (default value)
`method`	Attribute on the object passed to `gitlab_ui_form_for`.	`Symbol`	`true`
`value`	The value of the radio tag.	`Symbol`	`true`
`label`	Radio label.	`String`	`true`
`help_text`	Help text displayed below the radio button.	`String`	`false` (`nil`)
`radio_options`	Options that are passed to Rails `radio_button` method.	`Hash`	`false` (`{}`)
`label_options`	Options that are passed to Rails `label` method.	`Hash`	`false` (`{}`)