@gitlab/ui 66.34.0 → 66.35.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.35.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.34.0...v66.35.0) (2023-10-20)
+
+
+### Features
+
+* **DisclosureDropdown:** Add startOpened prop ([4896b9c](https://gitlab.com/gitlab-org/gitlab-ui/commit/4896b9c3a6f9075a76fa71ea275f2153de111249))
+
 # [66.34.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.33.0...v66.34.0) (2023-10-18)
 
 

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

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

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Oct 2023 11:15:35 GMT
+ * Generated on Fri, 20 Oct 2023 08:03:38 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Oct 2023 11:15:35 GMT
+ * Generated on Fri, 20 Oct 2023 08:03:38 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Oct 2023 11:15:35 GMT
+ * Generated on Fri, 20 Oct 2023 08:03:38 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Oct 2023 11:15:35 GMT
+ * Generated on Fri, 20 Oct 2023 08:03:38 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 18 Oct 2023 11:15:35 GMT
+// Generated on Fri, 20 Oct 2023 08:03:38 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 18 Oct 2023 11:15:35 GMT
+// Generated on Fri, 20 Oct 2023 08:03:38 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.34.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 {