Now that we have a ViewComponent for buttons, and gitlab#364777 done, we can migrate all form submits in our Haml to use the component, instead of repeating the same CSS classes on every `= form.submit`. The new behavior of our `GitlabUiFormBuilder#submit` needs to be enabled per instance with a `pajamas_button: true` option. This way, we can do a few buttons at a time, removing the now redundant CSS classes and making sure during review that nothing breaks. As soon as all buttons are migrated, we can make it the default (only) behavior and drop the `, pajamas_button: true` from everywhere with a regexp search in a single final MR. ### Help us keep the noise to a minimum 🤫 This epic contains 150 issues. Each is about an individual button that we want to fix. But we don't want to have 150 one-liner Merge Requests, as each MR triggers a CI pipeline and some overhead for both the author and reviewers. **This is why we ask you to fix more than one issue per MR. We think :five: is a good number.** 1. Before you start work any of these issues, assign yourself to the 5 issues you want to fix. This way we avoid multiple people duplicating work for the same issue. 2. Fix all 5 issues in the same branch. 3. Create a single Merge Request from your branch. In its description, link to all 5 issues it fixes. ### Example migrations #### Important note/ Example 0 The new behavior is only available if the form uses our custom form builder, not the Rails default. So if the submit button is part of a `= form_for ...`, then change that to `= gitlab_ui_form_for` first. ```diff - = form_for @application_setting, url: some_path do |f| + = gitlab_ui_form_for @application_setting, url: some_path do |f| ``` #### Example 1 Remove the CSS classes that styled it as a button, and add the `pajamas_button: true` option instead. ```diff - = f.submit _('Save changes'), class: 'gl-button btn-confirm' + = f.submit _('Save changes'), pajamas_button: true ``` #### Example 2 Leave any other attributes (ids, data, disabled, ...) untouched. ```diff - = f.submit _('Save changes'), class: 'gl-button btn btn-confirm gl-mt-5', data: { qa_selector: 'save_changes_button' }, disabled: true + = f.submit _('Save changes'), class: 'gl-mt-5', data: { qa_selector: 'save_changes_button' }, disabled: true, pajamas_button: true ```