Update button variants alignment and spacing

Update button variant and alignment in the
Projects::BranchesController#index and update tests to
follow current guides.

Changelog: added

app/assets/javascripts/branches/components/sort_dropdown.vue

@@ -62,17 +62,18 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-pr-4">
+  <div class="gl-display-flex">
     <gl-search-box-by-click
       v-model="searchTerm"
       :placeholder="$options.i18n.searchPlaceholder"
-      class="gl-pr-4"
+      class="gl-mr-3"
       data-testid="branch-search"
       @submit="visitUrlFromOption(selectedKey)"
     />
     <gl-dropdown
       v-if="shouldShowDropdown"
       :text="selectedSortMethodName"
+      class="gl-mr-3"
       data-testid="branches-dropdown"
     >
       <gl-dropdown-item

app/assets/stylesheets/framework/lists.scss

@@ -135,7 +135,7 @@ ul.content-list {
       float: right;
       > .control-text {
-        margin-right: $gl-padding-top;
+        margin-right: $grid-size;
         line-height: $list-text-height;
         &:last-child {
@@ -148,8 +148,6 @@ ul.content-list {
       > .dropdown.inline {
         margin-right: $grid-size;
         display: inline-block;
-        margin-top: 3px;
-        margin-bottom: 4px;
         &.btn-ldap-override {
           @include media-breakpoint-up(sm) {

app/views/projects/branches/_branch.html.haml

@@ -46,35 +46,37 @@
         title: s_('Branches|Compare') do
         = s_('Branches|Compare')
-    = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name]
+    = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], class: 'gl-vertical-align-top'
     - if can?(current_user, :push_code, @project)
       - if branch.name == @project.repository.root_ref
         - delete_default_branch_tooltip = s_('Branches|The default branch cannot be deleted')
-        %span.has-tooltip{ title: delete_default_branch_tooltip }
-          %button{ class: "gl-button btn btn-danger disabled", disabled: true, 'aria-label' => delete_default_branch_tooltip }
-            = sprite_icon("remove")
+        %span.gl-display-inline-block.has-tooltip{ title: delete_default_branch_tooltip }
+          %button{ class: 'gl-button btn btn-default btn-icon disabled', disabled: true, 'aria-label' => delete_default_branch_tooltip }
+            = sprite_icon('remove', css_class: 'gl-button-icon gl-icon')
       - elsif protected_branch?(@project, branch)
         - if can?(current_user, :push_to_delete_protected_branch, @project)
-          %button{ class: "gl-button btn btn-danger has-tooltip",
-            title: s_('Branches|Delete protected branch'),
-            data: { toggle: "modal",
-              target: "#modal-delete-branch",
+          - delete_protected_branch_tooltip = s_('Branches|Delete protected branch')
+          %button{ class: 'gl-button btn btn-default btn-icon has-tooltip',
+            title: delete_protected_branch_tooltip,
+            'aria-label' => delete_protected_branch_tooltip,
+            data: { toggle: 'modal',
+              target: '#modal-delete-branch',
               delete_path: project_branch_path(@project, branch.name),
               branch_name: branch.name,
-              is_merged: ("true" if merged) } }
-            = sprite_icon("remove")
+              is_merged: ('true' if merged) } }
+            = sprite_icon('remove', css_class: 'gl-button-icon gl-icon')
         - else
-          - delete_protected_branch_tooltip = s_('Branches|Only a project maintainer or owner can delete a protected branch')
-          %span.has-tooltip{ title: delete_protected_branch_tooltip }
-            %button{ class: "gl-button btn btn-danger disabled", disabled: true, 'aria-label' => delete_protected_branch_tooltip }
-              = sprite_icon("remove")
+          - delete_protected_branch_disabled_tooltip = s_('Branches|Only a project maintainer or owner can delete a protected branch')
+          %span.has-tooltip{ title: delete_protected_branch_disabled_tooltip }
+            %button{ class: 'gl-button btn btn-default btn-icon disabled', disabled: true, 'aria-label' => delete_protected_branch_disabled_tooltip, data: { testid: 'remove-protected-branch' } }
+              = sprite_icon('remove', css_class: 'gl-button-icon gl-icon')
       - else
         = link_to project_branch_path(@project, branch.name),
-          class: "gl-button btn btn-danger js-remove-row qa-remove-btn js-ajax-loading-spinner has-tooltip",
+          class: 'gl-button btn btn-default btn-icon js-remove-row qa-remove-btn js-ajax-loading-spinner has-tooltip',
           title: s_('Branches|Delete branch'),
           method: :delete,
           data: { confirm: s_("Branches|Deleting the '%{branch_name}' branch cannot be undone. Are you sure?") % { branch_name: branch.name } },
           remote: true,
           'aria-label' => s_('Branches|Delete branch') do
-          = sprite_icon("remove")
+          = sprite_icon('remove', css_class: 'gl-button-icon gl-icon')

app/views/projects/buttons/_download.html.haml

@@ -2,11 +2,11 @@
 - if !project.empty_repo? && can?(current_user, :download_code, project)
   - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
-  .project-action-button.dropdown.inline>
-    %button.gl-button.btn.btn-default.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
-      = sprite_icon('download', css_class: 'gl-icon')
+  .project-action-button.dropdown.gl-new-dropdown.inline>
+    %button.gl-button.btn.btn-default.dropdown-toggle.gl-dropdown-toggle.dropdown-icon-only.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }
+      = sprite_icon('download', css_class: 'gl-icon dropdown-icon')
       %span.sr-only=  _('Select Archive Format')
-      = sprite_icon('chevron-down', css_class: 'gl-icon')
+      = sprite_icon('chevron-down', css_class: 'gl-icon dropdown-chevron')
     .dropdown-menu.dropdown-menu-right{ role: 'menu' }
       %section
         %h5.m-0.dropdown-bold-header= _('Download source code')

spec/features/projects/branches/user_deletes_branch_spec.rb

@@ -21,7 +21,7 @@
     branch_search.native.send_keys(:enter)
     page.within(".js-branch-improve\\/awesome") do
-      accept_alert { find(".btn-danger").click }
+      accept_alert { click_link(title: 'Delete branch') }
     end
     wait_for_requests

spec/features/projects/branches_spec.rb

@@ -99,11 +99,13 @@
     end
     describe 'Delete unprotected branch on Overview' do
-      it 'removes branch after confirmation', :js, quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/239019' do
+      it 'removes branch after confirmation', :js do
         visit project_branches_filtered_path(project, state: 'all')
         expect(all('.all-branches').last).to have_selector('li', count: 20)
-        accept_confirm { first('.js-branch-item .btn-danger').click }
+        accept_confirm do
+          within('.js-branch-item', match: :first) { click_link(title: 'Delete branch') }
+        end
         expect(all('.all-branches').last).to have_selector('li', count: 19)
       end
@@ -172,7 +174,9 @@
         expect(page).to have_content('fix')
         expect(find('.all-branches')).to have_selector('li', count: 1)
-        accept_confirm { find('.js-branch-fix .btn-danger').click }
+        accept_confirm do
+          within('.js-branch-fix') { click_link(title: 'Delete branch') }
+        end
         expect(page).not_to have_content('fix')
         expect(find('.all-branches')).to have_selector('li', count: 0)

spec/features/projects/environments/environment_spec.rb

@@ -333,7 +333,7 @@ def auto_stop_button_selector
       visit project_branches_filtered_path(project, state: 'all', search: 'feature')
       remove_branch_with_hooks(project, user, 'feature') do
-        page.within('.js-branch-feature') { find('a.btn-danger').click }
+        within('.js-branch-feature') { click_link(title: 'Delete branch') }
       end
       visit_environment(environment)

spec/features/protected_branches_spec.rb

@@ -21,13 +21,13 @@
         expect(ProtectedBranch.count).to eq(1)
       end
-      it 'does not allow developer to removes protected branch' do
+      it 'does not allow developer to remove protected branch' do
         visit project_branches_path(project)
         find('input[data-testid="branch-search"]').set('fix')
         find('input[data-testid="branch-search"]').native.send_keys(:enter)
-        expect(page).to have_css('.btn-danger.disabled')
+        expect(page).to have_selector('button[data-testid="remove-protected-branch"][disabled]')
       end
     end
   end