@gitlab/ui 72.14.0 → 73.0.1

package/dist/utils/play_utils.js

@@ -0,0 +1,11 @@
+import { userEvent } from '@storybook/testing-library';
+
+const triggerBlurEvent = async () => userEvent.pointer([{
+  keys: '[MouseLeft]',
+  coords: {
+    x: 0,
+    y: 0
+  }
+}]);
+
+export { triggerBlurEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.14.0",
+  "version": "73.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,9 +107,12 @@
     "@storybook/addon-a11y": "7.6.10",
     "@storybook/addon-docs": "7.6.10",
     "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
     "@storybook/addon-viewport": "7.6.10",
     "@storybook/builder-webpack5": "7.6.10",
+    "@storybook/jest": "0.2.3",
     "@storybook/test-runner": "0.16.0",
+    "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "7.6.10",
     "@storybook/vue": "7.6.10",
     "@storybook/vue-webpack5": "7.6.10",

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

@@ -1,7 +1,6 @@
 import GlDropdown from '../dropdown/dropdown.vue';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import GlSorting from '../sorting/sorting.vue';
-import GlSortingItem from '../sorting/sorting_item.vue';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -501,15 +500,31 @@ BadgeWithSROnlyText.parameters = { controls: { disable: true } };
 
 export const SortingDropdownSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { GlSorting, GlSortingItem },
+  components: { GlSorting },
   template: `
-    <gl-sorting text="Sorting options">
-      <gl-sorting-item active>First item</gl-sorting-item>
-      <gl-sorting-item>Second item</gl-sorting-item>
-      <gl-sorting-item>Last item</gl-sorting-item>
-    </gl-sorting>
+    <gl-sorting
+      text="Sorting options"
+      :sort-options="sortOptions"
+      sort-by="first"
+    />
   `,
 });
+SortingDropdownSplitButton.args = {
+  sortOptions: [
+    {
+      value: 'first',
+      text: 'First item',
+    },
+    {
+      value: 'second',
+      text: 'Second item',
+    },
+    {
+      value: 'last',
+      text: 'Last item',
+    },
+  ],
+};
 SortingDropdownSplitButton.parameters = { controls: { disable: true } };
 
 export default {

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

@@ -1,4 +1,6 @@
 import last from 'lodash/last';
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';
@@ -451,9 +453,6 @@ export const WithHistoryItems = () => ({
       return typeof val === 'string';
     },
   },
-  mounted() {
-    this.$nextTick(() => this.$el.querySelector('.gl-dropdown-toggle').click());
-  },
   template: `
     <div>
       {{ value }}
@@ -471,6 +470,14 @@ export const WithHistoryItems = () => ({
     </div>
   `,
 });
+WithHistoryItems.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button', { name: 'Toggle history' });
+  await userEvent.click(button);
+  await waitFor(() =>
+    expect(within(document).getByRole('menu', { name: 'Toggle history' })).toBeVisible()
+  );
+};
 
 export const WithFriendlyText = () => ({
   components,

package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js

@@ -1,3 +1,4 @@
+import { userEvent, within } from '@storybook/testing-library';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';
@@ -20,9 +21,6 @@ export const Default = () => ({
       );
     },
   },
-  mounted() {
-    this.$refs.suggestions.nextItem();
-  },
   template: `
       <div>
         <button @click="$refs.suggestions.prevItem()">prev</button>
@@ -36,6 +34,11 @@ export const Default = () => ({
       </div>
     `,
 });
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button', { name: 'next' });
+  await userEvent.click(button);
+};
 
 export default {
   title: 'base/filtered-search/suggestion-list',

package/src/components/base/filtered_search/filtered_search_term.stories.js

@@ -1,5 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { triggerBlurEvent } from '../../../utils/play_utils';
 import { provide } from './common_story_options';
 import readme from './filtered_search_term.md';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
@@ -26,9 +27,6 @@ export const Default = (_args, { argTypes }) => ({
       availableTokens,
     };
   },
-  mounted() {
-    this.$nextTick(() => document.activeElement.blur());
-  },
   template: `
       <div>
         <div> {{ value.data }} </div>
@@ -47,6 +45,7 @@ export const Default = (_args, { argTypes }) => ({
     `,
 });
 Default.args = generateProps();
