Merge remote-tracking branch 'origin/master' into support-gitaly-tls

1 files changed, 12 insertions, 15 deletions

diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index 401bcfabbe4..3d60eb02db8 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -1,16 +1,16 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
 import { glEmojiTag } from '../../emoji';
-import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
   components: {
     Icon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     awards: {
@@ -167,31 +167,27 @@ export default {
       <button
         v-for="(awardList, awardName, index) in groupedAwards"
         :key="index"
-        v-tooltip
+        v-gl-tooltip.bottom="{ boundary: 'viewport' }"
         :class="getAwardClassBindings(awardList)"
         :title="awardTitle(awardList)"
         class="btn award-control"
-        data-boundary="viewport"
-        data-placement="bottom"
         type="button"
-        @click="handleAward(awardName)">
+        @click="handleAward(awardName);"
+      >
         <span v-html="getAwardHTML(awardName)"></span>
-        <span class="award-control-text js-counter">
-          {{ awardList.length }}
-        </span>
+        <span class="award-control-text js-counter">{{ awardList.length }}</span>
       </button>
-      <div
-        v-if="canAwardEmoji"
-        class="award-menu-holder">
+      <div v-if="canAwardEmoji" class="award-menu-holder">
         <button
-          v-tooltip
+          v-gl-tooltip
           :class="{ 'js-user-authored': isAuthoredByMe }"
           class="award-control btn js-add-award"
           title="Add reaction"
           aria-label="Add reaction"
           data-boundary="viewport"
           data-placement="bottom"
-          type="button">
+          type="button"
+        >
           <span class="award-control-icon award-control-icon-neutral">
             <icon name="emoji_slightly_smiling_face" />
           </span>
@@ -203,7 +199,8 @@ export default {
           </span>
           <i
             aria-hidden="true"
-            class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i>
+            class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"
+          ></i>
         </button>
       </div>
     </div>