@gitlab/ui 72.14.0 → 73.0.1

package/src/components/base/sorting/sorting.vue

@@ -4,7 +4,6 @@ import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
 import { isOption } from '../new_dropdowns/listbox/utils';
-import GlDropdown from '../dropdown/dropdown.vue';
 import { translate } from '../../../utils/i18n';
 
 export default {
@@ -13,7 +12,6 @@ export default {
     GlButton,
     GlButtonGroup,
     GlCollapsibleListbox,
-    GlDropdown,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -33,7 +31,7 @@ export default {
     sortOptions: {
       type: Array,
       required: false,
-      default: null,
+      default: () => [],
       // eslint-disable-next-line unicorn/no-array-callback-reference
       validator: (sortOptions) => sortOptions.every(isOption),
     },
@@ -64,7 +62,7 @@ export default {
       default: null,
     },
     /**
-     * Additional class(es) to apply to the root element of the GlDropdown.
+     * Additional class(es) to apply to the root element of the GlCollapsibleListbox.
      */
     dropdownClass: {
       type: String,
@@ -99,9 +97,6 @@ export default {
         ? translate('GlSorting.sortAscending', 'Sort direction: ascending')
         : translate('GlSorting.sortDescending', 'Sort direction: descending');
     },
-    useListbox() {
-      return Boolean(this.sortOptions);
-    },
     listboxToggleClass() {
       return [
         this.dropdownToggleClass,
@@ -144,7 +139,6 @@ export default {
 <template>
   <gl-button-group class="gl-sorting">
     <gl-collapsible-listbox
-      v-if="useListbox"
       :toggle-text="text"
       :items="sortOptions"
       :selected="sortBy"
@@ -153,18 +147,6 @@ export default {
       placement="right"
       @select="onSortByChanged"
     />
-    <gl-dropdown
-      v-else
-      v-bind="$props"
-      :text="text"
-      category="secondary"
-      :class="dropdownClass"
-      :toggle-class="dropdownToggleClass"
-      right
-    >
-      <!-- @slot Deprecated slot to place the dropdown items, works best with a gl-sorting-item component. -->
-      <slot></slot>
-    </gl-dropdown>
     <gl-button
       v-gl-tooltip
       :title="sortDirectionText"

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import Vue from 'vue';
 import GlButton from '../button/button.vue';
 import GlToast from './toast';
@@ -7,6 +9,13 @@ Vue.use(GlToast);
 
 const components = { GlToast, GlButton };
 
+const play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button');
+  await userEvent.click(button);
+  await waitFor(() => expect(within(document).getByRole('status')).toBeVisible());
+};
+
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components,
@@ -19,12 +28,10 @@ const Template = (args, { argTypes }) => ({
       this.$toast.show('This is the default toast.');
     },
   },
-  mounted() {
-    this.showToast();
-  },
 });
 
 export const Default = Template.bind({});
+Default.play = play;
 
 export const WithActions = () => ({
   components,
@@ -42,10 +49,8 @@ export const WithActions = () => ({
       });
     },
   },
-  mounted() {
-    this.showToast();
-  },
 });
+WithActions.play = play;
 
 export const WithLongContent = () => ({
   components,
@@ -66,10 +71,8 @@ export const WithLongContent = () => ({
       );
     },
   },
-  mounted() {
-    this.showToast();
-  },
 });
+WithLongContent.play = play;
 
 export default {
   title: 'base/toast',

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import readme from './token_selector.md';
 import GlTokenSelector from './token_selector.vue';
 
@@ -45,9 +47,6 @@ const Template = (args, { argTypes }) => ({
   components: { GlTokenSelector },
   props: Object.keys(argTypes),
   template,
-  mounted() {
-    document.querySelector('.gl-token-selector input[type="text"]').focus();
-  },
   data() {
     return {
       filteredDropdownItems: [],
@@ -90,6 +89,12 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.tags = ['skip-visual-test'];
 Default.args = generateProps();
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('textbox');
+  await userEvent.click(button);
+  await waitFor(() => expect(canvas.getByRole('menu')).toBeVisible());
+};
 
 export default {
   title: 'base/token_selector',

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

@@ -1,3 +1,5 @@
+import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button.vue';
 import GlTooltip from './tooltip.vue';
@@ -19,31 +21,39 @@ function makeTooltip(modifier = '') {
       </gl-button>
     </div>
   `,
-    mounted() {
-      this.$nextTick(() => this.$el.querySelector('button').focus());
-    },
   };
 }
 
+const play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button');
+  await userEvent.click(button);
+  await waitFor(() => expect(within(document).getByRole('tooltip')).toBeVisible());
+};
+
 export const TopDefault = (args, argTypes) => ({
   ...makeTooltip(),
   props: Object.keys(argTypes),
 });
+TopDefault.play = play;
 
 export const Right = (args, argTypes) => ({
   ...makeTooltip('.right'),
   props: Object.keys(argTypes),
 });
+Right.play = play;
 
 export const Bottom = (args, argTypes) => ({
   ...makeTooltip('.bottom'),
   props: Object.keys(argTypes),
 });
+Bottom.play = play;
 
 export const Left = (args, argTypes) => ({
   ...makeTooltip('.left'),
   props: Object.keys(argTypes),
 });
+Left.play = play;
 
 // A default export contains higher-level info about the component and the stories' settings.
 export default {

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

@@ -1,4 +1,3 @@
-import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './animated_number.md';
 import GlAnimatedNumber from './animated_number.vue';
 
@@ -31,26 +30,14 @@ const Template = (args, { argTypes }) => ({
   template,
   data() {
     return {
-      isLoading: false,
-      loadTimer: null,
       updatedNumber: this.initialNumber,
     };
   },
   methods: {
-    loadView() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setStoryTimeout(() => {
-        this.isLoading = false;
-      }, 1500);
-    },
     updateNumber() {
       this.updatedNumber = Math.floor(Math.random() * 100);
     },
   },
-  mounted() {
-    this.loadView();
-  },
 });
 
 export const InitialAnimate = Template.bind({});

package/src/index.js

@@ -76,7 +76,6 @@ export { default as GlDatepicker } from './components/base/datepicker/datepicker
 export { default as GlDaterangePicker } from './components/base/daterange_picker/daterange_picker.vue';
 export { default as GlToggle } from './components/base/toggle/toggle.vue';
 export { default as GlSorting } from './components/base/sorting/sorting.vue';
-export { default as GlSortingItem } from './components/base/sorting/sorting_item.vue';
 export { default as GlInfiniteScroll } from './components/base/infinite_scroll/infinite_scroll.vue';
 export { default as GlAlert } from './components/base/alert/alert.vue';
 export { default as GlSegmentedControl } from './components/base/segmented_control/segmented_control.vue';

package/src/scss/utilities.scss

@@ -8957,12 +8957,12 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   margin-bottom: $gl-mb-heading !important;
 }
 
-.gl-heading-0{
+.gl-heading-display{
   @include gl-heading-scale-800;
   margin-bottom: $gl-mb-heading-display;
 }
 
-.gl-heading-0\!{
+.gl-heading-display\!{
   @include gl-heading-scale-800;
   margin-bottom: $gl-mb-heading-display !important;
 }

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

@@ -97,7 +97,7 @@
   margin-bottom: $gl-mb-heading;
 }
 
-@mixin gl-heading-0 {
+@mixin gl-heading-display {
   @include gl-heading-scale-800;
   margin-bottom: $gl-mb-heading-display;
 }

package/src/utils/play_utils.js

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

package/dist/components/base/sorting/sorting_item.js

@@ -1,109 +0,0 @@
-import GlDropdownItem from '../dropdown/dropdown_item';
-import GlIcon from '../icon/icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/**
- * Sorting Item
- *
- * NOTE: This component is deprecated. Instead, use the `sortOptions` prop of
- * `GlSorting`.
- *
- * This is written as a functional component because it is a simple wrapper over
- * the GlDropdownItem component and does not use internal state. Functional
- * components are cheaper to render and often used as wrappers like this. We're
- * not using the <template functional> syntax here because it does not support
- * custom child components wihtout extra work inside GitLab or extra work
- * required by the user.
- */
-
-var script = {
-  name: 'GlSortingItem',
-  functional: true,
-  props: {
-    /**
-     * Adds a check mark next to the item to indicate it is active.
-     */
-    active: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    /**
-     * If given, makes the item a link pointing to the given value. Otherwise,
-     * the item is a button.
-     */
-    href: {
-      type: String,
-      default: null,
-      required: false
-    }
-  },
-  /**
-   * The content of the item.
-   * @slot default
-   */
-  render(createElement, _ref) {
-    let {
-      scopedSlots,
-      data,
-      props = {}
-    } = _ref;
-    const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${props.active ? '' : 'inactive gl-visibility-hidden'}`;
-    const icon = createElement(GlIcon, {
-      class: classNames,
-      attrs: {
-        name: 'mobile-issue-close',
-        size: 16,
-        ariaLabel: 'Selected'
-      }
-    });
-    return createElement(GlDropdownItem, {
-      ...data,
-      attrs: {
-        ...props
-      },
-      scopedSlots: {
-        default: () => {
-          var _scopedSlots$default;
-          return [icon, (_scopedSlots$default = scopedSlots.default) === null || _scopedSlots$default === void 0 ? void 0 : _scopedSlots$default.call(scopedSlots)];
-        }
-      }
-    });
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = undefined;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    {},
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,5 +0,0 @@
-> **NOTE:** This component is deprecated. Instead, use the `sortOptions` prop of `GlSorting`.
-
-The sorting item component is meant to be used for clickable entries inside a `gl-sorting` component.
-This is a wrapper around the `gl-dropdown-item` component and includes a check icon when active,
-and an empty space for alignment when not.

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

@@ -1,65 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlSortingItem from './sorting_item.vue';
-
-describe('sorting item component', () => {
-  let wrapper;
-
-  const sortingItemText = 'Some test text';
-
-  const defaultProps = {};
-
-  const findActiveIcon = () => wrapper.find('.js-active-icon');
-  const findGlDropdownItem = () => wrapper.findComponent(GlDropdownItem);
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(GlSortingItem, {
-      context: {
-        props: {
-          ...defaultProps,
-          ...propsData,
-        },
-      },
-      slots: {
-        default: sortingItemText,
-      },
-      stubs: {
-        GlDropdownItem,
-      },
-    });
-  };
-
-  it('should render and display the supplied text', () => {
-    createComponent();
-
-    expect(wrapper.text()).toBe(sortingItemText);
-  });
-
-  it('does not show the check icon when the active prop is not provided', () => {
-    createComponent();
-
-    expect(findActiveIcon().exists()).toBe(true);
-    expect(findActiveIcon().classes()).toContain('inactive');
-  });
-
-  it('does render a check icon when the active prop is provided', () => {
-    createComponent({
-      active: true,
-    });
-
-    expect(findActiveIcon().exists()).toBe(true);
-    expect(findActiveIcon().classes()).not.toContain('inactive');
-  });
-
-  it('passes the props down to the gl-dropdown-item component', () => {
-    const url = 'https://about.gitlab.com';
-
-    createComponent({
-      active: true,
-      href: url,
-    });
-
-    expect(findGlDropdownItem().attributes('active')).toBe('true');
-    expect(findGlDropdownItem().attributes('href')).toBe(url);
-  });
-});

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

@@ -1,50 +0,0 @@
-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 = {
-  GlSorting,
-  GlSortingItem,
-};
-
-const generateProps = ({ href = null, active = false } = {}) => ({
-  href,
-  active,
-});
-
-const template = `
-  <gl-sorting text="Sorting options">
-    <gl-sorting-item :href="href" :active="active">Some 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({});
-Default.args = generateProps();
-
-export const WithHref = Template.bind({});
-WithHref.args = generateProps({ href: 'https://about.gitlab.com/' });
-
-export const WithActive = Template.bind({});
-WithActive.args = generateProps({ active: true });
-
-export default {
-  title: 'base/sorting/sorting-item',
-  component: GlSortingItem,
-  decorators: [makeContainer({ height: '50px', paddingLeft: '100px' })],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/sorting/sorting_item.vue

@@ -1,69 +0,0 @@
-<script>
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlIcon from '../icon/icon.vue';
-
-/**
- * Sorting Item
- *
- * NOTE: This component is deprecated. Instead, use the `sortOptions` prop of
- * `GlSorting`.
- *
- * This is written as a functional component because it is a simple wrapper over
- * the GlDropdownItem component and does not use internal state. Functional
- * components are cheaper to render and often used as wrappers like this. We're
- * not using the <template functional> syntax here because it does not support
- * custom child components wihtout extra work inside GitLab or extra work
- * required by the user.
- */
-
-export default {
-  name: 'GlSortingItem',
-  functional: true,
-  props: {
-    /**
-     * Adds a check mark next to the item to indicate it is active.
-     */
-    active: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    /**
-     * If given, makes the item a link pointing to the given value. Otherwise,
-     * the item is a button.
-     */
-    href: {
-      type: String,
-      default: null,
-      required: false,
-    },
-  },
-  /**
-   * The content of the item.
-   * @slot default
-   */
-  render(createElement, { scopedSlots, data, props = {} }) {
-    const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${
-      props.active ? '' : 'inactive gl-visibility-hidden'
-    }`;
-    const icon = createElement(GlIcon, {
-      class: classNames,
-      attrs: {
-        name: 'mobile-issue-close',
-        size: 16,
-        ariaLabel: 'Selected',
-      },
-    });
-
-    return createElement(GlDropdownItem, {
-      ...data,
-      attrs: {
-        ...props,
-      },
-      scopedSlots: {
-        default: () => [icon, scopedSlots.default?.()],
-      },
-    });
-  },
-};
-</script>