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

app/assets/javascripts/milestones/components/milestone_combobox.vue

@@ -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 }">
-        {{ $options.translations.noMilestone }}
-      </span>
+    <gl-dropdown-item
+      :is-checked="selectedMilestones.length === 0"
+      is-check-item
+      @click="selectNoMilestone()"
+    >
+      {{ $options.translations.noMilestone }}
     </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>

app/assets/javascripts/milestones/components/milestone_results_section.vue

@@ -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) }">
-          {{ title }}
-        </span>
+      <gl-dropdown-item
+        v-for="{ title } in items"
+        :key="title"
+        :is-checked="isSelectedMilestone(title)"
+        is-check-item
+        @click="$emit('selected', title)"
+      >
+        {{ title }}
       </gl-dropdown-item>
       <gl-dropdown-divider />
     </template>

app/assets/stylesheets/components/milestone_combobox.scss

 .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;
   }

spec/frontend/milestones/components/milestone_combobox_spec.js

@@ -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', () => {