Updates clipboard button with gitlab-ui

Updates clipboard button component to use
the new glTooltipDirective and the new glButton
component from gitlab-ui

1 files changed, 6 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 945a33d9622..6b90a1f540e 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -12,20 +12,18 @@
  *    css-class="btn-transparent"
  * />
  */
-import tooltip from '../directives/tooltip';
+import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import Icon from '../components/icon.vue';
 
 export default {
   name: 'ClipboardButton',
-
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
-
   components: {
+    GlButton,
     Icon,
   },
-
   props: {
     text: {
       type: String,
@@ -68,16 +66,12 @@ export default {
 </script>
 
 <template>
-  <button
-    v-tooltip
+  <gl-button
+    v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClass"
     :title="title"
     :data-clipboard-text="clipboardText"
-    :data-container="tooltipContainer"
-    :data-placement="tooltipPlacement"
-    type="button"
-    class="btn"
   >
     <icon name="duplicate" />
-  </button>
+  </gl-button>
 </template>