diff options
7 files changed, 24 insertions, 27 deletions
diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue index ae6029142fe..353fdf55e0f 100644 --- a/app/assets/javascripts/badges/components/badge.vue +++ b/app/assets/javascripts/badges/components/badge.vue @@ -1,17 +1,16 @@ <script> import Icon from '~/vue_shared/components/icon.vue'; import Tooltip from '~/vue_shared/directives/tooltip'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlTooltipDirective } from '@gitlab-org/gitlab-ui'; export default { name: 'Badge', components: { Icon, - Tooltip, GlLoadingIcon, }, directives: { - Tooltip, + GlTooltip: GlTooltipDirective, }, props: { imageUrl: { @@ -93,7 +92,7 @@ export default { <button v-show="hasError" - v-tooltip + v-gl-tooltip :title="s__('Badges|Reload badge image')" class="btn btn-transparent btn-sm text-primary" type="button" diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue index 16bc900867a..a67a225e20a 100644 --- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue @@ -1,9 +1,9 @@ <script> -import tooltip from '../../vue_shared/directives/tooltip'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { count: { @@ -16,13 +16,12 @@ export default { <template> <span v-if="count === 50" class="events-info float-right"> <i - v-tooltip + v-gl-tooltip.top :title=" n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50) " class="fa fa-warning" aria-hidden="true" - data-placement="top" > </i> {{ n__('Showing %d event', 'Showing %d events', 50) }} diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue index 560b8695144..ebc4a83af4d 100644 --- a/app/assets/javascripts/diffs/components/commit_item.vue +++ b/app/assets/javascripts/diffs/components/commit_item.vue @@ -1,5 +1,4 @@ <script> -import tooltip from '~/vue_shared/directives/tooltip'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import Icon from '~/vue_shared/components/icon.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; @@ -21,9 +20,6 @@ import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_sta * */ export default { - directives: { - tooltip, - }, components: { UserAvatarLink, Icon, diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index 99061c3bc92..5952ef5fa38 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -1,6 +1,6 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import Tooltip from '@gitlab/ui/dist/directives/tooltip'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import { __ } from '~/locale'; import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility'; import Icon from '~/vue_shared/components/icon.vue'; @@ -12,7 +12,7 @@ export default { Icon, }, directives: { - Tooltip, + GlTooltip: GlTooltipDirective, }, props: { mergeRequestDiffs: { @@ -75,7 +75,7 @@ export default { <div class="mr-version-controls"> <div class="mr-version-menus-container content-block"> <button - v-tooltip.hover + v-gl-tooltip.hover type="button" class="btn btn-default append-right-8 js-toggle-tree-list" :class="{ diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 07e37582963..62664d10864 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -4,7 +4,7 @@ import { mapActions, mapGetters } from 'vuex'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import Icon from '~/vue_shared/components/icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; -import Tooltip from '~/vue_shared/directives/tooltip'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import { truncateSha } from '~/lib/utils/text_utility'; import { __, s__, sprintf } from '~/locale'; import EditButton from './edit_button.vue'; @@ -17,7 +17,7 @@ export default { FileIcon, }, directives: { - Tooltip, + GlTooltip: GlTooltipDirective, }, props: { discussionPath: { @@ -161,23 +161,22 @@ export default { /> <span v-if="diffFile.renamed_file"> <strong - v-tooltip + v-gl-tooltip :title="diffFile.old_path" class="file-title-name" - data-container="body" v-html="diffFile.old_path_html" ></strong> → <strong - v-tooltip + v-gl-tooltip :title="diffFile.new_path" class="file-title-name" - data-container="body" + v-html="diffFile.new_path_html" ></strong> </span> - <strong v-else v-tooltip :title="filePath" class="file-title-name" data-container="body"> + <strong v-else v-gl-tooltip :title="filePath" class="file-title-name" data-container="body"> {{ filePath }} </strong> </a> @@ -233,7 +232,7 @@ export default { <a v-if="diffFile.external_url" - v-tooltip + v-gl-tooltip :href="diffFile.external_url" :title="`View on ${diffFile.formatted_external_url}`" target="_blank" diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue index a01c5be98e3..58205d8bc69 100644 --- a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue +++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue @@ -1,5 +1,5 @@ <script> -import tooltip from '../directives/tooltip'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import timeagoMixin from '../mixins/timeago'; import '../../lib/utils/datetime_utility'; @@ -9,7 +9,7 @@ import '../../lib/utils/datetime_utility'; export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, mixins: [timeagoMixin], props: { @@ -34,11 +34,10 @@ export default { </script> <template> <time - v-tooltip + v-gl-tooltip="{ placement: tooltipPlacement }" :class="cssClass" :title="tooltipTitle(time)" :data-placement="tooltipPlacement" - data-container="body" v-text="timeFormated(time)" > </time> diff --git a/changelogs/unreleased/gt-use-gl-tooltip-directive.yml b/changelogs/unreleased/gt-use-gl-tooltip-directive.yml new file mode 100644 index 00000000000..91fdb73e3c6 --- /dev/null +++ b/changelogs/unreleased/gt-use-gl-tooltip-directive.yml @@ -0,0 +1,5 @@ +--- +title: Replace tooltip directive with gl-tooltip diretive in badges, cycle analytics, and diffs +merge_request: 22770 +author: George Tsiolis +type: performance |