From 51b887414866490f7410e2514c5fe338451fa988 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 5 Mar 2018 11:59:50 +0000
Subject: [PATCH] Removes btn-transparent and btn-clipboard as default classes
 for clipboard button component

Changes after review
---
 app/assets/javascripts/clusters/components/applications.vue  | 2 +-
 app/assets/javascripts/notes/components/diff_file_header.vue | 2 ++
 .../registry/components/collapsible_container.vue            | 1 +
 .../javascripts/registry/components/table_registry.vue       | 1 +
 .../vue_merge_request_widget/components/mr_widget_header.vue | 1 +
 .../javascripts/vue_shared/components/clipboard_button.vue   | 3 ++-
 .../vue_shared/components/clipboard_button_spec.js           | 5 +++++
 7 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 27136c7289f..f8dcdf3f60a 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/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>
diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue
index fe5baa3537f..3bcde17f07c 100644
--- a/app/assets/javascripts/notes/components/diff_file_header.vue
+++ b/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
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index b4906ba4ee5..a03180e80e6 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/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">
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index bef850eddc0..ee4eb3581f3 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 18a3787857d..3d886e7d628 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/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") }}
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 3b6c2da1664..cab126a7eca 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/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"
diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
index d0fc10d69ea..f598b1afa74 100644
--- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js
+++ b/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');
+  });
 });