@gitlab/ui 58.4.0 → 58.5.0

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -41,6 +41,10 @@ describe('GlDisclosureDropdownItem', () => {
       expect(emittedAction).toHaveLength(1);
       expect(emittedAction).toEqual([[item]]);
     });
+
+    it('sets tabIndex on li element', () => {
+      expect(findItem().attributes('tabindex')).toBe('0');
+    });
   });
 
   describe('when item has a `href`', () => {
@@ -82,6 +86,10 @@ describe('GlDisclosureDropdownItem', () => {
       expect(emittedAction).toHaveLength(1);
       expect(emittedAction).toEqual([[item]]);
     });
+
+    it('sets tabIndex on link element', () => {
+      expect(findLink().attributes('tabindex')).toBe('-1');
+    });
   });
 
   describe('when item has an `action`', () => {
@@ -138,6 +146,10 @@ describe('GlDisclosureDropdownItem', () => {
     it('should apply the default classes to the item wrapper', () => {
       expect(findItem().classes()).toEqual(['gl-new-dropdown-item']);
     });
+
+    it('sets tabIndex on link element', () => {
+      expect(findButton().attributes('tabindex')).toBe('-1');
+    });
   });
 
   describe('when item has wrapperClass', () => {
@@ -155,4 +167,25 @@ describe('GlDisclosureDropdownItem', () => {
       expect(findItem().classes()).toContain(TEST_CLASS);
     });
   });
+
+  describe('when item has disabled attribute', () => {
+    const extraAttrs = {
+      disabled: true,
+    };
+    beforeEach(() => {
+      buildWrapper({
+        item: {
+          ...mockItems[1],
+          extraAttrs,
+        },
+      });
+    });
+
+    it('should not set tabIndex to elements', () => {
+      const findButton = () => wrapper.find('button[type="button"].gl-new-dropdown-item-content');
+
+      expect(findItem().attributes('tabindex')).toBeUndefined();
+      expect(findButton().attributes('tabindex')).toBeUndefined();
+    });
+  });
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -55,6 +55,12 @@ export default {
         wrapperClass: item?.wrapperClass,
       };
     },
+    listIndex() {
+      return this.item?.extraAttrs?.disabled ? null : 0;
+    },
+    componentIndex() {
+      return this.item?.extraAttrs?.disabled ? null : -1;
+    },
     wrapperListeners() {
       const listeners = {
         keydown: this.onKeydown,
@@ -94,7 +100,7 @@ export default {
 
 <template>
   <li
-    tabindex="0"
+    :tabindex="listIndex"
     :class="[$options.ITEM_CLASS, itemComponent.wrapperClass]"
     data-testid="disclosure-dropdown-item"
     v-on="wrapperListeners"
@@ -105,7 +111,7 @@ export default {
         v-bind="itemComponent.attrs"
         ref="item"
         class="gl-new-dropdown-item-content"
-        tabindex="-1"
+        :tabindex="componentIndex"
         v-on="itemComponent.listeners"
       >
         <span class="gl-new-dropdown-item-text-wrapper">

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -4,15 +4,12 @@ import {
   buttonVariantOptions,
   dropdownPlacements,
 } from '../../../../utils/constants';
-import {
-  GlIcon,
-  GlCollapsibleListbox,
-  GlSearchBoxByType,
-  GlButtonGroup,
-  GlButton,
-  GlBadge,
-  GlAvatar,
-} from '../../../../index';
+import GlIcon from '../../icon/icon.vue';
+import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type.vue';
+import GlButtonGroup from '../../button_group/button_group.vue';
+import GlButton from '../../button/button.vue';
+import GlBadge from '../../badge/badge.vue';
+import GlAvatar from '../../avatar/avatar.vue';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import { setStoryTimeout } from '../../../../utils/test_utils';
 import { disableControls } from '../../../../utils/stories_utils';
@@ -26,6 +23,7 @@ import {
 import readme from './listbox.md';
 import { mockOptions, mockGroups, mockUsers } from './mock_data';
 import { flattenedOptions } from './utils';
+import GlCollapsibleListbox from './listbox.vue';
 
 const defaultValue = (prop) => GlCollapsibleListbox.props[prop].default;
 

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -366,7 +366,7 @@ export default {
       immediate: true,
       handler(newSelected) {
         if (Array.isArray(newSelected)) {
-          if (!this.multiple && newSelected.length) {
+          if (process.env.NODE_ENV !== 'production' && !this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
           }
           this.selectedValues = [...newSelected];
@@ -375,27 +375,30 @@ export default {
         }
       },
     },
-    resetButtonLabel: {
-      immediate: true,
-      handler(newResetButtonLabel) {
-        if (process.env.NODE_ENV !== 'production' && newResetButtonLabel && !this.headerText) {
-          throw new Error(
-            'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
-          );
+    ...(process.env.NODE_ENV !== 'production'
+      ? {
+          resetButtonLabel: {
+            immediate: true,
+            handler(newResetButtonLabel) {
+              if (newResetButtonLabel && !this.headerText) {
+                throw new Error(
+                  'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
+                );
+              }
+            },
+          },
+          infiniteScroll: {
+            immediate: true,
+            handler(newValue) {
+              if (newValue && this.items.some((item) => !isOption(item))) {
+                throw new Error(
+                  'Infinite scroll does not support groups. Please set the "infiniteScroll" prop to "false"'
+                );
+              }
+            },
+          },
         }
-      },
-    },
-  },
-  created() {
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      this.infiniteScroll &&
-      this.items.some((item) => !isOption(item))
-    ) {
-      throw new Error(
-        'Infinite scroll does not support groups. Please set the "infiniteScroll" prop to "false"'
-      );
-    }
+      : {}),
   },
   methods: {
     open() {

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

@@ -1,4 +1,5 @@
-import { GlPaginatedList, GlButton } from '../../../index';
+import GlButton from '../button/button.vue';
+import GlPaginatedList from './paginated_list.vue';
 import readme from './paginated_list.md';
 
 const sampleList = [

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

@@ -71,15 +71,6 @@ export const Compact = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
   ...defaults(args),
-  computed: {
-    prevPage() {
-      return Math.max(this.page - 1, 0);
-    },
-    nextPage() {
-      const nextPage = this.page + 1;
-      return nextPage > 3 ? 0 : nextPage;
-    },
-  },
   template: `
     <div class="text-center gl-font-base">
       ${template}
@@ -87,7 +78,13 @@ export const Compact = (args, { argTypes }) => ({
     </div>
   `,
 });
-Compact.args = generateProps({ page: 1, totalItems: 0, align: alignOptions.center });
+Compact.args = generateProps({
+  page: 1,
+  prevPage: 0,
+  nextPage: 2,
+  totalItems: 0,
+  align: alignOptions.center,
+});
 
 export const LinkBased = (args, { argTypes }) => ({
   components,

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

@@ -1,5 +1,6 @@
-import { GlPath, GlPopover } from '../../../index';
+import GlPopover from '../popover/popover.vue';
 import { glThemes } from '../../../utils/constants';
+import GlPath from './path.vue';
 import { mockPathItems } from './data';
 import readme from './path.md';
 

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

@@ -1,5 +1,6 @@
-import { GlPopover, GlButton } from '../../../index';
+import GlButton from '../button/button.vue';
 import { popoverPlacements } from '../../../utils/constants';
+import GlPopover from './popover.vue';
 
 const defaultValue = (prop) => GlPopover.props[prop].default;
 

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

@@ -1,5 +1,5 @@
-import { GlProgressBar } from '../../../index';
 import { variantOptions } from '../../../utils/constants';
+import GlProgressBar from './progress_bar.vue';
 
 const generateProps = ({ value = 30, variant = variantOptions.primary } = {}) => ({
   value,

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

@@ -1,5 +1,5 @@
-import { GlSearchBoxByClick } from '../../../index';
 import { disableControls } from '../../../utils/stories_utils';
+import GlSearchBoxByClick from './search_box_by_click.vue';
 import readme from './search_box_by_click.md';
 
 const template = `

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

@@ -1,5 +1,5 @@
-import { GlSearchBoxByType } from '../../../index';
 import { disableControls } from '../../../utils/stories_utils';
+import GlSearchBoxByType from './search_box_by_type.vue';
 import readme from './search_box_by_type.md';
 
 const template = `

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

@@ -1,4 +1,4 @@
-import { GlSegmentedControl } from '../../../index';
+import GlSegmentedControl from './segmented_control.vue';
 import readme from './segmented_control.md';
 
 const defaultOptions = [

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

@@ -1,5 +1,5 @@
-import { GlSkeletonLoader } from '../../../index';
 import { makeContainer } from '../../../utils/story_decorators/container';
+import GlSkeletonLoader from './skeleton_loader.vue';
 import readme from './skeleton_loader.md';
 
 const defaultValue = (prop) => GlSkeletonLoader.props[prop].default;

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

@@ -1,4 +1,4 @@
-import { GlDeprecatedSkeletonLoading } from '../../../index';
+import GlDeprecatedSkeletonLoading from './skeleton_loading.vue';
 import readme from './skeleton_loading.md';
 
 const components = {

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

@@ -1,5 +1,6 @@
-import { GlSorting, GlSortingItem } from '../../../index';
 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 = {

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

@@ -1,5 +1,6 @@
-import { GlSorting, GlSortingItem } from '../../../index';
 import { makeContainer } from '../../../utils/story_decorators/container';
+import GlSortingItem from './sorting_item.vue';
+import GlSorting from './sorting.vue';
 import readme from './sorting_item.md';
 
 const components = {

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

@@ -1,4 +1,5 @@
-import { GlTable, GlFormInput } from '../../../index';
+import GlFormInput from '../form/form_input/form_input.vue';
+import GlTable from './table.vue';
 import readme from './table.md';
 
 const components = { GlTable };

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

@@ -1,6 +1,9 @@
 import range from 'lodash/range';
-import { GlTabs, GlTab, GlScrollableTabs, GlBadge } from '../../../../index';
+import GlBadge from '../../badge/badge.vue';
 import { badgeVariantOptions } from '../../../../utils/constants';
+import GlTab from '../tab/tab.vue';
+import GlScrollableTabs from './scrollable_tabs.vue';
+import GlTabs from './tabs.vue';
 import readme from './tabs.md';
 
 const components = {
@@ -153,7 +156,7 @@ export const WithCounterBadges = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ...components, GlBadge },
   template: wrap(`
-    <gl-tab 
+    <gl-tab
       v-for="variant in $options.badgeVariantOptions"
       :key="variant"
     >

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

@@ -1,5 +1,6 @@
 import Vue from 'vue';
-import { GlToast, GlButton } from '../../../index';
+import GlButton from '../button/button.vue';
+import GlToast from './toast';
 import readme from './toast.md';
 
 Vue.use(GlToast);

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

@@ -1,6 +1,6 @@
-import { GlToggle } from '../../../index';
 import { toggleLabelPosition } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
+import GlToggle from './toggle.vue';
 import readme from './toggle.md';
 
 const defaultValue = (prop) => GlToggle.props[prop].default;

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

@@ -1,5 +1,6 @@
-import { GlToken, GlAvatar } from '../../../index';
+import GlAvatar from '../avatar/avatar.vue';
 import { tokenVariants } from '../../../utils/constants';
+import GlToken from './token.vue';
 
 import readme from './token.md';
 

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

@@ -1,4 +1,6 @@
-import { GlTooltip, GlTooltipDirective, GlButton } from '../../../index';
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlButton from '../button/button.vue';
+import GlTooltip from './tooltip.vue';
 import readme from './tooltip.md';
 
 function makeTooltip(modifier = '') {

package/src/components/charts/chart/chart.stories.js

@@ -1,5 +1,6 @@
-import { GlChart } from '../../../charts';
-import { GlTabs, GlTab } from '../../../index';
+import GlTabs from '../../base/tabs/tabs/tabs.vue';
+import GlTab from '../../base/tabs/tab/tab.vue';
+import GlChart from './chart.vue';
 import readme from './chart.md';
 
 const Template = (args, { argTypes = {} }) => ({

package/src/components/charts/chart/chart.vue

@@ -124,11 +124,15 @@ export default {
   async mounted() {
     await this.$nextTick();
 
-    this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
+    const chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
       renderer: this.renderer,
       width: defaultWidth,
       height: defaultHeight,
     });
+    // FIXME: temporary workaround to ensure compatibility with @vue/compat
+    // eslint-disable-next-line no-underscore-dangle
+    chart.__v_skip = true;
+    this.chart = chart;
 
     if (this.groupId.length) {
       this.chart.group = this.groupId;

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.stories.js

@@ -1,4 +1,4 @@
-import { GlDashboardSkeleton } from '../../../index';
+import GlDashboardSkeleton from './dashboard_skeleton.vue';
 import readme from './dashboard_skeleton.md';
 
 const defaultValue = (prop) => GlDashboardSkeleton.props[prop].default;

package/src/components/regions/empty_state/empty_state.stories.js

@@ -1,6 +1,7 @@
 import securityDashboardEmptyStateSvg from '@gitlab/svgs/dist/illustrations/security-dashboard-empty-state.svg';
 import issuesSvg from '@gitlab/svgs/dist/illustrations/issues.svg';
-import { GlButton, GlEmptyState } from '../../../index';
+import GlButton from '../../base/button/button.vue';
+import GlEmptyState from './empty_state.vue';
 import readme from './empty_state.md';
 
 const template = `

package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js

@@ -1,4 +1,4 @@
-import { GlFriendlyWrap } from '../../../index';
+import GlFriendlyWrap from './friendly_wrap.vue';
 import readme from './friendly_wrap.md';
 
 const components = {

package/src/components/utilities/intersection_observer/intersection_observer.stories.js

@@ -1,4 +1,4 @@
-import { GlIntersectionObserver } from '../../../index';
+import GlIntersectionObserver from './intersection_observer.vue';
 import readme from './intersection_observer.md';
 
 const components = {

package/src/components/utilities/intersperse/intersperse.stories.js

@@ -1,4 +1,4 @@
-import { GlIntersperse } from '../../../index';
+import GlIntersperse from './intersperse.vue';
 import readme from './intersperse.md';
 
 const template = `

package/src/components/utilities/sprintf/sprintf.stories.js

@@ -1,4 +1,6 @@
-import { GlSprintf, GlButton, GlLink } from '../../../index';
+import GlButton from '../../base/button/button.vue';
+import GlLink from '../../base/link/link.vue';
+import GlSprintf from './sprintf.vue';
 import readme from './sprintf.md';
 
 const generateProps = ({ message = 'Written by %{author}', placeholders } = {}) => ({

package/src/components/utilities/truncate/truncate.spec.js

@@ -16,9 +16,12 @@ describe('Truncate component', () => {
     text: 'ee/app/assets/javascripts/vue_shared/src/utils_reports/components/utils/index.js',
   };
 
-  const createComponent = (props) => {
+  const createComponent = ({ classes, ...props } = {}) => {
     wrapper = shallowMount(Truncate, {
       propsData: { ...defaultProps, ...props },
+      attrs: {
+        class: classes,
+      },
     });
   };
 
@@ -107,4 +110,16 @@ describe('Truncate component', () => {
       expect(wrapper.find('.gl-truncate-end').exists()).toBe(true);
     });
   });
+
+  // This tests a workaround for a subtle Vue 2/3 compiler difference.
+  // See https://github.com/vuejs/core/issues/7909.
+  describe('parent classes', () => {
+    beforeEach(() => {
+      createComponent({ classes: 'test-class' });
+    });
+
+    it('applies classes from parent', () => {
+      expect(wrapper.classes()).toContain('test-class');
+    });
+  });
 });

package/src/components/utilities/truncate/truncate.stories.js

@@ -1,4 +1,4 @@
-import { GlTruncate } from '../../../index';
+import GlTruncate from './truncate.vue';
 import { POSITION } from './constants';
 import readme from './truncate.md';
 

package/src/components/utilities/truncate/truncate.vue

@@ -74,7 +74,6 @@ export default {
 </script>
 
 <template>
-  <!-- START  -->
   <span
     v-if="position === $options.POSITION.START"
     v-gl-tooltip="{ disabled: isTooltipDisabled }"
@@ -87,7 +86,6 @@ export default {
     >
   </span>
 
-  <!-- MIDDLE  -->
   <span
     v-else-if="position === $options.POSITION.MIDDLE"
     v-gl-tooltip="{ disabled: isTooltipDisabled }"
@@ -99,7 +97,6 @@ export default {
     ><span class="gl-truncate-start">&lrm;{{ last }}&lrm;</span>
   </span>
 
-  <!-- END  -->
   <span
     v-else
     v-gl-tooltip="{ disabled: isTooltipDisabled }"

package/src/directives/hover_load/hover_load.stories.js

@@ -1,4 +1,4 @@
-import { GlHoverLoadDirective } from '../../index';
+import GlHoverLoadDirective from './hover_load';
 import readme from './hover_load.md';
 
 const directives = {

package/src/directives/outside/outside.stories.js

@@ -1,5 +1,5 @@
-import { GlOutsideDirective } from '../../index';
 import GlButton from '../../components/base/button/button.vue';
+import GlOutsideDirective from './outside';
 import readme from './outside.md';
 
 export const Default = () => ({

package/src/directives/resize_observer/resize_observer.stories.js

@@ -1,4 +1,4 @@
-import { GlResizeObserverDirective as GlResizeObserver } from '../../index';
+import GlResizeObserver from './resize_observer';
 import readme from './resize_observer.md';
 
 const generateProps = ({ elementWidth = '100%', elementHeight = '100%' } = {}) => ({

package/src/directives/safe_html/safe_html.stories.js

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { GlSafeHtmlDirective as GlSafeHtml } from '../../index';
+import GlSafeHtml from './safe_html';
 import readme from './safe_html.md';
 
 const { sanitize } = DOMPurify;