Fixes tooltip overflowing in mini pipeline
This commit is contained in:
parent
93d6f56968
commit
5a7a221f9b
2 changed files with 1 additions and 33 deletions
|
@ -84,10 +84,6 @@ export default {
|
||||||
|
|
||||||
return textBuilder.join(' ');
|
return textBuilder.join(' ');
|
||||||
},
|
},
|
||||||
|
|
||||||
tooltipBoundary() {
|
|
||||||
return this.dropdownLength < 5 ? 'viewport' : null;
|
|
||||||
},
|
|
||||||
/**
|
/**
|
||||||
* Verifies if the provided job has an action path
|
* Verifies if the provided job has an action path
|
||||||
*
|
*
|
||||||
|
@ -108,7 +104,7 @@ export default {
|
||||||
<div class="ci-job-component">
|
<div class="ci-job-component">
|
||||||
<gl-link
|
<gl-link
|
||||||
v-if="status.has_details"
|
v-if="status.has_details"
|
||||||
v-gl-tooltip="{ boundary: tooltipBoundary }"
|
v-gl-tooltip
|
||||||
:href="status.details_path"
|
:href="status.details_path"
|
||||||
:title="tooltipText"
|
:title="tooltipText"
|
||||||
:class="cssClassJobName"
|
:class="cssClassJobName"
|
||||||
|
|
|
@ -139,34 +139,6 @@ describe('pipeline graph job item', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('tooltip placement', () => {
|
|
||||||
it('does not set tooltip boundary by default', () => {
|
|
||||||
component = mountComponent(JobComponent, {
|
|
||||||
job: mockJob,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(component.tooltipBoundary).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('sets tooltip boundary to viewport for small dropdowns', () => {
|
|
||||||
component = mountComponent(JobComponent, {
|
|
||||||
job: mockJob,
|
|
||||||
dropdownLength: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(component.tooltipBoundary).toEqual('viewport');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('does not set tooltip boundary for large lists', () => {
|
|
||||||
component = mountComponent(JobComponent, {
|
|
||||||
job: mockJob,
|
|
||||||
dropdownLength: 7,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(component.tooltipBoundary).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('for delayed job', () => {
|
describe('for delayed job', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
const fifteenMinutesInMilliseconds = 900000;
|
const fifteenMinutesInMilliseconds = 900000;
|
||||||
|
|
Loading…
Reference in a new issue