1 files changed, 32 insertions, 53 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
index adef5d94624..da34a7ee19b 100644
--- a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
+++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    GlIcon,
+    GlDropdown,
+    GlDropdownItem,
     TimeAgo,
   },
   props: {
@@ -22,57 +23,35 @@ export default {
 </script>
 
 <template>
-  <span class="dropdown inline">
-    <a
-      class="dropdown-menu-toggle btn btn-default w-100"
-      data-toggle="dropdown"
-      aria-expanded="false"
+  <gl-dropdown :text="selectedVersionName" data-qa-selector="dropdown_content">
+    <gl-dropdown-item
+      v-for="version in versions"
+      :key="version.id"
+      :class="{
+        'is-active': version.selected,
+      }"
+      :is-check-item="true"
+      :is-checked="version.selected"
+      :href="version.href"
     >
-      <span> {{ selectedVersionName }} </span>
-      <gl-icon :size="12" name="angle-down" class="position-absolute" />
-    </a>
-    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
-      <div class="dropdown-content" data-qa-selector="dropdown_content">
-        <ul>
-          <li v-for="version in versions" :key="version.id">
-            <a :class="{ 'is-active': version.selected }" :href="version.href">
-              <div>
-                <strong>
-                  {{ version.versionName }}
-                  <template v-if="version.isHead">{{
-                    s__('DiffsCompareBaseBranch|(HEAD)')
-                  }}</template>
-                  <template v-else-if="version.isBase">{{
-                    s__('DiffsCompareBaseBranch|(base)')
-                  }}</template>
-                </strong>
-              </div>
-              <div>
-                <small class="commit-sha"> {{ version.short_commit_sha }} </small>
-              </div>
-              <div>
-                <small>
-                  <template v-if="version.commitsText">
-                    {{ version.commitsText }}
-                  </template>
-                  <time-ago
-                    v-if="version.created_at"
-                    :time="version.created_at"
-                    class="js-timeago"
-                  />
-                </small>
-              </div>
-            </a>
-          </li>
-        </ul>
+      <div>
+        <strong>
+          {{ version.versionName }}
+          <template v-if="version.isHead">{{ s__('DiffsCompareBaseBranch|(HEAD)') }}</template>
+          <template v-else-if="version.isBase">{{ s__('DiffsCompareBaseBranch|(base)') }}</template>
+        </strong>
       </div>
-    </div>
-  </span>
+      <div>
+        <small class="commit-sha"> {{ version.short_commit_sha }} </small>
+      </div>
+      <div>
+        <small>
+          <template v-if="version.commitsText">
+            {{ version.commitsText }}
+          </template>
+          <time-ago v-if="version.created_at" :time="version.created_at" class="js-timeago" />
+        </small>
+      </div>
+    </gl-dropdown-item>
+  </gl-dropdown>
 </template>
-
-<style>
-.dropdown {
-  min-width: 0;
-  max-height: 170px;
-}
-</style>