diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 02:18:09 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-20 02:18:09 +0300 |
commit | 6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde (patch) | |
tree | dc4d20fe6064752c0bd323187252c77e0a89144b /app/assets/javascripts/work_items/components/work_item_type_icon.vue | |
parent | 9868dae7fc0655bd7ce4a6887d4e6d487690eeed (diff) |
Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_type_icon.vue')
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_type_icon.vue | 20 |
1 files changed, 18 insertions, 2 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_type_icon.vue b/app/assets/javascripts/work_items/components/work_item_type_icon.vue index fd914fa350b..31e75663055 100644 --- a/app/assets/javascripts/work_items/components/work_item_type_icon.vue +++ b/app/assets/javascripts/work_items/components/work_item_type_icon.vue @@ -1,11 +1,14 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { WORK_ITEMS_TYPE_MAP } from '../constants'; export default { components: { GlIcon, }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { workItemType: { type: String, @@ -22,6 +25,11 @@ export default { required: false, default: '', }, + showTooltipOnHover: { + type: Boolean, + required: false, + default: false, + }, }, computed: { iconName() { @@ -32,13 +40,21 @@ export default { workItemTypeName() { return WORK_ITEMS_TYPE_MAP[this.workItemType]?.name; }, + workItemTooltipTitle() { + return this.showTooltipOnHover ? this.workItemTypeName : ''; + }, }, }; </script> <template> <span> - <gl-icon :name="iconName" class="gl-mr-2" /> + <gl-icon + v-gl-tooltip.hover="showTooltipOnHover" + :name="iconName" + :title="workItemTooltipTitle" + class="gl-mr-2 gl-text-gray-500" + /> <span v-if="workItemTypeName" :class="{ 'gl-sr-only': !showText }">{{ workItemTypeName }}</span> </span> </template> |