Update clipboard button to use Pajamas

Ensure clipboard buttons that utilize the template
are styled correctly across the application

app/assets/javascripts/blob/components/blob_header_filepath.vue

@@ -43,6 +43,7 @@ export default {
       :text="blob.path"
       :gfm="gfmCopyText"
       :title="__('Copy file path')"
+      category="tertiary"
       css-class="btn-clipboard btn-transparent lh-100 position-static"
     />
   </div>

app/assets/javascripts/clusters/components/applications.vue

@@ -481,7 +481,7 @@ export default {
                   type="text"
                   class="form-control js-hostname"
                 />
-                <span class="input-group-btn">
+                <span class="input-group-append">
                   <clipboard-button
                     :text="jupyterHostname"
                     :title="s__('ClusterIntegration|Copy Jupyter Hostname')"

app/assets/javascripts/diffs/components/commit_item.vue

 <script>
 /* eslint-disable vue/no-v-html */
 import { mapActions } from 'vuex';
-import { GlButtonGroup, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -182,14 +182,14 @@ export default {
           :endpoint="commit.pipeline_status_path"
           class="d-inline-flex"
         />
-        <div class="commit-sha-group">
-          <div class="label label-monospace monospace" v-text="commit.short_id"></div>
+        <gl-button-group class="gl-ml-4" data-testid="commit-sha-group">
+          <gl-button label class="gl-font-monospace" v-text="commit.short_id" />
           <clipboard-button
             :text="commit.id"
             :title="__('Copy commit SHA')"
-            class="btn btn-default"
+            class="input-group-text"
           />
-        </div>
+        </gl-button-group>
         <div
           v-if="hasNeighborCommits && glFeatures.mrCommitNeighborNav"
           class="commit-nav-buttons ml-3"

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -211,7 +211,7 @@ export default {
     class="js-file-title file-title file-title-flex-parent"
     @click.self="handleToggleFile"
   >
-    <div class="file-header-content">
+    <div class="file-header-content gl-display-flex gl-align-items-center gl-pr-0!">
       <gl-icon
         v-if="collapsible"
         ref="collapseIcon"
@@ -254,7 +254,8 @@ export default {
         :title="__('Copy file path')"
         :text="diffFile.file_path"
         :gfm="gfmCopyText"
-        css-class="btn-default btn-transparent btn-clipboard"
+        data-testid="diff-file-copy-clipboard"
+        category="tertiary"
         data-track-event="click_copy_file_button"
         data-track-label="diff_copy_file_path_button"
         data-track-property="diff_copy_file"

app/assets/javascripts/error_tracking/components/stacktrace_entry.vue

@@ -94,7 +94,9 @@ export default {
         <clipboard-button
           :title="__('Copy file path')"
           :text="filePath"
-          css-class="btn-default btn-transparent btn-clipboard position-static"
+          category="tertiary"
+          size="small"
+          css-class="gl-mr-1"
         />
 
         <gl-sprintf v-if="errorFn" :message="__('%{spanStart}in%{spanEnd} %{errorFn}')">

app/assets/javascripts/jobs/components/commit_block.vue

@@ -32,26 +32,25 @@ export default {
       block: !isLastBlock,
     }"
   >
-    <p class="gl-mb-2">
-      <span class="font-weight-bold">{{ __('Commit') }}</span>
+    <span class="font-weight-bold">{{ __('Commit') }}</span>
 
-      <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">
-        {{ commit.short_id }}
-      </gl-link>
+    <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">
+      {{ commit.short_id }}
+    </gl-link>
 
-      <clipboard-button
-        :text="commit.id"
-        :title="__('Copy commit SHA')"
-        css-class="btn btn-clipboard btn-transparent"
-      />
+    <clipboard-button
+      :text="commit.id"
+      :title="__('Copy commit SHA')"
+      category="tertiary"
+      size="small"
+    />
 
-      <span v-if="mergeRequest">
-        in
-        <gl-link :href="mergeRequest.path" class="js-link-commit link-commit"
-          >!{{ mergeRequest.iid }}</gl-link
-        >
-      </span>
-    </p>
+    <span v-if="mergeRequest">
+      in
+      <gl-link :href="mergeRequest.path" class="js-link-commit link-commit"
+        >!{{ mergeRequest.iid }}</gl-link
+      >
+    </span>
 
     <p class="gl-mb-0">{{ commit.title }}</p>
   </div>

app/assets/javascripts/packages/shared/components/publish_method.vue

@@ -49,7 +49,8 @@ export default {
       <clipboard-button
         :text="packageEntity.pipeline.sha"
         :title="__('Copy commit SHA')"
-        css-class="gl-border-0 gl-py-0 gl-px-2"
+        category="tertiary"
+        size="small"
       />
     </template>
 

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

@@ -108,7 +108,7 @@ export default {
             <input
               ref="service-desk-incoming-email"
               type="text"
-              class="form-control incoming-email h-auto"
+              class="form-control incoming-email"
               :placeholder="__('Incoming email')"
               :aria-label="__('Incoming email')"
               aria-describedby="incoming-email-describer"
@@ -119,7 +119,7 @@ export default {
               <clipboard-button
                 :title="__('Copy')"
                 :text="incomingEmail"
-                css-class="btn qa-clipboard-button"
+                css-class="input-group-text qa-clipboard-button"
               />
             </div>
           </div>

app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue

@@ -197,7 +197,8 @@ export default {
           v-if="tag.digest"
           :title="tag.digest"
           :text="tag.digest"
-          css-class="btn-default btn-transparent btn-clipboard gl-p-0"
+          category="tertiary"
+          size="small"
         />
       </details-row>
     </template>
@@ -212,7 +213,8 @@ export default {
           v-if="formattedRevision"
           :title="formattedRevision"
           :text="formattedRevision"
-          css-class="btn-default btn-transparent btn-clipboard gl-p-0"
+          category="tertiary"
+          size="small"
         />
       </details-row>
     </template>

app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue

@@ -82,7 +82,7 @@ export default {
         :disabled="item.deleting"
         :text="item.location"
         :title="item.location"
-        css-class="btn-default btn-transparent btn-clipboard gl-text-gray-300"
+        category="tertiary"
       />
       <gl-icon
         v-if="item.failedDelete"

app/assets/javascripts/releases/components/evidence_block.vue

@@ -83,11 +83,7 @@ export default {
             <span class="js-expanded monospace gl-pl-2">{{ sha(index) }}</span>
           </template>
         </expand-button>
-        <clipboard-button
-          :title="__('Copy evidence SHA')"
-          :text="sha(index)"
-          css-class="btn-default btn-transparent btn-clipboard"
-        />
+        <clipboard-button :title="__('Copy evidence SHA')" :text="sha(index)" category="tertiary" />
       </div>
 
       <div class="d-flex align-items-center text-muted">

app/assets/javascripts/repository/components/last_commit.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlTooltipDirective, GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import { sprintf, s__ } from '~/locale';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -17,8 +17,9 @@ export default {
     TimeagoTooltip,
     ClipboardButton,
     CiIcon,
-    GlLink,
     GlButton,
+    GlButtonGroup,
+    GlLink,
     GlLoadingIcon,
   },
   directives: {
@@ -167,16 +168,19 @@ export default {
               />
             </gl-link>
           </div>
-          <div class="commit-sha-group d-flex">
-            <div class="label label-monospace monospace">
-              {{ showCommitId }}
-            </div>
+          <gl-button-group class="gl-ml-4 js-commit-sha-group">
+            <gl-button
+              label
+              class="gl-font-monospace"
+              data-testid="last-commit-id-label"
+              v-text="showCommitId"
+            />
             <clipboard-button
               :text="commit.sha"
               :title="__('Copy commit SHA')"
-              tooltip-placement="bottom"
+              class="input-group-text"
             />
-          </div>
+          </gl-button-group>
         </div>
       </div>
     </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -111,9 +111,10 @@ export default {
             v-html="mr.sourceBranchLink"
           /><clipboard-button
             ref="copyBranchNameButton"
+            data-testid="mr-widget-copy-clipboard"
             :text="branchNameClipboardData"
             :title="__('Copy branch name')"
-            css-class="btn-default btn-transparent btn-clipboard"
+            category="tertiary"
           />
           {{ s__('mrWidget|into') }}
           <tooltip-on-truncate

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue

@@ -177,7 +177,9 @@ export default {
             <clipboard-button
               :title="__('Copy commit SHA')"
               :text="mr.mergeCommitSha"
-              css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
+              css-class="js-mr-merged-copy-sha"
+              category="tertiary"
+              size="small"
             />
           </template>
         </p>

app/assets/javascripts/vue_shared/components/clipboard_button.vue

@@ -12,7 +12,7 @@
  *    css-class="btn-transparent"
  * />
  */
-import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   name: 'ClipboardButton',
@@ -20,8 +20,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    GlDeprecatedButton,
-    GlIcon,
+    GlButton,
   },
   props: {
     text: {
@@ -50,7 +49,17 @@ export default {
     cssClass: {
       type: String,
       required: false,
-      default: 'btn-default',
+      default: null,
+    },
+    category: {
+      type: String,
+      required: false,
+      default: 'secondary',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
     },
   },
   computed: {
@@ -65,13 +74,15 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-button
+  <gl-button
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     v-gl-tooltip.hover.blur
     :class="cssClass"
     :title="title"
     :data-clipboard-text="clipboardText"
-  >
-    <gl-icon name="copy-to-clipboard" />
-  </gl-deprecated-button>
+    :category="category"
+    :size="size"
+    icon="copy-to-clipboard"
+    :aria-label="__('Copy this value')"
+  />
 </template>

changelogs/unreleased/update-clipboard-button.yml

+---
+title: Update clipboard button to use Pajamas
+merge_request: 38421
+author:
+type: changed

locale/gitlab.pot

@@ -7200,6 +7200,9 @@ msgstr ""
 msgid "Copy the code below to implement tracking in your application:"
 msgstr ""
 
+msgid "Copy this value"
+msgstr ""
+
 msgid "Copy to clipboard"
 msgstr ""
 

spec/features/projects/tree/tree_show_spec.rb

@@ -69,7 +69,7 @@ RSpec.describe 'Projects tree', :js do
 
       # Check last commit
       expect(find('.commit-content').text).to include(message)
-      expect(find('.commit-sha-group').text).to eq(short_newrev)
+      expect(find('.js-commit-sha-group').text).to eq(short_newrev)
     end
   end
 

spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap

@@ -27,8 +27,10 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
   </small>
    
   <clipboard-button-stub
+    category="tertiary"
     cssclass="btn-clipboard btn-transparent lh-100 position-static"
     gfm="\`foo/bar/dummy.md\`"
+    size="medium"
     text="foo/bar/dummy.md"
     title="Copy file path"
     tooltipplacement="top"

spec/frontend/diffs/components/commit_item_spec.js

@@ -25,7 +25,7 @@ describe('diffs/components/commit_item', () => {
   const getTitleElement = () => wrapper.find('.commit-row-message.item-title');
   const getDescElement = () => wrapper.find('pre.commit-row-description');
   const getDescExpandElement = () => wrapper.find('.commit-content .js-toggle-button');
-  const getShaElement = () => wrapper.find('.commit-sha-group');
+  const getShaElement = () => wrapper.find('[data-testid="commit-sha-group"]');
   const getAvatarElement = () => wrapper.find('.user-avatar-link');
   const getCommitterElement = () => wrapper.find('.committer');
   const getCommitActionsElement = () => wrapper.find('.commit-actions');
@@ -84,8 +84,8 @@ describe('diffs/components/commit_item', () => {
 
     it('renders commit sha', () => {
       const shaElement = getShaElement();
-      const labelElement = shaElement.find('.label');
-      const buttonElement = shaElement.find('button');
+      const labelElement = shaElement.find('[data-testid="commit-sha-group"] button');
+      const buttonElement = shaElement.find('button.input-group-text');
 
       expect(labelElement.text()).toEqual(commit.short_id);
       expect(buttonElement.props('text')).toBe(commit.id);

spec/frontend/diffs/components/diff_file_spec.js

@@ -37,7 +37,7 @@ describe('DiffFile', () => {
 
       expect(el.querySelectorAll('.diff-content.hidden').length).toEqual(0);
       expect(el.querySelector('.js-file-title')).toBeDefined();
-      expect(el.querySelector('.btn-clipboard')).toBeDefined();
+      expect(el.querySelector('[data-testid="diff-file-copy-clipboard"]')).toBeDefined();
       expect(el.querySelector('.file-title-name').innerText.indexOf(file_path)).toBeGreaterThan(-1);
       expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
 
@@ -47,7 +47,7 @@ describe('DiffFile', () => {
         .then(() => {
           expect(el.querySelectorAll('.line_content').length).toBe(8);
           expect(el.querySelectorAll('.js-line-expansion-content').length).toBe(1);
-          triggerEvent('.btn-clipboard');
+          triggerEvent('[data-testid="diff-file-copy-clipboard"]');
         })
         .then(done)
         .catch(done.fail);
@@ -56,11 +56,11 @@ describe('DiffFile', () => {
     it('should track a click event on copy to clip board button', done => {
       const el = vm.$el;
 
-      expect(el.querySelector('.btn-clipboard')).toBeDefined();
+      expect(el.querySelector('[data-testid="diff-file-copy-clipboard"]')).toBeDefined();
       vm.file.renderIt = true;
       vm.$nextTick()
         .then(() => {
-          triggerEvent('.btn-clipboard');
+          triggerEvent('[data-testid="diff-file-copy-clipboard"]');
 
           expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_copy_file_button', {
             label: 'diff_copy_file_path_button',

spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap

@@ -32,7 +32,8 @@ exports[`publish_method renders 1`] = `
   </gl-link-stub>
    
   <clipboard-button-stub
-    cssclass="gl-border-0 gl-py-0 gl-px-2"
+    category="tertiary"
+    size="small"
     text="sha-baz"
     title="Copy commit SHA"
     tooltipplacement="top"

spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap

@@ -77,24 +77,31 @@ exports[`Repository last commit component renders commit widget 1`] = `
         </gl-link-stub>
       </div>
        
-      <div
-        class="commit-sha-group d-flex"
+      <gl-button-group-stub
+        class="gl-ml-4 js-commit-sha-group"
       >
-        <div
-          class="label label-monospace monospace"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="gl-font-monospace"
+          data-testid="last-commit-id-label"
+          icon=""
+          label="true"
+          size="medium"
+          variant="default"
         >
-          
-            12345678
-          
-        </div>
+          12345678
+        </gl-button-stub>
          
         <clipboard-button-stub
-          cssclass="btn-default"
+          category="secondary"
+          class="input-group-text"
+          size="medium"
           text="123456789"
           title="Copy commit SHA"
-          tooltipplacement="bottom"
+          tooltipplacement="top"
         />
-      </div>
+      </gl-button-group-stub>
     </div>
   </div>
 </div>
@@ -181,24 +188,31 @@ exports[`Repository last commit component renders the signature HTML as returned
         </gl-link-stub>
       </div>
        
-      <div
-        class="commit-sha-group d-flex"
+      <gl-button-group-stub
+        class="gl-ml-4 js-commit-sha-group"
       >
-        <div
-          class="label label-monospace monospace"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="gl-font-monospace"
+          data-testid="last-commit-id-label"
+          icon=""
+          label="true"
+          size="medium"
+          variant="default"
         >
-          
-            12345678
-          
-        </div>
+          12345678
+        </gl-button-stub>
          
         <clipboard-button-stub
-          cssclass="btn-default"
+          category="secondary"
+          class="input-group-text"
+          size="medium"
           text="123456789"
           title="Copy commit SHA"
-          tooltipplacement="bottom"
+          tooltipplacement="top"
         />
-      </div>
+      </gl-button-group-stub>
     </div>
   </div>
 </div>

spec/frontend/repository/components/last_commit_spec.js

@@ -78,7 +78,7 @@ describe('Repository last commit component', () => {
     factory();
 
     return vm.vm.$nextTick(() => {
-      expect(vm.find('.label-monospace').text()).toEqual('12345678');
+      expect(vm.find('[data-testid="last-commit-id-label"]').text()).toEqual('12345678');
     });
   });
 

spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js

@@ -130,7 +130,7 @@ describe('MRWidgetHeader', () => {
       });
 
       it('renders clipboard button', () => {
-        expect(vm.$el.querySelector('.btn-clipboard')).not.toEqual(null);
+        expect(vm.$el.querySelector('[data-testid="mr-widget-copy-clipboard"]')).not.toEqual(null);
       });
 
       it('renders target branch', () => {

spec/frontend/vue_shared/components/clipboard_button_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 describe('clipboard button', () => {
@@ -26,9 +26,8 @@ describe('clipboard button', () => {
     });
 
     it('renders a button for clipboard', () => {
-      expect(wrapper.find(GlDeprecatedButton).exists()).toBe(true);
+      expect(wrapper.find(GlButton).exists()).toBe(true);
       expect(wrapper.attributes('data-clipboard-text')).toBe('copy me');
-      expect(wrapper.find(GlIcon).props('name')).toBe('copy-to-clipboard');
     });
 
     it('should have a tooltip with default values', () => {

spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap

@@ -38,7 +38,8 @@ exports[`Package code instruction single line to match the default snapshot 1`]
       data-testid="instruction-button"
     >
       <button
-        class="btn input-group-text btn-secondary btn-md btn-default"
+        aria-label="Copy this value"
+        class="btn input-group-text btn-default btn-md gl-button btn-default-secondary btn-icon"
         data-clipboard-text="npm i @my-package"
         title="Copy npm install command"
         type="button"
@@ -53,6 +54,8 @@ exports[`Package code instruction single line to match the default snapshot 1`]
             href="#copy-to-clipboard"
           />
         </svg>
+          
+        <!---->
       </button>
     </span>
   </div>