Commit f2884086 authored by Sascha Eggenberger's avatar Sascha Eggenberger Committed by Simon Knox

Release milestones dropdown improvement

Improves the alignment and selected item in darkmode
Replaces the old checkmark.png with the right icon from the
GitLab SVG
parent d821e3bc
......@@ -192,10 +192,12 @@ export default {
@keydown.enter.prevent="onSearchBoxEnter"
/>
<gl-dropdown-item @click="selectNoMilestone()">
<span :class="{ 'gl-pl-6': true, 'selected-item': selectedMilestones.length === 0 }">
<gl-dropdown-item
:is-checked="selectedMilestones.length === 0"
is-check-item
@click="selectNoMilestone()"
>
{{ $options.translations.noMilestone }}
</span>
</gl-dropdown-item>
<gl-dropdown-divider />
......@@ -241,9 +243,10 @@ export default {
v-for="(item, idx) in extraLinks"
:key="idx"
:href="item.url"
:is-check-item="true"
data-testid="milestone-combobox-extra-links"
>
<span class="gl-pl-6">{{ item.text }}</span>
{{ item.text }}
</gl-dropdown-item>
</gl-dropdown>
</template>
......@@ -77,10 +77,14 @@ export default {
</div>
</template>
<template v-else>
<gl-dropdown-item v-for="{ title } in items" :key="title" @click="$emit('selected', title)">
<span class="gl-pl-6" :class="{ 'selected-item': isSelectedMilestone(title) }">
<gl-dropdown-item
v-for="{ title } in items"
:key="title"
:is-checked="isSelectedMilestone(title)"
is-check-item
@click="$emit('selected', title)"
>
{{ title }}
</span>
</gl-dropdown-item>
<gl-dropdown-divider />
</template>
......
.milestone-combobox {
.selected-item {
/* stylelint-disable-next-line function-url-quotes */
background: url(asset_path('checkmark.png')) no-repeat 0 2px;
}
.dropdown-item-space {
padding: 8px 12px;
}
.dropdown-menu.show {
overflow: hidden;
}
......
......@@ -340,7 +340,9 @@ describe('Milestone combobox component', () => {
await nextTick();
expect(
findFirstProjectMilestonesDropdownItem().find('span').classes('selected-item'),
findFirstProjectMilestonesDropdownItem()
.find('svg')
.classes('gl-new-dropdown-item-check-icon'),
).toBe(true);
selectFirstProjectMilestone();
......@@ -348,8 +350,8 @@ describe('Milestone combobox component', () => {
await nextTick();
expect(
findFirstProjectMilestonesDropdownItem().find('span').classes('selected-item'),
).toBe(false);
findFirstProjectMilestonesDropdownItem().find('svg').classes('gl-visibility-hidden'),
).toBe(true);
});
describe('when a project milestones is selected', () => {
......@@ -464,17 +466,19 @@ describe('Milestone combobox component', () => {
await nextTick();
expect(findFirstGroupMilestonesDropdownItem().find('span').classes('selected-item')).toBe(
true,
);
expect(
findFirstGroupMilestonesDropdownItem()
.find('svg')
.classes('gl-new-dropdown-item-check-icon'),
).toBe(true);
selectFirstGroupMilestone();
await nextTick();
expect(findFirstGroupMilestonesDropdownItem().find('span').classes('selected-item')).toBe(
false,
);
expect(
findFirstGroupMilestonesDropdownItem().find('svg').classes('gl-visibility-hidden'),
).toBe(true);
});
describe('when a group milestones is selected', () => {
......
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