Migrate old button classes to our Pajamas style GitLab button

Add gl-button to new project button

Add gl-button to send report button

Add gl-button to Buy additional minutes

Add gl-button to project edit and delete button

Add gl-button to Save changes button

Add gl-button to js-filepicker-button

Add more gl-button

Add more gl-button

Add more gl-button

Add more gl-button

Add more gl-button

Add gl-button to Create/Save milestone

Add Changelog

Add gl-button to add list button

Add gl-button to create label button

Add gl-button to View epics list button

Add gl-buttons in bulk update

Apply 1 suggestion(s) to 1 file(s)

Apply 1 suggestion(s) to 1 file(s)

Move to GlButton component

Apply suggestion 51308#note_486380698

Apply 1 suggestion(s) to 1 file(s)

app/views/abuse_reports/new.html.haml

@@ -25,4 +25,4 @@
         = _("Explain the problem. If appropriate, provide a link to the relevant issue or comment.")
 
   .form-actions
-    = f.submit _("Send report"), class: "btn btn-success"
+    = f.submit _("Send report"), class: "gl-button btn btn-success"

app/views/admin/groups/_group.html.haml

@@ -33,5 +33,5 @@
       = visibility_level_icon(group.visibility_level)
 
   .controls.gl-flex-shrink-0.gl-ml-5
-    = link_to _('Edit'), admin_group_edit_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
+    = link_to _('Edit'), admin_group_edit_path(group), id: "edit_#{dom_id(group)}", class: 'gl-button btn'
     = link_to _('Delete'), [:admin, group], data: { confirm: _("Are you sure you want to remove %{group_name}?") % { group_name: group.name } }, method: :delete, class: 'gl-button btn btn-danger'

app/views/admin/projects/_projects.html.haml

@@ -4,8 +4,8 @@
       - @projects.each_with_index do |project|
         %li.project-row{ class: ('no-description' if project.description.blank?) }
           .controls
-            = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn"
-            %button.delete-project-button.btn.btn-danger{ data: { delete_project_url: admin_project_path(project), project_name: project.name } }
+            = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "gl-button btn"
+            %button.delete-project-button.gl-button.btn.btn-danger{ data: { delete_project_url: admin_project_path(project), project_name: project.name } }
               = s_('AdminProjects|Delete')
 
           .stats

app/views/profiles/show.html.haml

@@ -32,7 +32,7 @@
           = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
       .gl-mt-2.gl-mb-3
-        %button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
+        %button.gl-button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen")
         = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
       .form-text.text-muted= s_("Profiles|The maximum file size allowed is 200KB.")

app/views/projects/edit.html.haml

@@ -25,7 +25,7 @@
       .js-project-permissions-form
       - if show_visibility_confirm_modal?(@project)
         = render "visibility_modal"
-      = f.submit _('Save changes'), class: "btn btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
+      = f.submit _('Save changes'), class: "gl-button gl-button btn btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
 
 %section.qa-merge-request-settings.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
   .settings-header
@@ -39,7 +39,7 @@
     = form_for @project, remote: true, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
-      = f.submit _('Save changes'), class: "btn btn-succes qa-save-merge-request-changes rspec-save-merge-request-changes"
+      = f.submit _('Save changes'), class: "gl-button btn btn-succes qa-save-merge-request-changes rspec-save-merge-request-changes"
 
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
@@ -70,7 +70,7 @@
       %h4= _('Housekeeping')
       %p= _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
       = link_to _('Run housekeeping'), housekeeping_project_path(@project),
-        method: :post, class: "btn btn-default"
+        method: :post, class: "gl-button btn btn-default"
 
     = render 'export', project: @project
 
@@ -92,7 +92,7 @@
             %li= _('You will need to update your local repositories to point to the new location.')
             - if @project.deployment_platform.present?
               %li= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
-        = f.submit _('Change path'), class: "btn btn-warning qa-change-path-button"
+        = f.submit _('Change path'), class: "gl-button btn btn-warning qa-change-path-button"
 
     = render 'transfer', project: @project
 

app/views/projects/milestones/_form.html.haml

@@ -21,8 +21,8 @@
 
   .form-actions
     - if @milestone.new_record?
