Update blob view buttons to gitlab-ui and pajamas styles

Updates blob view buttons to gitlab-ui css utility
classes and updates based on Pajamas design
documentation.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/53775

app/assets/stylesheets/framework/files.scss

@@ -353,23 +353,17 @@ span.idiff {
     color: $gl-text-color;
   }
 
-  .file-actions .btn:not(.btn-icon) {
-    padding: 0 10px;
-    font-size: 13px;
-    line-height: 28px;
-    display: inline-block;
-    float: none;
-  }
-
   .file-actions .ide-edit-button {
     z-index: 2;
   }
 
-  @include media-breakpoint-down(sm) {
-    display: block;
-
+  @include media-breakpoint-down(md) {
     .file-actions {
-      margin-top: 5px;
+      margin-top: $gl-padding-8;
+
+      .btn {
+        margin-bottom: $gl-padding-8;
+      }
     }
   }
 }

app/assets/stylesheets/pages/commits.scss

@@ -108,30 +108,6 @@
   }
 }
 
-.text-expander {
-  display: inline-flex;
-  background: $white;
-  color: $gl-text-color-secondary;
-  padding: 1px $gl-padding-4;
-  cursor: pointer;
-  border: 1px solid $border-white-normal;
-  border-radius: $border-radius-default;
-  margin-left: 5px;
-  font-size: 12px;
-  line-height: $gl-font-size;
-  outline: none;
-
-  &.open {
-    background-color: darken($gray-light, 10%);
-    box-shadow: inset 0 0 2px rgba($black, 0.2);
-  }
-
-  &:hover {
-    background-color: darken($gray-light, 10%);
-    text-decoration: none;
-  }
-}
-
 .commit.flex-list {
   display: flex;
 }
