Merge branch '43502-clipboard-btn' into 'master'

Resolve "Update clipboard button component not to render default css classes"

Closes #43502

See merge request gitlab-org/gitlab-ce!17529

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

@@ -186,7 +186,7 @@
                     <clipboard-button
                       :text="ingressExternalIp"
                       :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
-                      css-class="btn btn-default js-clipboard-btn"
+                      class="js-clipboard-btn"
                     />
                   </span>
                 </div>

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

@@ -35,6 +35,7 @@
         <clipboard-button
           title="Copy file path to clipboard"
           :text="diffFile.submoduleLink"
+          css-class="btn-default btn-transparent btn-clipboard"
         />
       </span>
     </div>
@@ -79,6 +80,7 @@
       <clipboard-button
         title="Copy file path to clipboard"
         :text="diffFile.filePath"
+        css-class="btn-default btn-transparent btn-clipboard"
       />
 
       <small

app/assets/javascripts/registry/components/collapsible_container.vue

@@ -86,6 +86,7 @@
         v-if="repo.location"
         :text="clipboardText"
         :title="repo.location"
+        css-class="btn-default btn-transparent btn-clipboard"
       />
 
       <div class="controls hidden-xs pull-right">

app/assets/javascripts/registry/components/table_registry.vue

@@ -90,6 +90,7 @@
               v-if="item.location"
               :title="item.location"
               :text="clipboardText(item.location)"
+              css-class="btn-default btn-transparent btn-clipboard"
             />
           </td>
           <td>

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

@@ -67,6 +67,7 @@
         <clipboard-button
           :text="branchNameClipboardData"
           :title="__('Copy branch name to clipboard')"
+          css-class="btn-default btn-transparent btn-clipboard"
         />
 
         {{ s__("mrWidget|into") }}

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

@@ -31,7 +31,7 @@
       cssClass: {
         type: String,
         required: false,
-        default: 'btn btn-default btn-transparent btn-clipboard',
+        default: 'btn-default',
       },
     },
   };
@@ -40,6 +40,7 @@
 <template>
   <button
     type="button"
+    class="btn"
     :class="cssClass"
     :title="title"
     :data-clipboard-text="text"

spec/javascripts/vue_shared/components/clipboard_button_spec.js

@@ -10,6 +10,7 @@ describe('clipboard button', () => {
     vm = mountComponent(Component, {
       text: 'copy me',
       title: 'Copy this value into Clipboard!',
+      cssClass: 'btn-danger',
     });
   });
 
@@ -28,4 +29,8 @@ describe('clipboard button', () => {
     expect(vm.$el.getAttribute('data-placement')).toEqual('top');
     expect(vm.$el.getAttribute('data-container')).toEqual(null);
   });
+
+  it('should render provided classname', () => {
+    expect(vm.$el.classList).toContain('btn-danger');
+  });
 });