Update button styles and behavior

Changelog: added

app/assets/stylesheets/framework/lists.scss

@@ -146,7 +146,7 @@ ul.content-list {
       > .btn,
       > .btn-group,
       > .dropdown.inline {
-        margin-right: $gl-padding-top;
+        margin-right: $grid-size;
         display: inline-block;
         margin-top: 3px;
         margin-bottom: 4px;

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -182,6 +182,11 @@
         width: 100%;
       }
 
+      /* This resets the width of the control so that the search button doesn't wrap */
+      .gl-search-box-by-click .form-control {
+        width: 1%;
+      }
+
       .dropdown-menu-toggle {
         margin-bottom: 0;
       }

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

@@ -4,9 +4,9 @@
   - 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')
+      = sprite_icon('download', css_class: 'gl-icon')
       %span.sr-only=  _('Select Archive Format')
-      = sprite_icon("chevron-down")
+      = sprite_icon('chevron-down', css_class: 'gl-icon')
     .dropdown-menu.dropdown-menu-right{ role: 'menu' }
       %section
         %h5.m-0.dropdown-bold-header= _('Download source code')

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

@@ -2,5 +2,5 @@
 - tag = local_assigns.fetch(:tag, nil)
 - return unless project && tag
 
-%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger btn-icon has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
-  = sprite_icon("remove")
+%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-default btn-icon has-tooltip gl-ml-3\! #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
+  = sprite_icon('remove', css_class: 'gl-icon')

app/views/projects/tags/_tag.html.haml

@@ -42,5 +42,5 @@
 
     - if can?(current_user, :admin_tag, @project)
       = link_to edit_project_tag_release_path(@project, tag.name), class: 'btn gl-button btn-default btn-icon btn-edit has-tooltip', title: s_('TagsPage|Edit release notes'), data: { container: "body" } do
-        = sprite_icon("pencil")
+        = sprite_icon('pencil', css_class: 'gl-icon')
       = render 'projects/buttons/remove_tag', project: @project, tag: tag

app/views/projects/tags/index.html.haml

@@ -10,11 +10,11 @@
 
     .nav-controls
       #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path, sort_options: tags_sort_options_hash.to_json } }
+      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon has-tooltip gl-ml-auto' do
+        = sprite_icon('rss', css_class: 'gl-icon qa-rss-icon')
       - if can?(current_user, :admin_tag, @project)
         = link_to new_project_tag_path(@project), class: 'btn gl-button btn-confirm', data: { qa_selector: "new_tag_button" } do
           = s_('TagsPage|New tag')
-      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-block has-tooltip' do
-        = sprite_icon('rss', css_class: 'qa-rss-icon')
 
   = render_if_exists 'projects/commits/mirror_status'
 

app/views/projects/tags/new.html.haml

@@ -51,7 +51,7 @@
       = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
         = render 'shared/zen', attr: :release_description, classes: 'note-textarea', placeholder: s_('TagsPage|Write your release notes or drag files here…'), current_text: @release_description, qa_selector: 'release_notes_field'
         = render 'shared/notes/hints'
-  .form-actions
-    = button_tag s_('TagsPage|Create tag'), class: 'gl-button btn btn-confirm', data: { qa_selector: "create_tag_button" }
+  .form-actions.gl-display-flex
+    = button_tag s_('TagsPage|Create tag'), class: 'gl-button btn btn-confirm gl-mr-3', data: { qa_selector: "create_tag_button" }
     = link_to s_('TagsPage|Cancel'), project_tags_path(@project), class: 'gl-button btn btn-default btn-cancel'
 %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe

app/views/projects/tags/releases/edit.html.haml

@@ -14,6 +14,6 @@
     = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
     = render 'shared/notes/hints'
   .error-alert
-  .gl-mt-3
-    = f.submit 'Save changes', class: 'btn gl-button btn-confirm'
+  .gl-mt-5.gl-display-flex
+    = f.submit 'Save changes', class: 'btn gl-button btn-confirm gl-mr-3'
     = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn gl-button btn-default btn-cancel"

changelogs/unreleased/273322-fy21q4-foundations-kr2-audit-and-update-buttons-on-projects-tagsco.yml

+---
+title: Update button styles, spacing, variants and responsive behavior for the Tags
+  page.
+merge_request: 61413
+author:
+type: other