@gitlab/ui 66.33.0 → 66.35.0

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { autoUpdate } from '@floating-ui/dom';
+import { nextTick } from 'vue';
 import * as utils from '../../../../utils/utils';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import {
@@ -43,6 +44,7 @@ describe('GlDisclosureDropdown', () => {
   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']");
 
   jest.spyOn(utils, 'filterVisible').mockImplementation((items) => items);
 
@@ -387,4 +389,17 @@ describe('GlDisclosureDropdown', () => {
       }
     );
   });
+  describe('startOpened', () => {
+    it('should open dropdown on render when startOpened is true', async () => {
+      buildWrapper({ items: mockItems, startOpened: true });
+      await nextTick();
+      expect(findDropdownMenu().classes()).toContain('gl-display-block!');
+    });
+
+    it('should not open dropdown on render as default', async () => {
+      buildWrapper({ items: mockItems });
+      await nextTick();
+      expect(findDropdownMenu().classes()).not.toContain('gl-display-block!');
+    });
+  });
 });

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

@@ -44,17 +44,13 @@ const makeBindings = (overrides = {}) =>
     ':fluid-width': 'fluidWidth',
     ':auto-close': 'autoClose',
     ':positioning-strategy': 'positioningStrategy',
+    ':start-opened': 'startOpened',
+
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)
     .join('\n');
 
-function openDisclosure(component) {
-  component.$nextTick(() => {
-    component.$refs.disclosure.open();
-  });
-}
-
 const template = (content = '', { bindingOverrides = {}, after = '' } = {}) => `
   <div>
     <gl-disclosure-dropdown
@@ -75,11 +71,6 @@ export const Default = (args, { argTypes }) => ({
     GlDisclosureDropdown,
     GlTooltip,
   },
-  mounted() {
-    if (this.startOpened) {
-      openDisclosure(this);
-    }
-  },
   template: `
     <div>
       ${template()}
@@ -105,11 +96,6 @@ export const CustomListItem = (args, { argTypes }) => ({
     GlDisclosureDropdown,
     GlBadge,
   },
-  mounted() {
-    if (this.startOpened) {
-      openDisclosure(this);
-    }
-  },
   template: template(
     `
       <template #list-item="{ item }">
@@ -147,11 +133,6 @@ const makeGroupedExample = (changes) => {
       GlModal,
       GlIcon,
     },
-    mounted() {
-      if (this.startOpened) {
-        openDisclosure(this);
-      }
-    },
     ...changes,
   });
 
@@ -177,11 +158,6 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
     GlDisclosureDropdown,
     GlBadge,
   },
-  mounted() {
-    if (this.startOpened) {
-      openDisclosure(this);
-    }
-  },
   methods: {
     getTotalMrs(items) {
       return items.reduce((acc, item) => acc + item.count, 0);
@@ -312,11 +288,6 @@ export const MiscellaneousContent = (args, { argTypes }) => ({
   components: {
     GlDisclosureDropdown,
   },
-  mounted() {
-    if (this.startOpened) {
-      openDisclosure(this);
-    }
-  },
   template: template(
     `
       <div class="gl-p-3">A disclosure dropdown is a button that toggles a panel containing a list of items and/or links.</div>

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

@@ -219,6 +219,14 @@ export default {
       default: POSITION_ABSOLUTE,
       validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
     },
+    /**
+     * Opens dropdown on render
+     */
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -237,6 +245,11 @@ export default {
       return Boolean(this.$scopedSlots.toggle);
     },
   },
+  mounted() {
+    if (this.startOpened) {
+      this.open();
+    }
+  },
   methods: {
     open() {
       this.$refs.baseDropdown.open();

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

@@ -1,5 +1,5 @@
 .duo-chat {
-  z-index: 999;
+  @include gl-z-index-999;
 
   .message-enter-active,
   .message-leave-active {

package/src/scss/utilities.scss

@@ -9305,6 +9305,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   z-index: 200 !important
 }
 
+.gl-z-index-999 {
+  z-index: 999
+}
+
+.gl-z-index-999\! {
+  z-index: 999 !important
+}
+
 .gl-z-index-9999 {
   z-index: 9999
 }

package/src/scss/utility-mixins/z-index.scss

@@ -24,6 +24,10 @@
   z-index: 200;
 }
 
+@mixin gl-z-index-999 {
+  z-index: 999;
+}
+
 @mixin gl-z-index-9999 {
   z-index: 9999;
 }