@gitlab/ui 42.22.0 → 42.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.22.0",
+  "version": "42.23.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "14.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.28.0",
+    "@gitlab/svgs": "2.30.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -96,8 +96,9 @@
     "@storybook/theming": "6.5.9",
     "@storybook/vue": "6.5.9",
     "@vue/test-utils": "1.3.0",
+    "@vue/vue2-jest": "27.0.0",
     "autoprefixer": "^9.7.6",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
@@ -113,7 +114,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
+    "jest-circus": "27.5.1",
+    "jest-environment-jsdom": "27.5.1",
     "jest-raw-loader": "^1.0.1",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
@@ -144,7 +147,6 @@
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
     "vue": "2.6.11",
-    "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",
     "vue-template-compiler": "2.6.11"
   },

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

@@ -64,6 +64,7 @@ const SHAPE = {
   ___.4
   ___.5
 `,
+
   COMPLEX: `
 _.1
 __.2
@@ -149,11 +150,10 @@ describe('GlFormCheckboxTree', () => {
   `('when checking a parent checkbox in a $description tree', ({ shape, boxToCheck }) => {
     let checkbox;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       createWrapper({ options: getOptions(shape) });
       checkbox = wrapper.find(`[data-qa-selector="${QA_PREFIX}${boxToCheck}"]`);
-      checkbox.find('input').trigger('click');
-      return wrapper.vm.$nextTick();
+      await checkbox.find('input').setChecked();
     });
 
     it("checks all of the checkbox's children, if any", () => {
@@ -174,10 +174,11 @@ describe('GlFormCheckboxTree', () => {
   `(
     'when checking child checkboxes in a $description tree',
     ({ shape, boxesToCheck, indeterminateBoxes, checkedParents }) => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createWrapper({ options: getOptions(shape) });
-        boxesToCheck.forEach((box) => findCheckboxInput(findCheckboxByValue(box)).trigger('click'));
-        return wrapper.vm.$nextTick();
+        await Promise.allSettled(
+          boxesToCheck.map((box) => findCheckboxInput(findCheckboxByValue(box)).setChecked())
+        );
       });
 
       it('parents that have remaining unchecked children become indeterminate', () => {
@@ -205,12 +206,11 @@ describe('GlFormCheckboxTree', () => {
   `(
     'when unchecking checkboxes in a $description tree',
     ({ shape, initiallyChecked, boxesToUncheck, indeterminateBoxes, uncheckedBoxes }) => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createWrapper({ options: getOptions(shape), [V_MODEL.PROP]: initiallyChecked });
-        boxesToUncheck.forEach((box) =>
-          findCheckboxInput(findCheckboxByValue(box)).trigger('click')
+        await Promise.allSettled(
+          boxesToUncheck.map((box) => findCheckboxInput(findCheckboxByValue(box)).setChecked(false))
         );
-        return wrapper.vm.$nextTick();
       });
 
       it("unchecks all of the checkbox's children if any", () => {
@@ -253,12 +253,11 @@ describe('GlFormCheckboxTree', () => {
       });
 
       it('once toggled, puts all checkboxes in the correct state', async () => {
-        await toggleAllCheckbox.trigger('click');
-        return wrapper.vm.$nextTick(() => {
-          findCheckboxes().wrappers.forEach((checkbox) => {
-            expect(findCheckboxInput(checkbox).element.checked).toBe(finallyChecked);
-            expect(findCheckboxInput(checkbox).element.indeterminate).toBe(false);
-          });
+        await toggleAllCheckbox.setChecked(finallyChecked);
+
+        findCheckboxes().wrappers.forEach((checkbox) => {
+          expect(findCheckboxInput(checkbox).element.checked).toBe(finallyChecked);
+          expect(findCheckboxInput(checkbox).element.indeterminate).toBe(false);
         });
       });
     }

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_radio/form_radio.spec.js

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import GlFormRadio from './form_radio.vue';
 
 describe('GlFormRadio', () => {
@@ -64,7 +63,6 @@ describe('GlFormRadio', () => {
   describe('when the selected value is changed programmatically', () => {
     beforeEach(() => {
       wrapper.vm.selected = secondOption.value;
-      return nextTick();
     });
 
     it('emits an input event, but not a change event on each radio', () => {
@@ -83,11 +81,14 @@ describe('GlFormRadio', () => {
   describe('when the selected value is changed by the user', () => {
     let radio;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       radio = findRadio(secondOption.value);
 
-      radio.trigger('click');
-      return nextTick();
+      // NOTE: We can't use "setChecked" here because
+      // it sets value programmatically under the hood and this
+      // does not pass value for the "change" event.
+      await radio.trigger('click');
+      await radio.trigger('change');
     });
 
     it('emits an input event on each radio, and a change event on the newly selected radio', () => {

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

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import GlFormRadioGroup from './form_radio_group.vue';
 
 describe('GlFormRadioGroup', () => {
@@ -43,7 +42,6 @@ describe('GlFormRadioGroup', () => {
   describe('when the selected value is changed programmatically', () => {
     beforeEach(() => {
       wrapper.vm.selected = secondOption.value;
-      return nextTick();
     });
 
     it('emits an input event, but not a change event', () => {
@@ -60,14 +58,17 @@ describe('GlFormRadioGroup', () => {
   describe('when the selected value is changed by the user', () => {
     let radio;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       radio = findRadio(secondOption.value);
 
-      radio.trigger('click');
-      return nextTick();
+      // NOTE: We can't use "setChecked" here because
+      // it sets value programmatically under the hood and this
+      // does not pass value for the "change" event.
+      await radio.trigger('click');
+      await radio.trigger('change');
     });
 
-    it('emits an input event and a change event', () => {
+    it('emits an input event and a change event', async () => {
       expect(wrapper.findComponent(GlFormRadioGroup).emitted()).toEqual({
         input: [[secondOption.value]],
         change: [[secondOption.value]],

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/charts/chart/chart.vue

@@ -5,6 +5,12 @@ import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/char
 import createTheme, { themeName } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 
+/**
+ * Allowed values by eCharts
+ * https://echarts.apache.org/en/api.html#echartsInstance.resize
+ */
+const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
+
 export default {
   directives: {
     resizeObserver: GlResizeObserverDirective,
@@ -25,14 +31,16 @@ export default {
       default: false,
     },
     width: {
-      type: Number,
+      type: [Number, String],
       required: false,
       default: null,
+      validator: sizeValidator,
     },
     height: {
-      type: Number,
+      type: [Number, String],
       required: false,
       default: null,
+      validator: sizeValidator,
     },
     groupId: {
       type: String,

package/src/scss/utilities.scss

@@ -6340,6 +6340,16 @@
   margin-bottom: $gl-spacing-scale-5 !important;
   }
 }
+.gl-md-ml-2 {
+  @include gl-media-breakpoint-up(md) {
+  margin-left: $gl-spacing-scale-2;
+  }
+}
+.gl-md-ml-2\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-left: $gl-spacing-scale-2 !important;
+  }
+}
 .gl-md-ml-3 {
   @include gl-media-breakpoint-up(md) {
   margin-left: $gl-spacing-scale-3;

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

@@ -911,6 +911,12 @@
   }
 }
 
+@mixin gl-md-ml-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-2;
+  }
+}
+
 @mixin gl-md-ml-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-ml-3;