Merge branch 'gl-button-shared-1' into 'master'

Apply GitLab UI button styles to buttons in app/views/shared directory

See merge request gitlab-org/gitlab!53474

app/views/shared/_clone_panel.html.haml

-.git-clone-holder.js-git-clone-holder.input-group
+.js-git-clone-holder.input-group.btn-group
   .input-group-prepend
     - if allowed_protocols_present?
       .input-group-text.clone-dropdown-btn.btn
         %span.js-clone-dropdown-label
           = enabled_protocol_button(container, enabled_protocol)
     - else
-      %a#clone-dropdown.input-group-text.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+      %a#clone-dropdown.input-group-text.btn.gl-button.btn-default.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
         %span.js-clone-dropdown-label
           = default_clone_protocol.upcase
         = sprite_icon('chevron-down')
@@ -16,7 +16,7 @@
           = http_clone_button(container)
         = render_if_exists 'shared/kerberos_clone_button', container: container
 
-  = text_field_tag :clone_url, default_url_to_repo(container), class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }
+  = text_field_tag :clone_url, default_url_to_repo(container), class: "js-select-on-focus btn gl-button", readonly: true, aria: { label: _('Repository clone URL') }
   .input-group-append
-    = clipboard_button(target: '#clone_url', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
+    = clipboard_button(target: '#clone_url', title: _("Copy URL"), class: "input-group-text gl-button btn-default btn-clipboard")
 

app/views/shared/_confirm_fork_modal.html.haml

@@ -8,5 +8,5 @@
       .modal-body.p-3
         %p= _("You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.") % { tag_start: '', tag_end: ''}
       .modal-footer
-        = link_to _('Cancel'), '#', class: "gl-button btn btn-default btn-cancel", "data-dismiss" => "modal"
-        = link_to _('Fork project'), fork_path, class: 'gl-button btn btn-confirm', data: { qa_selector: 'fork_project_button' }, method: :post
+        = link_to _('Cancel'), '#', class: "btn gl-button btn-default", "data-dismiss" => "modal"
+        = link_to _('Fork project'), fork_path, class: 'btn gl-button btn-confirm', data: { qa_selector: 'fork_project_button' }, method: :post

app/views/shared/_delete_label_modal.html.haml

@@ -11,7 +11,7 @@
           = html_escape(_('%{label_name} %{span_open}will be permanently deleted from %{subject_name}. This cannot be undone.%{span_close}')) % { label_name: tag.strong(label.name), subject_name: label.subject_name, span_open: '<span>'.html_safe, span_close: '</span>'.html_safe }
 
       .modal-footer
-        %a{ href: '#', data: { dismiss: 'modal' }, class: 'btn btn-default' }= _('Cancel')
+        %a{ href: '#', data: { dismiss: 'modal' }, class: 'btn gl-button btn-default' }= _('Cancel')
 
         = link_to _('Delete label'),
           label.destroy_path,

app/views/shared/_flash_user_callout.html.haml

@@ -6,6 +6,6 @@
   %div{ class: "flash-#{flash_type}" }
     %div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" }
       %span= message
-      %button.btn.btn-default.close.js-close{ type: 'button',
+      %button.btn.gl-button.btn-default.close.js-close{ type: 'button',
         'aria-label' => _('Dismiss') }
         = sprite_icon('close', css_class: 'dismiss-icon')

app/views/shared/_label.html.haml

@@ -12,18 +12,18 @@
     - if can?(current_user, :admin_label, @project)
       %li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
         dom_id: dom_id(label), type: label.type } }
-        %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') }
+        %button.add-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip.gl-ml-3{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') }
           = sprite_icon('star-o')
-        %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') }
+        %button.remove-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip.gl-ml-3{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') }
           = sprite_icon('star')
     - if can?(current_user, :admin_label, label)
       %li.inline
-        = link_to label.edit_path, class: 'btn btn-transparent label-action edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
+        = link_to label.edit_path, class: 'btn gl-button btn-default-tertiary btn-sm edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
           = sprite_icon('pencil')
     - if can?(current_user, :admin_label, label)
       %li.inline
         .dropdown
-          %button{ type: 'button', class: 'btn btn-transparent js-label-options-dropdown label-action', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') }
+          %button{ type: 'button', class: 'btn gl-button btn-default-tertiary btn-sm js-label-options-dropdown', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') }
             = sprite_icon('ellipsis_v')
           .dropdown-menu.dropdown-open-left
             %ul

app/views/shared/_mobile_clone_panel.html.haml

@@ -3,8 +3,8 @@
 - http_copy_label = _('Copy %{http_label} clone URL') % { http_label: gitlab_config.protocol.upcase }
 
 .btn-group.mobile-git-clone.js-mobile-git-clone.btn-block
-  = clipboard_button(button_text: default_clone_label, text: default_url_to_repo(project), hide_button_icon: true, class: "gl-button btn btn-confirm flex-fill input-group-text clone-dropdown-btn js-clone-dropdown-label")
-  %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.js-dropdown-toggle.flex-grow-0.d-flex-center.w-auto.ml-0{ type: "button", data: { toggle: "dropdown" } }
+  = clipboard_button(button_text: default_clone_label, text: default_url_to_repo(project), hide_button_icon: true, class: "gl-button btn-confirm flex-fill bold justify-content-center input-group-text clone-dropdown-btn js-clone-dropdown-label")
+  %button.btn.gl-button.btn-confirm.dropdown-toggle.js-dropdown-toggle.flex-grow-0.d-flex-center.w-auto.ml-0{ type: "button", data: { toggle: "dropdown" } }
     = sprite_icon("chevron-down", css_class: "dropdown-btn-icon icon")
   %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right.clone-options-dropdown{ data: { dropdown: true } }
     - if ssh_enabled?

changelogs/unreleased/gl-button-shared-1.yml

+---
+title: Apply GitLab UI button styles to buttons in app/views/shared directory
+merge_request: 53474
+author: Yogi (@yo)
+type: other

spec/features/groups/labels/index_spec.rb

@@ -24,6 +24,6 @@ RSpec.describe 'Group labels' do
   end
 
   it 'shows an edit label button', :js do
-    expect(page).to have_selector('.label-action.edit')
+    expect(page).to have_selector('.edit')
   end
 end

spec/support/shared_examples/features/wiki/user_git_access_wiki_page_shared_examples.rb

@@ -13,7 +13,7 @@ RSpec.shared_examples 'User views Git access wiki page' do
 
     expect(page).to have_text("Clone repository #{wiki.full_path}")
 
-    within('.git-clone-holder') do
+    within('.js-git-clone-holder') do
       expect(page).to have_css('#clone-dropdown', text: 'HTTP')
       expect(page).to have_field('clone_url', with: wiki.http_url_to_repo)