Update project page buttons to conform to design system

Updates the project repo buttons, history button, and
updates the CSS to use gl- flex classes. Also updates
the mobile clone button to gl-button.

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

app/assets/javascripts/repository/index.js

+import { GlButton } from '@gitlab/ui';
 import Vue from 'vue';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import { parseBoolean } from '../lib/utils/common_utils';
@@ -7,7 +8,6 @@ import App from './components/app.vue';
 import Breadcrumbs from './components/breadcrumbs.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
 import LastCommit from './components/last_commit.vue';
-import TreeActionLink from './components/tree_action_link.vue';
 import apolloProvider from './graphql';
 import createRouter from './router';
 import { updateFormAction } from './utils/dom';
@@ -101,14 +101,17 @@ export default function setupVueRepositoryList() {
     el: treeHistoryLinkEl,
     router,
     render(h) {
-      return h(TreeActionLink, {
-        props: {
-          path: `${historyLink}/${
+      return h(
+        GlButton,
+        {
+          attrs: {
+            href: `${historyLink}/${
               this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
             }`,
-          text: __('History'),
           },
-      });
+        },
+        [__('History')],
+      );
     },
   });
 

app/assets/stylesheets/pages/projects.scss

@@ -136,33 +136,9 @@
 
 .project-repo-buttons {
   .btn {
-    &:last-child {
-      margin-left: 0;
-    }
-
     svg {
-      fill: $layout-link-gray;
-    }
-
-    .notifications-icon {
-      top: 1px;
-      margin-right: 0;
-    }
-  }
-
-  .icon {
-    top: 0;
+      fill: $gray-500;
     }
-
-  .count-badge,
-  .btn-xs {
-    height: 24px;
-  }
-
-  .home-panel-action-button,
-  .project-action-button {
-    margin: $gl-padding $gl-padding-8 0 0;
-    vertical-align: top;
   }
 
   .notification-dropdown .dropdown-menu {
@@ -175,34 +151,6 @@
     }
   }
 
-  .count-buttons {
-    display: inline-block;
-    vertical-align: top;
-    margin-top: $gl-padding;
-
-    .count-badge-count,
-    .count-badge-button {
-      border: 1px solid $border-color;
-      line-height: 1;
-    }
-
-    .count,
-    .count-badge-button {
-      color: $gl-text-color;
-    }
-
-    .count-badge-count {
-      padding: 0 12px;
-      background: $gray-light;
-      border-radius: 0 $border-radius-base $border-radius-base 0;
-    }
-
-    .count-badge-button {
-      border-right: 0;
-      border-radius: $border-radius-base 0 0 $border-radius-base;
-    }
-  }
-
   .project-clone-holder {
     display: inline-block;
     margin: $gl-padding 0 0;
@@ -887,10 +835,6 @@ pre.light-well {
 }
 
 .git-clone-holder {
-  .btn-clipboard {
-    border: 1px solid $border-color;
-  }
-
   .clone-options {
     display: table-cell;
 

app/views/projects/_home_panel.html.haml

@@ -6,8 +6,8 @@
 = render 'projects/invite_members_modal', project: @project
 
 .project-home-panel.js-show-on-project-root.gl-my-5{ class: [("empty-project" if empty_repo)] }
-  .row.gl-mb-3
-    .home-panel-title-row.col-md-12.col-lg-6.d-flex
+  .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-mb-3
+    .home-panel-title-row.gl-display-flex
       .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.gl-w-11.gl-h-11.gl-mr-3.float-none
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'image')
       .d-flex.flex-column.flex-wrap.align-items-baseline
@@ -43,13 +43,13 @@
                   = _("+ %{count} more") % { count: @project.count_of_extra_topics_not_shown }
 
 
-    .project-repo-buttons.col-md-12.col-lg-6.d-inline-flex.flex-wrap.justify-content-lg-end
+    .project-repo-buttons.gl-display-flex.gl-justify-content-md-end.gl-align-items-start.gl-flex-wrap.gl-mt-5
       - if current_user
-        .d-inline-flex
+        .gl-display-flex.gl-align-items-start.gl-mr-3
           - if @notification_setting
-            .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id, container_class: 'gl-mr-3 gl-mt-5 gl-vertical-align-top' } }
+            .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id } }
 
-      .count-buttons.d-inline-flex
+      .count-buttons.gl-display-flex.gl-align-items-flex-start
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 

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

@@ -2,7 +2,7 @@
 - dropdown_class = local_assigns.fetch(:dropdown_class, '')
 
 .git-clone-holder.js-git-clone-holder
-  %a#clone-dropdown.gl-button.btn.btn-info.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+  %a#clone-dropdown.gl-button.btn.btn-confirm.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
     %span.gl-mr-2.js-clone-dropdown-label
       = _('Clone')
     = sprite_icon("chevron-down", css_class: "icon")
@@ -11,19 +11,19 @@
       %li{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with SSH')
-        .input-group
+        .input-group.btn-group
           = text_field_tag :ssh_project_clone, project.ssh_url_to_repo, class: "js-select-on-focus form-control qa-ssh-clone-url", readonly: true, aria: { label: _('Repository clone URL') }
           .input-group-append
-            = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
+            = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
             = render_if_exists 'projects/buttons/geo'
     - if http_enabled?
       %li.pt-2{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with %{http_label}') % { http_label: gitlab_config.protocol.upcase }
-        .input-group
+        .input-group.btn-group
           = text_field_tag :http_project_clone, project.http_url_to_repo, class: "js-select-on-focus form-control qa-http-clone-url", readonly: true, aria: { label: _('Repository clone URL') }
           .input-group-append
-            = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
+            = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text gl-button btn btn-icon btn-default")
             = render_if_exists 'projects/buttons/geo'
       %li.divider.mt-2
       %li.pt-2.gl-new-dropdown-item

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

 - unless @project.empty_repo?
   - if current_user && can?(current_user, :fork_project, @project)
-    .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
+    .count-badge.btn-group
       - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
-        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'btn btn-default has-tooltip count-badge-button d-flex align-items-center fork-btn' do
+        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'gl-button btn btn-default btn-sm has-tooltip fork-btn' do
           = sprite_icon('fork', css_class: 'icon')
           %span= s_('ProjectOverview|Fork')
       - else
         - can_create_fork = current_user.can?(:create_fork)
         - disabled_fork_tooltip = s_('ProjectOverview|You have reached your project limit')
-        %span.has-tooltip{ title: (disabled_fork_tooltip unless can_create_fork) }
-          = link_to new_project_fork_path(@project), class: "btn btn-default btn-xs count-badge-button d-flex align-items-center fork-btn #{' disabled' unless can_create_fork }", 'aria-label' => (disabled_fork_tooltip unless can_create_fork) do
+        %span.btn-group.has-tooltip{ title: (disabled_fork_tooltip unless can_create_fork) }
+          = link_to new_project_fork_path(@project), class: "gl-button btn btn-default btn-sm fork-btn #{' disabled' unless can_create_fork }", 'aria-label' => (disabled_fork_tooltip unless can_create_fork) do
             = sprite_icon('fork', css_class: 'icon')
             %span= s_('ProjectOverview|Fork')
-      %span.fork-count.count-badge-count.d-flex.align-items-center
-        = link_to project_forks_path(@project), title: n_(s_('ProjectOverview|Fork'), s_('ProjectOverview|Forks'), @project.forks_count), class: 'count' do
+      = link_to project_forks_path(@project), title: n_(s_('ProjectOverview|Forks'), s_('ProjectOverview|Forks'), @project.forks_count), class: 'gl-button btn btn-default btn-sm count has-tooltip' do
         = @project.forks_count

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

 - if current_user
-  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
-    %button.count-badge-button.btn.btn-default.btn-xs.d-flex.align-items-center.star-btn.toggle-star{ type: "button", data: { endpoint: toggle_star_project_path(@project, :json) } }
+  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3.btn-group
+    %button.gl-button.btn.btn-default.btn-sm.star-btn.toggle-star{ type: "button", data: { endpoint: toggle_star_project_path(@project, :json) } }
       - if current_user.starred?(@project)
         = sprite_icon('star', css_class: 'icon')
         %span.starred= s_('ProjectOverview|Unstar')
       - else
         = sprite_icon('star-o', css_class: 'icon')
         %span= s_('ProjectOverview|Star')
-    %span.star-count.count-badge-count.d-flex.align-items-center
-      = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'count' do
+    = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'gl-button btn btn-default btn-sm star-count count' do
       = @project.star_count
 
 - else
-  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
-    = link_to new_user_session_path, class: 'btn btn-default btn-xs has-tooltip count-badge-button d-flex align-items-center star-btn', title: s_('ProjectOverview|You must sign in to star a project') do
+  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3.btn-group
+    = link_to new_user_session_path, class: 'gl-button btn btn-default btn-sm has-tooltip star-btn', title: s_('ProjectOverview|You must sign in to star a project') do
       = sprite_icon('star-o', css_class: 'icon')
       %span= s_('ProjectOverview|Star')
-    %span.star-count.count-badge-count.d-flex.align-items-center
-      = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'count' do
+    = link_to project_starrers_path(@project), title: n_(s_('ProjectOverview|Starrer'), s_('ProjectOverview|Starrers'), @project.star_count), class: 'gl-button btn btn-default btn-sm star-count count' do
       = @project.star_count

app/views/projects/tree/_tree_header.html.haml

@@ -7,7 +7,7 @@
 .tree-controls
   .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3<
     = render_if_exists 'projects/tree/lock_link'
-    #js-tree-history-link.d-inline-block{ data: { history_link: project_commits_path(@project, @ref) } }
+    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil

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: "btn-primary flex-fill bold justify-content-center input-group-text clone-dropdown-btn js-clone-dropdown-label")
-  %button.btn.btn-primary.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 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" } }
     = 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/273286-update-project-view-buttons.yml

+---
+title: Update project page buttons to conform to design system
+merge_request: 53260
+author:
+type: changed