diff options
| author | Martin Hanzel <mhanzel@gitlab.com> | 2019-06-26 15:04:59 +0200 |
|---|---|---|
| committer | Martin Hanzel <mhanzel@gitlab.com> | 2019-06-26 19:27:51 +0200 |
| commit | 14073d1b622d9220eb99a2ab2b13a12fbccb4a75 (patch) | |
| tree | 01788766c82fbeb25bdda2d44cc0cf7e1c44ac39 | |
| parent | 0d074e24798572896fa69524f09fb828bd8a3960 (diff) | |
| download | gitlab-ce-mh/related-issues-design-ce.tar.gz | |
Change a tooltip to gl-tooltipmh/related-issues-design-ce
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue | 53 | ||||
| -rw-r--r-- | spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js | 2 |
2 files changed, 32 insertions, 23 deletions
diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue index 225ee88589c..eb0f666422f 100644 --- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue +++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue @@ -1,6 +1,6 @@ <script> import '~/commons/bootstrap'; -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltip, GlTooltipDirective } from '@gitlab/ui'; import { sprintf } from '~/locale'; import IssueMilestone from '../../components/issue/issue_milestone.vue'; import IssueAssignees from '../../components/issue/issue_assignees.vue'; @@ -13,6 +13,7 @@ export default { IssueMilestone, IssueAssignees, CiIcon, + GlTooltip, }, directives: { GlTooltip: GlTooltipDirective, @@ -58,16 +59,20 @@ export default { <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap"> <!-- Title area: Status icon (XL) and title --> <div class="item-title d-flex align-items-center mb-xl-0"> - <icon - v-if="hasState" - v-tooltip - :css-classes="iconClass" - :name="iconName" - :size="16" - :title="stateTitle" - :aria-label="state" - data-html="true" - /> + <span ref="iconElementXL"> + <icon + v-if="hasState" + ref="iconElementXL" + :css-classes="iconClass" + :name="iconName" + :size="16" + :title="stateTitle" + :aria-label="state" + /> + </span> + <gl-tooltip :target="() => $refs.iconElementXL"> + <span v-html="stateTitle"></span> + </gl-tooltip> <icon v-if="confidential" v-gl-tooltip @@ -92,16 +97,20 @@ export default { <div class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2" > - <icon - v-if="hasState" - v-tooltip - :css-classes="iconClass" - :name="iconName" - :title="stateTitle" - :aria-label="state" - data-html="true" - class="d-xl-none" - /> + <span ref="iconElement"> + <icon + v-if="hasState" + :css-classes="iconClass" + :name="iconName" + :title="stateTitle" + :aria-label="state" + data-html="true" + class="d-xl-none" + /> + </span> + <gl-tooltip :target="() => this.$refs.iconElement"> + <span v-html="stateTitle"></span> + </gl-tooltip> <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{ itemPath }}</span> @@ -147,7 +156,7 @@ export default { <button v-if="canRemove" ref="removeButton" - v-tooltip + v-gl-tooltip :disabled="removeDisabled" type="button" class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button mr-xl-0 align-self-xl-center" diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js index e6e6d943a76..b85e2673624 100644 --- a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js +++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js @@ -88,7 +88,7 @@ describe('RelatedIssuableItem', () => { }); it('renders state title', () => { - const stateTitle = tokenState.attributes('data-original-title'); + const stateTitle = tokenState.attributes('title'); const formatedCreateDate = formatDate(props.createdAt); expect(stateTitle).toContain('<span class="bold">Opened</span>'); |