Commit 93fa7a0e authored by Martin Wortschack's avatar Martin Wortschack

Merge branch '38145-fix-scoped-label-text-color' into 'master'

Fix scoped label right text on update sidebar

Closes #38145

See merge request gitlab-org/gitlab!27171
parents e4fae1db 4077ce2f
......@@ -495,6 +495,10 @@ export default class LabelsSelect {
].join(''),
);
const rightLabelTextColor = ({ label, escapeStr }) => {
return escapeStr(label.text_color === '#FFFFFF' ? label.color : label.text_color);
};
const infoIconTemplate = _.template(
[
'<a href="<%= scopedLabelsDocumentationLink %>" class="gl-link gl-label-icon" target="_blank" rel="noopener">',
......@@ -510,7 +514,7 @@ export default class LabelsSelect {
spanOpenTag,
'<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
'</span>',
'<span class="gl-label-text" style="color: <%= escapeStr(label.color) %>;">',
'<span class="gl-label-text" style="color: <%= rightLabelTextColor({ label, escapeStr }) %>;">',
'<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>',
'</span>',
'</a>',
......@@ -536,7 +540,7 @@ export default class LabelsSelect {
'<% _.each(labels, function(label){ %>',
'<% if (isScopedLabel(label) && enableScopedLabels) { %>',
'<span class="d-inline-block position-relative scoped-label-wrapper">',
'<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, infoIconTemplate, scopedLabelsDocumentationLink, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
'<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, rightLabelTextColor, infoIconTemplate, scopedLabelsDocumentationLink, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
'</span>',
'<% } else { %>',
'<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
......@@ -548,6 +552,7 @@ export default class LabelsSelect {
return tpl({
...tplData,
labelTemplate,
rightLabelTextColor,
infoIconTemplate,
scopedLabelTemplate,
tooltipTitleTemplate,
......
......@@ -158,10 +158,6 @@
a:not(.btn) {
color: inherit;
.gl-label-text:hover {
color: inherit;
}
&:hover {
color: $blue-800;
......
......@@ -23,6 +23,16 @@ const mockScopedLabels = [
},
];
const mockScopedLabels2 = [
{
id: 28,
title: 'Foo::Bar2',
description: 'Foobar2',
color: '#FFFFFF',
text_color: '#000000',
},
];
describe('LabelsSelect', () => {
describe('getLabelTemplate', () => {
describe('when normal label is present', () => {
......@@ -108,11 +118,45 @@ describe('LabelsSelect', () => {
expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
`background-color: ${label.color}; color: ${label.text_color};`,
);
expect(
$labelEl
.find('span.gl-label-text')
.last()
.attr('style'),
).toBe(`color: ${label.color};`);
});
it('generated label item has a badge class', () => {
expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
});
});
describe('when scoped label is present, with text color not white', () => {
const label = mockScopedLabels2[0];
let $labelEl;
beforeEach(() => {
$labelEl = $(
LabelsSelect.getLabelTemplate({
labels: mockScopedLabels2,
issueUpdateURL: mockUrl,
enableScopedLabels: true,
scopedLabelsDocumentationLink: 'docs-link',
}),
);
});
it('generated label item template has correct label styles', () => {
expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
`background-color: ${label.color}; color: ${label.text_color};`,
);
expect(
$labelEl
.find('span.gl-label-text')
.last()
.attr('style'),
).toBe(`color: ${label.text_color};`);
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment