@gitlab/ui 67.5.2 → 68.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "67.5.2",
+  "version": "68.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -124,9 +124,10 @@
     "bootstrap": "4.6.2",
     "cypress": "13.4.0",
     "cypress-axe": "^1.4.0",
+    "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.52.0",
+    "eslint": "8.53.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.15",

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

@@ -27,8 +27,11 @@ import GlIcon from '../../icon/icon.vue';
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
 
+export const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
+
 export default {
   name: 'BaseDropdown',
+  BASE_DROPDOWN_CLASS,
   components: {
     GlButton,
     GlIcon,
@@ -429,7 +432,7 @@ export default {
 </script>
 
 <template>
-  <div v-outside="close" class="gl-new-dropdown" :class="{ 'gl-display-block!': block }">
+  <div v-outside="close" :class="[$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': block }]">
     <component
       :is="toggleComponent"
       v-bind="toggleAttributes"

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

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { autoUpdate } from '@floating-ui/dom';
 import { nextTick } from 'vue';
 import * as utils from '../../../../utils/utils';
+import { useMockIntersectionObserver } from '../../../../utils/use_mock_intersection_observer';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import {
   GL_DROPDOWN_SHOWN,
@@ -15,6 +16,7 @@ import {
   POSITION_ABSOLUTE,
   POSITION_FIXED,
 } from '../constants';
+import GlCollapsibleListbox from '../listbox/listbox.vue';
 import GlDisclosureDropdown from './disclosure_dropdown.vue';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
@@ -33,7 +35,12 @@ describe('GlDisclosureDropdown', () => {
   const buildWrapper = (propsData, slots = {}) => {
     wrapper = mount(GlDisclosureDropdown, {
       propsData,
-      components: { GlDisclosureDropdownItem, GlDisclosureDropdownGroup },
+      components: {
+        GlDisclosureDropdown,
+        GlDisclosureDropdownItem,
+        GlDisclosureDropdownGroup,
+        GlCollapsibleListbox,
+      },
       slots,
       attachTo: document.body,
     });
@@ -43,8 +50,9 @@ describe('GlDisclosureDropdown', () => {
   const findDisclosureContent = () => wrapper.find('[data-testid="disclosure-content"]');
   const findDisclosureItems = (root = wrapper) => root.findAllComponents(GlDisclosureDropdownItem);
   const findDisclosureGroups = () => wrapper.findAllComponents(GlDisclosureDropdownGroup);
-  const findListItem = (index) => findDisclosureItems().at(index).findComponent(ITEM_SELECTOR);
-  const findDropdownMenu = () => wrapper.find("[data-testid='base-dropdown-menu']");
+  const findListItem = (index, root = wrapper) =>
+    findDisclosureItems(root).at(index).findComponent(ITEM_SELECTOR);
+  const findDropdownMenu = (root = wrapper) => root.find("[data-testid='base-dropdown-menu']");
 
   jest.spyOn(utils, 'filterVisible').mockImplementation((items) => items);
 
@@ -402,4 +410,33 @@ describe('GlDisclosureDropdown', () => {
       expect(findDropdownMenu().classes()).not.toContain('gl-display-block!');
     });
   });
+
+  describe('nested dropdowns', () => {
+    useMockIntersectionObserver();
+
+    it.each`
+      dropdown                    | getClickItem
+      ${'gl-disclosure-dropdown'} | ${(nestedWrapper) => findListItem(0, nestedWrapper)}
+      ${'gl-collapsible-listbox'} | ${(nestedWrapper) => nestedWrapper.find('[data-testid="listbox-item-1"]')}
+    `('should only close the target $dropdown', async ({ dropdown, getClickItem }) => {
+      const slots = {
+        default: `
+          <${dropdown}
+            :items="[{ text: 'First', action: () => {}, value: '1' }]"
+            start-opened
+            data-testid="nested"
+          />
+        `,
+      };
+      buildWrapper({ startOpened: true }, slots);
+      const isOpened = (root) => findDropdownMenu(root).classes('gl-display-block!');
+      const nestedWrapper = wrapper.findComponent("[data-testid='nested']");
+
+      getClickItem(nestedWrapper).trigger('click');
+      await nextTick();
+
+      expect(isOpened(wrapper)).toBe(true);
+      expect(isOpened(nestedWrapper)).toBe(false);
+    });
+  });
 });

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

@@ -24,11 +24,12 @@ import {
   dropdownPlacements,
   dropdownVariantOptions,
 } from '../../../../utils/constants';
-import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
+import GlBaseDropdown, { BASE_DROPDOWN_CLASS } from '../base_dropdown/base_dropdown.vue';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item.vue';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
 import { itemsValidator, isItem, hasOnlyListItems } from './utils';
 
+export const DROPDOWN_SELECTOR = `.${BASE_DROPDOWN_CLASS}`;
 export const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 
 export default {
@@ -336,7 +337,11 @@ export default {
       this.$emit('action', action);
     },
     handleAutoClose(e) {
-      if (this.autoClose && e.target.closest(ITEM_SELECTOR)) {
+      if (
+        this.autoClose &&
+        e.target.closest(ITEM_SELECTOR) &&
+        e.target.closest(DROPDOWN_SELECTOR) === this.$refs.baseDropdown.$el
+      ) {
         this.closeAndFocus();
       }
     },

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -160,12 +160,25 @@ describe('GlDuoChat', () => {
     });
 
     it('sets correct props on the Experiment badge', () => {
-      const experimentHelpPageUrl = 'https://foo.bar';
+      const badgeHelpPageUrl = 'https://foo.bar';
       const containerId = 'chat-component';
-      createComponent({ propsData: { experimentHelpPageUrl } });
-      expect(findBadge().props('experimentHelpPageUrl')).toBe(experimentHelpPageUrl);
+      createComponent({ propsData: { badgeHelpPageUrl } });
+      expect(findBadge().props('helpPageUrl')).toBe(badgeHelpPageUrl);
       expect(findBadge().attributes('container-id')).toBe(containerId);
     });
+
+    it.each`
+      badgeType       | expectedProp
+      ${'experiment'} | ${'experiment'}
+      ${'beta'}       | ${'beta'}
+      ${undefined}    | ${'experiment'}
+    `(
+      'sets correct props on the Experiment badge when badgeType is "$badgeType"',
+      ({ badgeType, expectedProp }) => {
+        createComponent({ propsData: { badgeType } });
+        expect(findBadge().props('type')).toBe(expectedProp);
+      }
+    );
   });
 
   describe('chat', () => {

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -24,7 +24,8 @@ const generateProps = ({
   isLoading = defaultValue('isLoading'),
   isChatAvailable = defaultValue('isChatAvailable'),
   predefinedPrompts = defaultValue('predefinedPrompts'),
-  experimentHelpPageUrl = defaultValue('experimentHelpPageUrl'),
+  badgeHelpPageUrl = defaultValue('badgeHelpPageUrl'),
+  badgeType = defaultValue('badgeType'),
   toolName = defaultValue('toolName'),
 } = {}) => ({
   title,
@@ -33,7 +34,8 @@ const generateProps = ({
   isLoading,
   isChatAvailable,
   predefinedPrompts,
-  experimentHelpPageUrl,
+  badgeHelpPageUrl,
+  badgeType,
   toolName,
 });
 
@@ -52,7 +54,8 @@ export const Default = (args, { argTypes }) => ({
       :is-loading="isLoading"
       :is-chat-available="isChatAvailable"
       :predefined-prompts="predefinedPrompts"
-      :experiment-help-page-url="experimentHelpPageUrl"
+      :badge-help-page-url="badgeHelpPageUrl"
+      :badge-type="badgeType"
       :tool-name="toolName"
     />`,
 });
@@ -145,7 +148,8 @@ export const Interactive = (args, { argTypes }) => ({
       :is-loading="promptInFlight"
       :is-chat-available="isChatAvailable"
       :predefined-prompts="predefinedPrompts"
-      :experiment-help-page-url="experimentHelpPageUrl"
+      :badge-help-page-url="badgeHelpPageUrl"
+      :badge-type="badgeType"
       :tool-name="toolName"
       @send-chat-prompt="onSendChatPrompt"
       @chat-hidden="onChatHidden"
@@ -170,7 +174,8 @@ export const Slots = (args, { argTypes }) => ({
         :is-loading="isLoading"
         :is-chat-available="isChatAvailable"
         :predefined-prompts="predefinedPrompts"
-        :experiment-help-page-url="experimentHelpPageUrl"
+        :badge-help-page-url="badgeHelpPageUrl"
+        :badge-type="badgeType"
         :tool-name="toolName">
 
         <template #hero>

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -9,6 +9,7 @@ import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
 import GlForm from '../../../base/form/form.vue';
 import GlFormText from '../../../base/form/form_text/form_text.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
+import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
@@ -106,13 +107,22 @@ export default {
       default: () => i18n.CHAT_DEFAULT_PREDEFINED_PROMPTS,
     },
     /**
-     * URL to the experiment help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     * URL to the experiment/beta help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
      */
-    experimentHelpPageUrl: {
+    badgeHelpPageUrl: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * The type of the badge. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     */
+    badgeType: {
+      type: String,
+      required: false,
+      default: badgeTypes[0],
+      validator: badgeTypeValidator,
+    },
     /**
      * The current tool's name to display in the loading message while waiting for a response from AI. Refer the `GlDuoChatLoader` component for more information.
      */
@@ -236,7 +246,8 @@ export default {
       >
         <h3 class="gl-my-0 gl-font-size-h2">{{ title }}</h3>
         <gl-experiment-badge
-          :experiment-help-page-url="experimentHelpPageUrl"
+          :help-page-url="badgeHelpPageUrl"
+          :type="badgeType"
           container-id="chat-component"
         />
         <gl-button

package/src/components/experimental/experiment_badge/constants.js

@@ -0,0 +1,2 @@
+export const badgeTypes = ['experiment', 'beta'];
+export const badgeTypeValidator = (value) => badgeTypes.includes(value);

package/src/components/experimental/experiment_badge/experiment_badge.spec.js

@@ -34,19 +34,6 @@ describe('GlExperimentBadge', () => {
     expect(findPopover().exists()).toBe(true);
   });
 
-  it('sets correct props on the badge', () => {
-    const badgeType = 'neutral';
-    const badgeSize = 'md';
-    expect(findBadge().props('variant')).toBe(badgeType);
-    expect(findBadge().props('size')).toBe(badgeSize);
-    expect(findBadge().find('span').text()).toBe(i18n.EXPERIMENT_BADGE);
-  });
-
-  it('sets correct props on the popover', () => {
-    expect(findPopover().props('triggers')).toBe('click');
-    expect(findPopover().props('title')).toBe(i18n.EXPERIMENT_POPOVER_TITLE);
-  });
-
   it('correctly sets the placement of the popover', () => {
     const popoverPlacement = 'right';
     createComponent({ popoverPlacement });
@@ -54,13 +41,37 @@ describe('GlExperimentBadge', () => {
   });
 
   it('sets the link to the help page if passed', () => {
-    const experimentHelpPageUrl = 'https://gitlab.com';
-    createComponent({ experimentHelpPageUrl });
-    expect(findHelpLink().attributes('href')).toBe(experimentHelpPageUrl);
+    const helpPageUrl = 'https://gitlab.com';
+    createComponent({ helpPageUrl });
+    expect(findHelpLink().attributes('href')).toBe(helpPageUrl);
   });
 
   it('generates the unique ID to connect the button and the popover', () => {
     expect(findBadge().attributes('id')).toBe('fakeUniqueId');
     expect(findPopover().attributes('target')).toBe('fakeUniqueId');
   });
+
+  describe.each`
+    type            | expectedType
+    ${'beta'}       | ${'beta'}
+    ${'experiment'} | ${'experiment'}
+    ${undefined}    | ${'experiment'}
+  `('when type is %s', ({ type, expectedType } = {}) => {
+    beforeEach(() => {
+      createComponent({ type });
+    });
+
+    it('sets correct props on the badge', () => {
+      const badgeVariant = 'neutral';
+      const badgeSize = 'md';
+      expect(findBadge().props('variant')).toBe(badgeVariant);
+      expect(findBadge().props('size')).toBe(badgeSize);
+      expect(findBadge().find('span').text()).toBe(i18n[expectedType].BADGE);
+    });
+
+    it('sets correct props on the popover', () => {
+      expect(findPopover().props('triggers')).toBe('click');
+      expect(findPopover().props('title')).toBe(i18n[expectedType].POPOVER_TITLE);
+    });
+  });
 });

package/src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -4,11 +4,13 @@ import readme from './experiment_badge.md';
 const defaultValue = (prop) => GlExperimentBadge.props[prop].default;
 
 const generateProps = ({
-  experimentHelpPageUrl = defaultValue('experimentHelpPageUrl'),
+  helpPageUrl = defaultValue('helpPageUrl'),
   popoverPlacement = defaultValue('popoverPlacement'),
+  type = defaultValue('type'),
 } = {}) => ({
-  experimentHelpPageUrl,
+  helpPageUrl,
   popoverPlacement,
+  type,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -17,8 +19,9 @@ const Template = (args, { argTypes }) => ({
   template: `
     <div class='gl-h-13'>
       <gl-experiment-badge
-        :experiment-help-page-url='experimentHelpPageUrl'
-        :popover-placement='popoverPlacement' />
+        :help-page-url='helpPageUrl'
+        :popover-placement='popoverPlacement'
+        :type='type' />
     </div>
   `,
 });

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -4,22 +4,36 @@ import GlBadge from '../../base/badge/badge.vue';
 import GlLink from '../../base/link/link.vue';
 import GlPopover from '../../base/popover/popover.vue';
 import GlSprintf from '../../utilities/sprintf/sprintf.vue';
+import { badgeTypes, badgeTypeValidator } from './constants';
 
 export const i18n = {
-  EXPERIMENT_BADGE: 'Experiment',
-  EXPERIMENT_POPOVER_TITLE: "What's an Experiment?",
-  EXPERIMENT_POPOVER_CONTENT:
-    "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
-  EXPERIMENT_POPOVER_BULLETS: [
-    'May be unstable',
-    'Has no support and might not be documented',
-    'Can be removed at any time',
-  ],
+  experiment: {
+    BADGE: 'Experiment',
+    POPOVER_TITLE: "What's an Experiment?",
+    POPOVER_CONTENT:
+      "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+    POPOVER_BULLETS: [
+      'May be unstable',
+      'Has no support and might not be documented',
+      'Can be removed at any time',
+    ],
+  },
+  beta: {
+    BADGE: 'Beta',
+    POPOVER_TITLE: "What's a Beta?",
+    POPOVER_CONTENT:
+      "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
+    POPOVER_BULLETS: [
+      'May be unstable',
+      'Should not cause data loss',
+      'Is supported by a commercially reasonable effort',
+      'Is complete or near completion',
+    ],
+  },
 };
 
 export default {
   name: 'GlExperimentBadge',
-  i18n,
   components: {
     GlBadge,
     GlPopover,
@@ -30,7 +44,7 @@ export default {
     /**
      * The URL of a page to provide more explanations on the experiment.
      */
-    experimentHelpPageUrl: {
+    helpPageUrl: {
       type: String,
       required: false,
       default: '',
@@ -43,6 +57,20 @@ export default {
       required: false,
       default: 'bottom',
     },
+    /**
+     * The type of the badge.
+     */
+    type: {
+      type: String,
+      required: false,
+      default: badgeTypes[0],
+      validator: badgeTypeValidator,
+    },
+  },
+  computed: {
+    activeType() {
+      return i18n[this.type];
+    },
   },
   created() {
     this.triggerId = uniqueId('experiment-badge-');
@@ -52,30 +80,25 @@ export default {
 
 <template>
   <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral" size="md">
-    <span>{{ $options.i18n.EXPERIMENT_BADGE }}</span>
+    <span>{{ activeType.BADGE }}</span>
     <gl-popover
       triggers="click"
       show-close-button
       :placement="popoverPlacement"
       :target="triggerId"
       :css-classes="['gl-z-index-9999!']"
-      :title="$options.i18n.EXPERIMENT_POPOVER_TITLE"
+      :title="activeType.POPOVER_TITLE"
     >
-      <gl-sprintf :message="$options.i18n.EXPERIMENT_POPOVER_CONTENT">
+      <gl-sprintf :message="activeType.POPOVER_CONTENT">
         <template #link="{ content }">
-          <gl-link
-            v-if="experimentHelpPageUrl"
-            :href="experimentHelpPageUrl"
-            target="_blank"
-            class="gl-font-sm!"
-          >
+          <gl-link v-if="helpPageUrl" :href="helpPageUrl" target="_blank" class="gl-font-sm!">
             {{ content }}
           </gl-link>
           <span v-else>{{ content }}</span>
         </template>
         <template #bullets>
           <ul class="gl-mb-0 gl-pl-5">
-            <li v-for="(item, i) in $options.i18n.EXPERIMENT_POPOVER_BULLETS" :key="`li-${i}`">
+            <li v-for="(item, i) in activeType.POPOVER_BULLETS" :key="`li-${i}`">
               {{ item }}
             </li>
           </ul>

package/src/scss/utilities.scss

@@ -7504,6 +7504,16 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   padding-right: $gl-spacing-scale-2 !important;
   }
 }
+.gl-sm-pr-4 {
+  @include gl-media-breakpoint-up(sm) {
+  padding-right: $gl-spacing-scale-4;
+  }
+}
+.gl-sm-pr-4\! {
+  @include gl-media-breakpoint-up(sm) {
+  padding-right: $gl-spacing-scale-4 !important;
+  }
+}
 .gl-sm-pl-0 {
   @include gl-media-breakpoint-up(sm) {
   padding-left: 0;

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

@@ -1226,6 +1226,12 @@
   }
 }
 
+@mixin gl-sm-pr-4 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-sm-pl-0 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-pl-0;