-      = f.submit _('Create milestone'), class: 'btn-success btn', data: { qa_selector: 'create_milestone_button' }
+      = f.submit _('Create milestone'), class: 'gl-button btn-success btn', data: { qa_selector: 'create_milestone_button' }
       = link_to _('Cancel'), project_milestones_path(@project), class: 'gl-button btn btn-cancel'
     - else
-      = f.submit _('Save changes'), class: 'btn-success btn'
+      = f.submit _('Save changes'), class: 'gl-button btn-success btn'
       = link_to _('Cancel'), project_milestone_path(@project, @milestone), class: 'gl-button btn btn-cancel'

app/views/projects/services/prometheus/_top.html.haml

@@ -7,4 +7,4 @@
       .gl-alert-body
         = s_('AlertSettings|You can now set up alert endpoints for manually configured Prometheus instances in the Alerts section on the Operations settings page. Alert endpoint fields on this page have been deprecated.')
       .gl-alert-actions
-        = link_to _('Visit settings page'), project_settings_operations_path(@project, anchor: 'js-alert-management-settings'), class: 'btn gl-alert-action btn-info gl-button'
+        = link_to _('Visit settings page'), project_settings_operations_path(@project, anchor: 'js-alert-management-settings'), class: 'gl-button btn gl-alert-action btn-info'

app/views/projects/settings/_archive.html.haml

@@ -10,9 +10,9 @@
     %p= _("Unarchiving the project will restore people's ability to make changes to it. The repository can be committed to, and issues, comments, and other entities can be created. %{strong_start}Once active, this project shows up in the search and on the dashboard.%{strong_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
     = link_to _('Unarchive project'), unarchive_project_path(@project),
         data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' },
-        method: :post, class: "btn btn-success"
+        method: :post, class: "gl-button btn btn-success"
   - else
     %p= _("Archiving the project will make it entirely read only. It is hidden from the dashboard and doesn't show up in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
     = link_to _('Archive project'), archive_project_path(@project),
       data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link' },
-      method: :post, class: "btn btn-warning"
+      method: :post, class: "gl-button btn btn-warning"

app/views/projects/settings/_general.html.haml

@@ -40,4 +40,4 @@
       %hr
       = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
 
-  = f.submit _('Save changes'), class: "btn btn-success mt-4 qa-save-naming-topics-avatar-button"
+  = f.submit _('Save changes'), class: "gl-button btn btn-success gl-mt-6 qa-save-naming-topics-avatar-button"

app/views/projects/settings/integrations/show.html.haml

@@ -10,7 +10,7 @@
     .gl-alert-body
       = _('Webhooks have moved. They can now be found under the Settings menu.')
     .gl-alert-actions
-      = link_to _('Go to Webhooks'), project_hooks_path(@project), class: 'btn gl-alert-action btn-info new-gl-button'
+      = link_to _('Go to Webhooks'), project_hooks_path(@project), class: 'gl-button btn gl-alert-action btn-info'
 
 %h4= _('Integrations')
 - integrations_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('user/project/integrations/overview') }

app/views/shared/_file_picker_button.html.haml

 - classes = local_assigns.fetch(:classes, '')
 
 %span.js-filepicker
-  %button.btn.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
+  %button.gl-button.btn.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
   %span.file_name.js-filepicker-filename= _("No file chosen")
   = f.file_field field, class: "js-filepicker-input hidden"
   - if help_text.present?

app/views/shared/_label.html.haml

@@ -46,7 +46,7 @@
           %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span= _('Unsubscribe')
           .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
-            %button.label-subscribe-button.btn.btn-default{ data: { toggle: 'dropdown' } }
+            %button.gl-button.label-subscribe-button.btn.btn-default{ data: { toggle: 'dropdown' } }
               %span
                 = _('Subscribe')
                 = sprite_icon('chevron-down')
@@ -59,7 +59,7 @@
                   %button.js-subscribe-button.js-group-level.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
                     %span= _('Subscribe at group level')
         - else
-          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
+          %button.gl-button.js-subscribe-button.label-subscribe-button.btn.btn-default{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span= label_subscription_toggle_button_text(label, @project)
 
 = render 'shared/delete_label_modal', label: label

app/views/shared/empty_states/_profile_tabs.html.haml

@@ -12,9 +12,9 @@
           %p= current_user_empty_message_description
 
         - if secondary_button_link.present?
-          = link_to secondary_button_label, secondary_button_link, class: 'btn btn-success btn-inverted'
+          = link_to secondary_button_label, secondary_button_link, class: 'gl-button btn btn-success btn-inverted'
 
         - if primary_button_link.present?
-          = link_to primary_button_label, primary_button_link, class: 'btn btn-success'
+          = link_to primary_button_label, primary_button_link, class: 'gl-button btn btn-success'
       - else
         %h5= visitor_empty_message

app/views/shared/issuable/_board_create_list_dropdown.html.haml

 .dropdown.gl-ml-3#js-add-list
-  %button.btn.btn-success.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }
+  %button.gl-button.btn.btn-success.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }
     Add list
   .dropdown-menu.dropdown-extended-height.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.js-tab-container-labels
     = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }

