@gitlab/ui 42.20.0 → 42.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.20.0",
+  "version": "42.22.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -81,9 +81,9 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "13.1.0",
+    "@gitlab/eslint-plugin": "14.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.26.0",
+    "@gitlab/svgs": "2.28.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/alert/alert.vue

@@ -94,6 +94,7 @@ export default {
       return alertVariantIconMap[this.variant];
     },
     shouldRenderActions() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.actions || this.actionButtons.length);
     },
     actionButtons() {

package/src/components/base/badge/badge.vue

@@ -44,6 +44,7 @@ export default {
   },
   computed: {
     hasIconOnly() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.icon && Object.keys(this.$slots).length === 0);
     },
     role() {

package/src/components/base/button/button.vue

@@ -74,6 +74,7 @@ export default {
       return this.icon !== '';
     },
     hasIconOnly() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Object.keys(this.$slots).length === 0 && this.hasIcon;
     },
     isButtonDisabled() {
@@ -111,6 +112,7 @@ export default {
     },
   },
   mounted() {
+    // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
     if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
       logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.');
     }

package/src/components/base/carousel/carousel.vue

@@ -10,6 +10,7 @@ export default {
 </script>
 <template>
   <b-carousel v-bind="$attrs" v-on="$listeners">
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/carousel/carousel_slide.vue

@@ -9,6 +9,7 @@ export default {
 </script>
 <template>
   <b-carousel-slide v-bind="$attrs" v-on="$listeners">
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/drawer/drawer.vue

@@ -57,6 +57,7 @@ export default {
       };
     },
     shouldRenderFooter() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.footer);
     },
     variantClass() {

package/src/components/base/dropdown/dropdown.vue

@@ -202,6 +202,7 @@ export default {
   },
   methods: {
     hasSlotContents(slotName) {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots[slotName]);
     },
     show(...args) {

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -118,6 +118,7 @@ export default {
     },
 
     hasOptionsOrSuggestions() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return this.options?.length || this.$slots.suggestions;
     },
 

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

@@ -1,9 +1,5 @@
 .gl-form-combobox {
-  .dropdown-full-width {
-    @include gl-w-full;
-  }
-
-  .show-dropdown {
+  .gl-form-combobox-inner {
     max-height: $gl-max-dropdown-max-height;
   }
 }

package/src/components/base/form/form_combobox/form_combobox.spec.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import GlFormInput from '../form_input/form_input.vue';
@@ -65,7 +66,9 @@ describe('GlFormCombobox', () => {
   const findInput = () => wrapper.findComponent(GlFormInput);
   const findInputValue = () => findInput().element.value;
   const setInput = (val) => findInput().setValue(val);
-  const arrowDown = () => findInput().trigger('keydown.down');
+  const arrowDown = () => findDropdown().trigger('keydown.down');
+  const arrowUp = () => findDropdown().trigger('keydown.up');
+  const enter = () => wrapper.find('[aria-selected="true"]').trigger('keydown.enter');
   const findFirstAction = () => wrapper.find('[data-testid="combobox-action"]');
 
   beforeAll(() => {
@@ -128,8 +131,10 @@ describe('GlFormCombobox', () => {
       describe('on down arrow + enter', () => {
         it('selects the next item in the list and closes the dropdown', async () => {
           await setInput(partialToken);
-          findInput().trigger('keydown.down');
-          await findInput().trigger('keydown.enter');
+          arrowDown();
+          await nextTick();
+          enter();
+          await nextTick();
 
           if (valueType === 'string') {
             expect(findInputValue()).toBe(partialTokenMatch[0]);
@@ -141,7 +146,9 @@ describe('GlFormCombobox', () => {
         it('loops to the top when it reaches the bottom', async () => {
           await setInput(partialToken);
           doTimes(findDropdownOptions().length + 1, arrowDown);
-          await findInput().trigger('keydown.enter');
+          await nextTick();
+          enter();
+          await nextTick();
 
           if (valueType === 'string') {
             expect(findInputValue()).toBe(partialTokenMatch[0]);
@@ -157,8 +164,10 @@ describe('GlFormCombobox', () => {
 
           await wrapper.vm.$nextTick();
           doTimes(3, arrowDown);
-          findInput().trigger('keydown.up');
-          findInput().trigger('keydown.enter');
+          arrowUp();
+          await nextTick();
+          enter();
+          await nextTick();
 
           await wrapper.vm.$nextTick();
 
@@ -172,9 +181,11 @@ describe('GlFormCombobox', () => {
 
         it('loops to the bottom when it reaches the top', async () => {
           await setInput(partialToken);
-          findInput().trigger('keydown.down');
-          findInput().trigger('keydown.up');
-          await findInput().trigger('keydown.enter');
+          arrowDown();
+          arrowUp();
+          await nextTick();
+          enter();
+          await nextTick();
 
           if (valueType === 'string') {
             expect(findInputValue()).toBe(partialTokenMatch[partialTokenMatch.length - 1]);
@@ -187,11 +198,11 @@ describe('GlFormCombobox', () => {
       });
 
       describe('on enter with no item highlighted', () => {
-        it('does not select any item and closes the dropdown', async () => {
+        it('does nothing', async () => {
           await setInput(partialToken);
           await findInput().trigger('keydown.enter');
           expect(findInputValue()).toBe(partialToken);
-          expect(findDropdown().isVisible()).toBe(false);
+          expect(findDropdown().isVisible()).toBe(true);
         });
       });
 
@@ -268,9 +279,10 @@ describe('GlFormCombobox', () => {
 
     it('keyboard navigation and executes function on enter', async () => {
       await setInput('dog');
-      findInput().trigger('keydown.down');
-      findInput().trigger('keydown.down');
-      await findInput().trigger('keydown.enter');
+      doTimes(2, arrowDown);
+      await nextTick();
+      enter();
+      await nextTick();
 
       expect(actionSpy).toHaveBeenCalled();
       expect(findDropdown().isVisible()).toBe(false);

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

@@ -54,6 +54,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Placeholder text for input field
+     */
+    placeholder: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -88,16 +96,8 @@ export default {
   },
   watch: {
     tokenList(newList) {
-      const filteredTokens = newList.filter((token) => {
-        if (this.matchValueToAttr) {
-          // For API driven tokens, we don't need extra filtering
-          return token;
-        }
-        return token.toLowerCase().includes(this.value.toLowerCase());
-      });
-
-      if (filteredTokens.length) {
-        this.openSuggestions(filteredTokens);
+      if (newList.length) {
+        this.openSuggestions(newList);
       } else {
         this.results = [];
         this.arrowCounter = -1;
@@ -121,35 +121,33 @@ export default {
         this.closeSuggestions();
       }
     },
-    onArrowDown() {
-      const newCount = this.arrowCounter + 1;
+    focusItem(index) {
+      this.$refs.suggestionsMenu
+        .querySelectorAll('.gl-new-dropdown-item')
+        [index]?.querySelector('button')
+        .focus();
+    },
+    onArrowDown(e) {
+      e.preventDefault();
+      let newCount = this.arrowCounter + 1;
 
       if (newCount >= this.allItems.length) {
-        this.arrowCounter = 0;
-        return;
+        newCount = 0;
       }
 
       this.arrowCounter = newCount;
-      this.$refs.results[newCount]?.$el.scrollIntoView(false);
+      this.focusItem(newCount);
     },
-    onArrowUp() {
-      const newCount = this.arrowCounter - 1;
+    onArrowUp(e) {
+      e.preventDefault();
+      let newCount = this.arrowCounter - 1;
 
       if (newCount < 0) {
-        this.arrowCounter = this.allItems.length - 1;
-        return;
+        newCount = this.allItems.length - 1;
       }
 
       this.arrowCounter = newCount;
-      this.$refs.results[newCount]?.$el.scrollIntoView(true);
-    },
-    onEnter() {
-      const focusedItem = this.allItems[this.arrowCounter] || this.value;
-      if (focusedItem.fn) {
-        this.selectAction(focusedItem);
-      } else {
-        this.selectToken(focusedItem);
-      }
+      this.focusItem(newCount);
     },
     onEsc() {
       if (!this.showSuggestions) {
@@ -198,6 +196,9 @@ export default {
       this.$emit('input', this.value);
       this.closeSuggestions();
     },
+    resetCounter() {
+      this.arrowCounter = -1;
+    },
   },
 };
 </script>
@@ -219,10 +220,11 @@ export default {
         :aria-controls="suggestionsId"
         aria-haspopup="listbox"
         :autofocus="autofocus"
+        :placeholder="placeholder"
         @input="onEntry"
+        @focus="resetCounter"
         @keydown.down="onArrowDown"
         @keydown.up="onArrowUp"
-        @keydown.enter.prevent="onEnter"
         @keydown.esc.stop="onEsc"
         @keydown.tab="closeSuggestions"
       />
@@ -231,8 +233,12 @@ export default {
     <ul
       v-show="showSuggestions && !userDismissedResults"
       :id="suggestionsId"
+      ref="suggestionsMenu"
       data-testid="combobox-dropdown"
-      class="dropdown-menu dropdown-full-width show-dropdown gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column"
+      class="dropdown-menu gl-w-full gl-form-combobox-inner gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column"
+      @keydown.down="onArrowDown"
+      @keydown.up="onArrowUp"
+      @keydown.esc.stop="onEsc"
     >
       <li class="gl-overflow-y-auto show-dropdown">
         <ul class="gl-list-style-none gl-pl-0 gl-mb-0">
@@ -241,10 +247,10 @@ export default {
             ref="results"
             :key="i"
             role="option"
-            :class="{ 'gl-bg-gray-50': i === arrowCounter }"
             :aria-selected="i === arrowCounter"
             tabindex="-1"
             @click="selectToken(result)"
+            @keydown.enter.native="selectToken(result)"
           >
             <!-- @slot The suggestion result item to display. -->
             <slot name="result" :item="result">{{ result }}</slot>
@@ -258,11 +264,11 @@ export default {
             v-for="(action, i) in actionList"
             :key="i + resultsLength"
             role="option"
-            :class="{ 'gl-bg-gray-50': i + resultsLength === arrowCounter }"
             :aria-selected="i + resultsLength === arrowCounter"
             tabindex="-1"
             data-testid="combobox-action"
             @click="selectAction(action)"
+            @keydown.enter.native="selectAction(action)"
           >
             <!-- @slot The action item to display. -->
             <slot name="action" :item="action">{{ action.label }}</slot>

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

@@ -48,6 +48,7 @@ export default {
       return defaultClass;
     },
     hasLabelDescription() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.labelDescription || this.$slots['label-description']);
     },
   },
@@ -67,6 +68,7 @@ export default {
       </gl-form-text>
     </template>
 
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/form/form_select/form_select.scss

@@ -21,6 +21,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-border-none;
   @include gl-appearance-none;
   @include gl-text-truncate;
+  @include gl-bg-no-repeat;
   background-image: url($gl-icon-select-chevron-down);
 
   &:focus,

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

@@ -10,6 +10,7 @@ export default {
 </script>
 <template>
   <b-form-select class="gl-form-select" v-bind="$attrs" v-on="$listeners">
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/modal/modal.vue

@@ -88,9 +88,11 @@ export default {
   },
   computed: {
     shouldRenderModalOk() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots['modal-ok']);
     },
     shouldRenderModalCancel() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots['modal-cancel']);
     },
     shouldRenderModalFooter() {
@@ -98,6 +100,7 @@ export default {
         this.actionCancel ||
           this.actionSecondary ||
           this.actionPrimary ||
+          // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
           this.$slots['modal-footer']
       );
     },

package/src/components/base/table/table.scss

@@ -37,6 +37,10 @@ table.gl-table {
     }
   }
 
+  caption {
+    @include gl-pt-2;
+  }
+
   @mixin gl-tmp-stacked-override {
     tbody > tr {
       &::after {

package/src/components/base/table/table.stories.js

@@ -18,10 +18,16 @@ const tableItems = [
   },
 ];
 
-const generateProps = ({ fixed = false, footClone = false, stacked = false } = {}) => ({
+const generateProps = ({
+  fixed = false,
+  footClone = false,
+  stacked = false,
+  caption = '',
+} = {}) => ({
   fixed,
   footClone,
   stacked,
+  caption,
 });
 
 export const Default = (args, { argTypes }) => ({
@@ -37,7 +43,11 @@ export const Default = (args, { argTypes }) => ({
     hover
     selectable
     selected-variant="primary"
-  />
+  >
+    <template v-if="caption" #table-caption>
+      {{ caption }}
+    </template>
+  </gl-table>
 `,
   fields: [
     {

package/src/components/base/tabs/tab/tab.vue

@@ -48,6 +48,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -107,6 +107,7 @@ export default {
     v-bind="passthroughAttrs"
     v-on="$listeners"
   >
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/tabs/tabs/tabs.vue

@@ -221,6 +221,7 @@ export default {
     v-bind="$attrs"
     v-on="listeners"
   >
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/toggle/toggle.vue

@@ -82,6 +82,7 @@ export default {
   },
   computed: {
     shouldRenderHelp() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.help || this.help);
     },
     icon() {

package/src/scss/utilities.scss

@@ -3404,6 +3404,14 @@
   flex-basis: 0 !important;
 }
 
+.gl-flex-basis-third {
+  flex-basis: 33%;
+}
+
+.gl-flex-basis-third\! {
+  flex-basis: 33% !important;
+}
+
 .gl-flex-basis-half {
   flex-basis: 50%;
 }

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

@@ -179,6 +179,10 @@
   flex-basis: 0;
 }
 
+@mixin gl-flex-basis-third {
+  flex-basis: 33%;
+}
+
 @mixin gl-flex-basis-half {
   flex-basis: 50%;
 }