@gitlab/ui 42.4.1 → 42.7.0

package/src/components/base/form/form_combobox/form_combobox.vue

@@ -31,9 +31,19 @@ export default {
       required: true,
     },
     value: {
-      type: String,
+      type: [String, Object],
       required: true,
     },
+    matchValueToAttr: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -54,6 +64,11 @@ export default {
     showSuggestions() {
       return this.results.length > 0;
     },
+    displayedValue() {
+      return this.matchValueToAttr && this.value[this.matchValueToAttr]
+        ? this.value[this.matchValueToAttr]
+        : this.value;
+    },
   },
   mounted() {
     document.addEventListener('click', this.handleClickOutside);
@@ -112,9 +127,12 @@ export default {
         return;
       }
 
-      const filteredTokens = this.tokenList.filter((token) =>
-        token.toLowerCase().includes(value.toLowerCase())
-      );
+      const filteredTokens = this.tokenList.filter((token) => {
+        if (this.matchValueToAttr) {
+          return token[this.matchValueToAttr].toLowerCase().includes(value.toLowerCase());
+        }
+        return token.toLowerCase().includes(value.toLowerCase());
+      });
 
       if (filteredTokens.length) {
         this.openSuggestions(filteredTokens);
@@ -147,13 +165,14 @@ export default {
     <gl-form-group :label="labelText" :label-for="inputId" :label-sr-only="labelSrOnly">
       <gl-form-input
         :id="inputId"
-        :value="value"
+        :value="displayedValue"
         type="text"
         role="searchbox"
         :autocomplete="showAutocomplete"
         aria-autocomplete="list"
         :aria-controls="suggestionsId"
         aria-haspopup="listbox"
+        :autofocus="autofocus"
         @input="onEntry"
         @keydown.down="onArrowDown"
         @keydown.up="onArrowUp"
@@ -163,11 +182,11 @@ export default {
       />
     </gl-form-group>
 
-    <div
+    <ul
       v-show="showSuggestions && !userDismissedResults"
       :id="suggestionsId"
       data-testid="combobox-dropdown"
-      class="dropdown-menu dropdown-full-width"
+      class="dropdown-menu dropdown-full-width gl-list-style-none gl-pl-0 gl-mb-0 gl-overflow-y-auto"
       :class="{ 'show-dropdown': showSuggestions }"
     >
       <gl-dropdown-item
@@ -179,8 +198,8 @@ export default {
         tabindex="-1"
         @click="selectToken(result)"
       >
-        {{ result }}
+        <slot name="result" :item="result">{{ result }}</slot>
       </gl-dropdown-item>
-    </div>
+    </ul>
   </div>
 </template>

package/src/scss/utilities.scss

@@ -5592,6 +5592,18 @@
 .gl-mt-7\! {
   margin-top: $gl-spacing-scale-7 !important;
 }
+.gl-mt-8 {
+  margin-top: $gl-spacing-scale-8;
+}
+.gl-mt-8\! {
+  margin-top: $gl-spacing-scale-8 !important;
+}
+.gl-mt-9 {
+  margin-top: $gl-spacing-scale-9;
+}
+.gl-mt-9\! {
+  margin-top: $gl-spacing-scale-9 !important;
+}
 .gl-mt-11 {
   margin-top: $gl-spacing-scale-11;
 }
@@ -5742,6 +5754,12 @@
 .gl-mb-8\! {
   margin-bottom: $gl-spacing-scale-8 !important;
 }
+.gl-mb-9 {
+  margin-bottom: $gl-spacing-scale-9;
+}
+.gl-mb-9\! {
+  margin-bottom: $gl-spacing-scale-9 !important;
+}
 .gl-ml-auto {
   margin-left: auto;
 }

package/src/scss/utility-mixins/spacing.scss

@@ -418,6 +418,14 @@
   margin-top: $gl-spacing-scale-7;
 }
 
+@mixin gl-mt-8 {
+  margin-top: $gl-spacing-scale-8;
+}
+
+@mixin gl-mt-9 {
+  margin-top: $gl-spacing-scale-9;
+}
+
 @mixin gl-mt-11 {
   margin-top: $gl-spacing-scale-11;
 }
@@ -518,6 +526,10 @@
   margin-bottom: $gl-spacing-scale-8;
 }
 
+@mixin gl-mb-9 {
+  margin-bottom: $gl-spacing-scale-9;
+}
+
 @mixin gl-ml-auto {
   margin-left: auto;
 }