app/views/shared/issuable/_bulk_update_sidebar.html.haml

@@ -7,8 +7,8 @@
     = form_tag [:bulk_update, @project, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header
         .filter-item.inline.update-issues-btn.float-left
-          = button_tag _('Update all'), class: "btn update-selected-issues btn-info", disabled: true
-        = button_tag _('Cancel'), class: "btn btn-default js-bulk-update-menu-hide float-right"
+          = button_tag _('Update all'), class: "gl-button btn update-selected-issues btn-info", disabled: true
+        = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right"
       - if params[:state] != 'merged'
         .block
           .title

app/views/shared/issuable/_label_page_create.html.haml

@@ -19,7 +19,7 @@
           %input.js-add-list{ type: "checkbox", name: "add_list", checked: add_list }
           %span= _('Add list')
     .clearfix
-      %button.btn.btn-primary.float-left.js-new-label-btn{ type: "button" }
+      %button.gl-button.btn.btn-success.float-left.js-new-label-btn{ type: "button" }
         = _('Create')
-      %button.btn.btn-default.float-right.js-cancel-label-btn{ type: "button" }
+      %button.gl-button.btn.btn-default.float-right.js-cancel-label-btn{ type: "button" }
         = _('Cancel')

changelogs/unreleased/yo-move-to-gl-button.yml

+---
+title: Migrate old button classes to our Pajamas style GitLab button in multiple areas
+merge_request: 51826
+author: Yogi (@yo)
+type: other

ee/app/assets/javascripts/roadmap/components/epics_list_empty.vue

 <script>
 /* eslint-disable vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import { dateInWords } from '~/lib/utils/datetime_utility';
 
@@ -9,6 +10,9 @@ import { emptyStateDefault, emptyStateWithFilters } from '../constants';
 import initEpicCreate from '../../epic/epic_bundle';
 
 export default {
+  components: {
+    GlButton,
+  },
   mixins: [CommonMixin],
   props: {
     presetType: {
@@ -139,9 +143,9 @@ export default {
             id="epic-create-root"
             :data-endpoint="newEpicEndpoint"
           ></div>
-          <a :title="__('List')" :href="newEpicEndpoint" class="btn btn-default">
-            <span>{{ s__('View epics list') }}</span>
-          </a>
+          <gl-button :title="__('List')" :href="newEpicEndpoint">{{
+            s__('View epics list')
+          }}</gl-button>
         </div>
       </div>
     </div>

ee/app/views/namespaces/pipelines_quota/_list.haml

@@ -9,7 +9,7 @@
         = link_to s_('UsageQuota|Buy additional minutes'),
         EE::SUBSCRIPTIONS_MORE_MINUTES_URL,
         target: '_blank',
-        class: 'btn btn-success float-right',
+        class: 'gl-button btn btn-success float-right',
         data: { track_event: 'click_buy_ci_minutes', track_label: namespace.actual_plan_name, track_property: 'pipeline_quota_page' }
 
   .row

ee/app/views/shared/issuable/_group_bulk_update_sidebar.html.haml

@@ -8,8 +8,8 @@
     = form_tag [:bulk_update, group, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header
         .filter-item.inline.update-issues-btn.float-left
-          = button_tag _('Update all'), class: "btn update-selected-issues btn-info", disabled: true
-        = button_tag _('Cancel'), class: "btn btn-default js-bulk-update-menu-hide float-right"
+          = button_tag _('Update all'), class: "gl-button btn update-selected-issues btn-info", disabled: true
+        = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right"
       - if epic_bulk_edit_flag
         .block
           .title