@@ -240,11 +216,6 @@
 
 .commit,
 .generic-commit-status {
-  a,
-  button {
-    vertical-align: baseline;
-  }
-
   a {
     color: $gl-text-color;
 

app/helpers/blob_helper.rb

@@ -64,7 +64,7 @@ module BlobHelper
   def edit_blob_button(project = @project, ref = @ref, path = @path, options = {})
     return unless blob = readable_blob(options, path, project, ref)
 
-    common_classes = "btn gl-button btn-confirm js-edit-blob gl-mr-3 #{options[:extra_class]}"
+    common_classes = "btn gl-button btn-confirm js-edit-blob gl-ml-3 #{options[:extra_class]}"
     data = { track_event: 'click_edit', track_label: 'Edit' }
 
     if Feature.enabled?(:web_ide_primary_edit, project.group)
@@ -84,7 +84,7 @@ module BlobHelper
   def ide_edit_button(project = @project, ref = @ref, path = @path, blob:)
     return unless blob
 
-    common_classes = 'btn gl-button btn-confirm ide-edit-button gl-mr-3'
+    common_classes = 'btn gl-button btn-confirm ide-edit-button gl-ml-3'
     data = { track_event: 'click_edit_ide', track_label: 'Web IDE' }
 
     unless Feature.enabled?(:web_ide_primary_edit, project.group)
@@ -229,13 +229,13 @@ module BlobHelper
   end
 
   def copy_file_path_button(file_path)
-    clipboard_button(text: file_path, gfm: "`#{file_path}`", class: 'btn-clipboard btn-transparent', title: _('Copy file path'))
+    clipboard_button(text: file_path, gfm: "`#{file_path}`", class: 'gl-button btn btn-default-tertiary btn-icon btn-sm', title: _('Copy file path'))
   end
 
   def copy_blob_source_button(blob)
     return unless blob.rendered_as_text?(ignore_errors: false)
 
-    clipboard_button(target: ".blob-content[data-blob-id='#{blob.id}'] > pre", class: "btn gl-button btn-default btn-sm js-copy-blob-source-btn", title: _("Copy file contents"))
+    clipboard_button(target: ".blob-content[data-blob-id='#{blob.id}'] > pre", class: "btn gl-button btn-default btn-icon js-copy-blob-source-btn", title: _("Copy file contents"))
   end
 
   def open_raw_blob_button(blob)
@@ -245,7 +245,7 @@ module BlobHelper
     title = _('Open raw')
     link_to sprite_icon('doc-code'),
       external_storage_url_or_path(blob_raw_path),
-      class: 'btn gl-button btn-default btn-sm has-tooltip',
+      class: 'btn gl-button btn-default btn-icon has-tooltip',
       target: '_blank',
       rel: 'noopener noreferrer',
       aria: { label: title },
@@ -260,7 +260,7 @@ module BlobHelper
     link_to sprite_icon('download'),
       external_storage_url_or_path(blob_raw_path(inline: false)),
       download: @path,
-      class: 'btn gl-button btn-default btn-sm has-tooltip',
+      class: 'btn gl-button btn-default btn-icon has-tooltip',
       target: '_blank',
       rel: 'noopener noreferrer',
       aria: { label: title },
@@ -361,7 +361,7 @@ module BlobHelper
   end
 
   def edit_link_tag(link_text, edit_path, common_classes, data)
-    link_to link_text, edit_path, class: "#{common_classes} btn-sm", data: data
+    link_to link_text, edit_path, class: "#{common_classes}", data: data
   end
 
   def edit_button_tag(blob, common_classes, text, edit_path, project, ref, data)

app/views/projects/blob/_header.html.haml

@@ -2,19 +2,19 @@
 .js-file-title.file-title-flex-parent
   = render 'projects/blob/header_content', blob: blob
 
-  .file-actions.gl-display-flex.gl-flex-fill-1.gl-align-self-start.gl-md-justify-content-end<
+  .file-actions.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-md-justify-content-end<
     = render 'projects/blob/viewer_switcher', blob: blob unless blame
     - if Feature.enabled?(:consolidated_edit_button, @project)
       = render 'shared/web_ide_button', blob: blob
     - else
       = edit_blob_button(@project, @ref, @path, blob: blob)
       = ide_edit_button(@project, @ref, @path, blob: blob)
-    .btn-group.ml-2{ role: "group" }>
+    .btn-group{ role: "group", class: ("gl-ml-3" if current_user) }>
       = render_if_exists 'projects/blob/header_file_locks_link'
       - if current_user
         = replace_blob_link(@project, @ref, @path, blob: blob)
         = delete_blob_link(@project, @ref, @path, blob: blob)
-    .btn-group.ml-2{ role: "group" }
+    .btn-group.gl-ml-3{ role: "group" }
       = copy_blob_source_button(blob) unless blame
       = open_raw_blob_button(blob)
       = download_blob_button(blob)

app/views/projects/blob/_viewer_switcher.html.haml

@@ -2,11 +2,11 @@
   - simple_viewer = blob.simple_viewer
   - rich_viewer = blob.rich_viewer
 
-  .btn-group.js-blob-viewer-switcher.ml-2{ role: "group" }>
+  .btn-group.js-blob-viewer-switcher.gl-ml-3{ role: "group" }>
     - simple_label = "Display #{simple_viewer.switcher_title}"
-    %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
+    %button.btn.gl-button.btn-default.btn-icon.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
       = sprite_icon(simple_viewer.switcher_icon)
 
     - rich_label = "Display #{rich_viewer.switcher_title}"
-    %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.gl-mr-3.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
+    %button.btn.gl-button.btn-default.btn-icon.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
       = sprite_icon(rich_viewer.switcher_icon)

app/views/projects/commits/_commit.html.haml

@@ -32,7 +32,7 @@
         ·
         = commit.short_id
       - if commit.description? && collapsible
-        %button.text-expander.js-toggle-button
+        %button.gl-button.btn.btn-default.button-ellipsis-horizontal.btn-sm.gl-ml-2.text-expander.js-toggle-button
           = sprite_icon('ellipsis_h', size: 12)
 
       .committer

changelogs/unreleased/273288-update-blob-page-buttons.yml

+---
+title: Update blob page buttons to gitlab-ui pajamas styles
+merge_request: 53775
+author:
+type: changed

ee/app/views/projects/blob/_header_file_locks_link.html.haml

-= lock_file_link(html_options: { class: 'btn gl-button btn-default btn-sm path-lock' })
+= lock_file_link(html_options: { class: 'btn gl-button btn-default path-lock' })