Commit d05f4fc2 authored by Martin Wortschack's avatar Martin Wortschack

Apply label color to tokens

- Add background color and
text color to selected
label tokens.
parent 3bb340f2
<script>
import {
GlToken,
GlFilteredSearchToken,
GlFilteredSearchSuggestion,
GlDropdownDivider,
......@@ -11,6 +12,7 @@ import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/cons
export default {
components: {
GlToken,
GlFilteredSearchToken,
GlFilteredSearchSuggestion,
GlDropdownDivider,
......@@ -26,11 +28,40 @@ export default {
type: Object,
required: true,
},
active: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
activeLabel: null,
};
},
computed: {
labels() {
return this.config.labels;
},
containerStyle() {
if (this.activeLabel) {
const { color, text_color } = this.activeLabel;
return { backgroundColor: color, color: text_color };
}
return {};
},
},
watch: {
active: {
immediate: true,
handler(newValue) {
if (!newValue && this.labels) {
this.activeLabel = this.labels.find(l => l.title === this.value?.data);
}
},
},
},
created() {
this.searchLabels(this.value);
......@@ -56,9 +87,17 @@ export default {
v-on="$listeners"
@input="searchLabels"
>
<template #view="{ inputValue }">
<template v-if="config.symbol">{{ config.symbol }}</template
>{{ inputValue }}
<template #view-token="{ inputValue, cssClasses, listeners }">
<gl-token
variant="search-value"
:class="cssClasses"
:style="containerStyle"
data-testid="selected-label"
v-on="listeners"
>
<template v-if="config.symbol">{{ config.symbol }}</template>
{{ activeLabel ? activeLabel.title : inputValue }}
</gl-token>
</template>
<template #suggestions>
<gl-loading-icon v-if="config.isLoading" />
......
---
title: Apply label color to shared Analytics label token
merge_request: 36205
author:
type: other
......@@ -16,9 +16,10 @@ describe('LabelToken', () => {
isLoading: false,
fetchData: jest.fn(),
};
const stubs = {
GlFilteredSearchToken: {
template: `<div><slot name="suggestions"></slot></div>`,
template: `<div><slot name="view-token"></slot><slot name="suggestions"></slot></div>`,
},
};
......@@ -38,6 +39,7 @@ describe('LabelToken', () => {
const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
const findAllLabelSuggestions = () => wrapper.findAll({ ref: 'labelItem' });
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findSelectedLabelToken = () => wrapper.find('[data-testid="selected-label"]');
it('renders a loading icon', () => {
createComponent({ config: { ...defaultConfig, isLoading: true }, value: {} }, { stubs });
......@@ -45,6 +47,22 @@ describe('LabelToken', () => {
expect(findLoadingIcon().exists()).toBe(true);
});
it('renders the selected label', () => {
const selectedLabel = mockLabels[0];
createComponent({ value: { data: selectedLabel.title } });
expect(findSelectedLabelToken().text()).toContain(selectedLabel.title);
});
it("sets the label's background and text color on the gl-token component", () => {
const selectedLabel = mockLabels[0];
createComponent({ value: { data: selectedLabel.title } });
expect(findSelectedLabelToken().attributes('style')).toEqual(
'background-color: rgb(98, 53, 242); color: rgb(255, 255, 255);',
);
});
describe('suggestions', () => {
it('renders a suggestion for each item', () => {
createComponent();
......
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