+Default.play = triggerBlurEvent;
 
 export default {
   title: 'base/filtered-search/term',

package/src/components/base/filtered_search/filtered_search_token.stories.js

@@ -1,5 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { triggerBlurEvent } from '../../../utils/play_utils';
 import GlIcon from '../icon/icon.vue';
 import GlDatepicker from '../datepicker/datepicker.vue';
 import { provide } from './common_story_options';
@@ -30,11 +31,6 @@ export const Default = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -58,6 +54,7 @@ export const Default = (args, { argTypes }) => ({
   `,
 });
 Default.args = generateProps();
+Default.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
@@ -80,11 +77,6 @@ export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -108,6 +100,7 @@ export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
   `,
 });
 WithCustomOperatorsOptions.args = generateProps();
+WithCustomOperatorsOptions.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithStaticOptions = (args, { argTypes }) => ({
@@ -130,11 +123,6 @@ export const WithStaticOptions = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -153,6 +141,7 @@ export const WithStaticOptions = (args, { argTypes }) => ({
   `,
 });
 WithStaticOptions.args = generateProps();
+WithStaticOptions.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
@@ -178,11 +167,6 @@ export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
       },
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      document.activeElement.blur();
-    });
-  },
   template: `
     <div>
       <div> {{ value }} </div>
@@ -200,6 +184,7 @@ export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
   `,
 });
 WithDataSegmentInputAttributes.args = generateProps();
+WithDataSegmentInputAttributes.play = triggerBlurEvent;
 
 export default {
   title: 'base/filtered-search/token',

package/src/components/base/filtered_search/filtered_search_token_segment.stories.js

@@ -1,5 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { triggerBlurEvent } from '../../../utils/play_utils';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';
 import readme from './filtered_search_token_segment.md';
@@ -38,9 +39,6 @@ export const Default = (args, { argTypes }) => ({
       value: 'demo1',
     };
   },
-  mounted() {
-    this.$nextTick(() => document.activeElement.blur());
-  },
   template: `
     <div>
       <div>v-model value: {{ value }} </div>
@@ -63,6 +61,7 @@ export const Default = (args, { argTypes }) => ({
   `,
 });
 Default.args = generateProps();
+Default.play = triggerBlurEvent;
 
 // eslint-disable-next-line no-unused-vars
 export const WithStaticOptions = (args, { argTypes }) => ({
@@ -77,9 +76,6 @@ export const WithStaticOptions = (args, { argTypes }) => ({
       staticOptions,
     };
   },
-  mounted() {
-    this.$nextTick(() => document.activeElement.blur());
-  },
   template: `
     <div>
       <div>v-model value: {{ value }} </div>
@@ -99,6 +95,7 @@ export const WithStaticOptions = (args, { argTypes }) => ({
   `,
 });
 WithStaticOptions.args = generateProps();
+WithStaticOptions.play = triggerBlurEvent;
 
 export default {
   title: 'base/filtered-search/token-segment',

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import { stringTokenList, labelText, objectTokenList, actionsList } from './constants';
 import readme from './form_combobox.md';
@@ -41,12 +43,9 @@ Default.args = generateProps();
 export const WithObjectValue = (args, { argTypes }) => ({
   components: { GlFormCombobox },
   props: Object.keys(argTypes),
-  mounted() {
-    this.$nextTick(() => this.$refs.combobox.openSuggestions(objectTokenList));
-  },
   data: () => {
     return {
-      value: ' ',
+      value: '',
     };
   },
   template: `
@@ -68,25 +67,40 @@ export const WithObjectValue = (args, { argTypes }) => ({
 });
 WithObjectValue.args = generateProps({ tokenList: objectTokenList, matchValueToAttr: 'title' });
 WithObjectValue.decorators = [makeContainer({ height: '370px' })];
+WithObjectValue.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const searchbox = canvas.getByRole('searchbox');
+  userEvent.type(searchbox, 'g');
+
+  await waitFor(() =>
+    expect(within(document).getByRole('menuitem', { name: '1 giraffe' })).toBeVisible()
+  );
+};
 
 export const WithActions = (args, { argTypes }) => ({
   components: { GlFormCombobox },
   props: Object.keys(argTypes),
-  mounted() {
-    this.$nextTick(() => this.$refs.combobox.openSuggestions(['dog']));
-  },
+  template,
   data: () => {
     return {
-      value: 'dog',
+      value: '',
     };
   },
-  template,
 });
 WithActions.args = generateProps({
   tokenList: stringTokenList,
   actionList: actionsList,
 });
 WithActions.decorators = [makeContainer({ height: '180px' })];
+WithActions.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const searchbox = canvas.getByRole('searchbox');
+  userEvent.type(searchbox, 'dog');
+
+  await waitFor(() =>
+    expect(within(document).getByRole('menuitem', { name: 'dog' })).toBeVisible()
+  );
+};
 
 export default {
   title: 'base/form/form-combobox',

package/src/components/base/sorting/sorting.md

@@ -78,66 +78,3 @@ export default {
 }
 </script>
 ```
-
-## Deprecated usage
-
-> **NOTE:** This documents the deprecated API, which will be removed in a future major release.
-
-The dropdown part of the sorting component is a standard `gl-dropdown` component, with the items
-exposed as a slot. Inside the `gl-sorting` component, you should add a list of `gl-sorting-item`
-components to construct your sorting options. The check icon will be displayed when a
-`gl-sorting-item` has its `active` prop set to `true`.
-
-The `gl-sorting` component expects its parent component to manage the `text` and `is-ascending`
-props. It does not track these using internal state.
-
-A sort update should be triggered by clicking a `gl-sorting-item` component (and therefore should
-have a `@click` event bound or a `href` prop in the case of navigation) or by clicking the direction
-button. You should bind a function to the `sortDirectionChange` event to receive the new
-`is-ascending` value and re-order your data appropriately.
-
-A complete implementation example might look like:
-
-```html
-<template>
-  <gl-sorting
-    :text="dropdownText"
-    :is-ascending="isAscending"
-    @sortDirectionChange="onDirectionChange"
-  >
-    <gl-sorting-item @click="onSortItemClick('Item 1')">Item 1</gl-sorting-item>
-    <gl-sorting-item @click="onSortItemClick('Item 2')">Item 2</gl-sorting-item>
-    <gl-sorting-item @click="onSortItemClick('Item 3')">Item 3</gl-sorting-item>
-  </gl-sorting>
-</template>
-
-<script>
-import { GlSorting, GlSortingItem } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlSorting,
-    GlSortingItem,
-  },
-  data() {
-    return {
-      isAscending: false,
-      dropdownText: 'Sort...'
-    }
-  },
-  methods: {
-    onSortItemClick(sortByItem) {
-      this.dropdownText = sortByItem;
-      this.sortMyData(sortByItem, this.isAscending);
-    },
-    onDirectionChange(isAscending) {
-      this.isAscending = isAscending;
-      this.sortMyData(this.dropdownText, this.isAscending);
-    },
-    sortMyData(sortBy, isAscending) {
-      // Use sortBy and direction to sort your data
-    },
-  }
-}
-</script>
-```

package/src/components/base/sorting/sorting.spec.js

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { useMockIntersectionObserver } from '~/utils/use_mock_intersection_observer';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
-import GlDropdown from '../dropdown/dropdown.vue';
 import GlIcon from '../icon/icon.vue';
 import GlSorting from './sorting.vue';
 
@@ -18,7 +17,6 @@ describe('sorting component', () => {
 
   const selectDropdownButton = () => wrapper.find('button');
   const selectDirectionButton = () => wrapper.findAll('button').at(1);
-  const selectDropdown = () => wrapper.findComponent(GlDropdown);
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findListboxItem = (text) =>
     wrapper
@@ -35,91 +33,6 @@ describe('sorting component', () => {
     });
   };
 
-  it('should display default text in dropdown', () => {
-    createComponent();
-
-    expect(selectDropdownButton().text()).toBe(defaultDropdownText);
-  });
-
-  it('should have a default sort direction of desc and displays the descending icon', () => {
-    createComponent();
-
-    expect(selectDirectionButton().findComponent(GlIcon).props('name')).toBe('sort-highest');
-  });
-
-  it('should show new text value when passed in as a prop', () => {
-    const newDropdownText = 'Some new text';
-
-    createComponent({
-      text: newDropdownText,
-    });
-
-    expect(selectDropdownButton().text()).toBe(newDropdownText);
-  });
-
-  it('should accept isAscending true as a default sort direction and display the ascending icon', () => {
-    createComponent({
-      isAscending: true,
-    });
-
-    expect(selectDirectionButton().findComponent(GlIcon).props('name')).toBe('sort-lowest');
-  });
-
-  it('should emit the sortDirectionChange event when direction button is clicked', () => {
-    createComponent();
-
-    selectDirectionButton().trigger('click');
-
-    expect(wrapper.emitted('sortDirectionChange')[0]).toEqual([true]);
-  });
-
-  it('should allow custom sort direction text to be applied', () => {
-    const newDirectionTooltip = 'New tooltip text';
-
-    createComponent({
-      sortDirectionToolTip: newDirectionTooltip,
-    });
-
-    expect(selectDirectionButton().attributes('title')).toBe(newDirectionTooltip);
-    expect(selectDirectionButton().attributes('aria-label')).toBe(newDirectionTooltip);
-  });
-
-  it('adds classes passed in `dropdownClass` prop to dropdown', () => {
-    createComponent({
-      dropdownClass: 'foo-bar',
-    });
-
-    expect(selectDropdown().classes()).toContain('foo-bar');
-  });
-
-  it('adds classes passed in `dropdownToggleClass` prop to dropdown toggle', () => {
-    createComponent({
-      dropdownToggleClass: 'foo-bar',
-    });
-
-    expect(selectDropdownButton().classes()).toEqual(expect.arrayContaining(['foo-bar']));
-  });
-
-  it('adds classes passed in `sortDirectionToggleClass` prop to sort direction toggle', () => {
-    createComponent({
-      sortDirectionToggleClass: 'foo-bar',
-    });
-
-    expect(selectDirectionButton().classes()).toEqual(
-      expect.arrayContaining(['sorting-direction-button', 'foo-bar'])
-    );
-  });
-
-  it('sets aria-label of sort direction button', async () => {
-    createComponent();
-
-    expect(selectDirectionButton().attributes('aria-label')).toBe('Sort direction: descending');
-
-    await wrapper.setProps({ isAscending: true });
-
-    expect(selectDirectionButton().attributes('aria-label')).toBe('Sort direction: ascending');
-  });
-
   describe('using listbox', () => {
     useMockIntersectionObserver();
 
@@ -129,6 +42,16 @@ describe('sorting component', () => {
       expect(selectDropdownButton().text()).toBe(defaultDropdownText);
     });
 
+    it('should show new text value when passed in as a prop', () => {
+      const newDropdownText = 'Some new text';
+
+      createComponent({
+        text: newDropdownText,
+      });
+
+      expect(selectDropdownButton().text()).toBe(newDropdownText);
+    });
+
     it('should use the selected sort option text in dropdown if text is not given', () => {
       createComponent({ text: null, sortOptions: [{ value: 0, text: 'Foo' }], sortBy: 0 });
 
@@ -194,6 +117,7 @@ describe('sorting component', () => {
       });
 
       expect(selectDirectionButton().attributes('title')).toBe(newDirectionTooltip);
+      expect(selectDirectionButton().attributes('aria-label')).toBe(newDirectionTooltip);
     });
 
     it('adds classes passed in `dropdownClass` prop to dropdown', () => {

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

@@ -1,11 +1,11 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import { makeContainer } from '../../../utils/story_decorators/container';
-import GlSortingItem from './sorting_item.vue';
 import GlSorting from './sorting.vue';
 import readme from './sorting.md';
 
 const components = {
   GlSorting,
-  GlSortingItem,
 };
 
 const propDefault = (prop) => GlSorting.props[prop].default;
@@ -33,59 +33,24 @@ const generateProps = ({
 const template = `
   <gl-sorting
     :text="text"
+    :sort-options="sortOptions"
+    :sort-by="sortBy"
     :is-ascending="isAscending"
     :sort-direction-tool-tip="sortDirectionToolTip"
     :dropdown-class="dropdownClass"
     :dropdown-toggle-class="dropdownToggleClass"
     :sort-direction-toggle-class="sortDirectionToggleClass"
-  >
-    <gl-sorting-item active>First item</gl-sorting-item>
-    <gl-sorting-item>Second item</gl-sorting-item>
-    <gl-sorting-item>Last item</gl-sorting-item>
-  </gl-sorting>`;
+  />
+`;
 
 const Template = (args) => ({
   components,
   props: Object.keys(args),
-  mounted() {
-    this.$nextTick(() => this.$el.querySelector('.gl-dropdown-toggle').click());
-  },
   template,
 });
 
 export const Default = Template.bind({});
 Object.assign(Default, {
-  args: generateProps(),
-  parameters: {
-    controls: {
-      // These props/events only apply when using the listbox form, so don't
-      // show their controls.
-      exclude: ['sortBy', 'sortOptions', 'sortByChange'],
-    },
-  },
-});
-
-export const UsingListbox = (args) => ({
-  components,
-  props: Object.keys(args),
-  mounted() {
-    // The first button is the dropdown trigger.
-    this.$nextTick(() => this.$el.querySelector('button').click());
-  },
-  template: `
-    <gl-sorting
-      :text="text"
-      :sort-options="sortOptions"
-      :sort-by="sortBy"
-      :is-ascending="isAscending"
-      :sort-direction-tool-tip="sortDirectionToolTip"
-      :dropdown-class="dropdownClass"
-      :dropdown-toggle-class="dropdownToggleClass"
-      :sort-direction-toggle-class="sortDirectionToggleClass"
-    />
-  `,
-});
-Object.assign(UsingListbox, {
   args: generateProps({
     text: '',
     sortOptions: [
@@ -104,13 +69,14 @@ Object.assign(UsingListbox, {
     ],
     sortBy: 'first',
   }),
-  parameters: {
-    controls: {
-      // The default slot is deprecated, so don't show it in the controls.
-      exclude: ['default'],
-    },
-  },
+  parameters: {},
 });
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByTestId('base-dropdown-toggle');
+  await userEvent.click(button);
+  await waitFor(() => expect(canvas.getByRole('listbox')).toBeVisible());
+};
 
 export default {
   title: 'base/sorting',