@gitlab/ui 68.0.0 → 68.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "68.0.0",
+  "version": "68.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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/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;