@gitlab/ui 66.34.0 → 66.35.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [66.35.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.35.0...v66.35.1) (2023-10-20)
+
+
+### Bug Fixes
+
+* **GlDuoChatMessage:** nextTick() when rendering GFM ([835900c](https://gitlab.com/gitlab-org/gitlab-ui/commit/835900cb9cf01e26b4e24120be3abc6f48c3c371))
+
+# [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/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
@@ -60,7 +61,7 @@ var script = {
         if (!chunkId) {
           this.messageChunks = [];
           this.messageContent = this.content;
-          this.renderGFM(this.$refs.content);
+          this.hydrateContentWithGFM();
         } else {
           this.messageChunks[chunkId] = content;
           this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
@@ -81,7 +82,13 @@ var script = {
     if (this.message.chunkId) {
       this.messageChunks[this.message.chunkId] = this.message.content;
     }
-    this.renderGFM(this.$refs.content);
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      await nextTick();
+      this.renderGFM(this.$refs.content);
+    }
   }
 };
 

package/dist/components/experimental/duo/chat/mock_data.js

@@ -80,5 +80,12 @@ const MOCK_USER_PROMPT_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
   extras: null
 };
+const renderMarkdown = content => content;
+const renderGFM = el => {
+  const codeBlock = el.querySelectorAll('.markdown-code-block');
+  codeBlock.forEach(block => {
+    block === null || block === void 0 ? void 0 : block.classList.add('gl-bg-purple-50', 'gl-p-3', 'gl-mb-3');
+  });
+};
 
-export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks };
+export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks, renderGFM, renderMarkdown };

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 18:59:55 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 18:59:55 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 18:59:55 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 18:59:55 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 18:59:55 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 18:59:55 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.1",
   "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/components/duo_chat_conversation/duo_chat_conversation.stories.js

@@ -1,10 +1,13 @@
-import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import {
+  MOCK_USER_PROMPT_MESSAGE,
+  MOCK_RESPONSE_MESSAGE,
+  renderGFM,
+  renderMarkdown,
+} from '../../mock_data';
 import GlDuoChatConversation from './duo_chat_conversation.vue';
 import readme from './duo_chat_conversation.md';
 
 const defaultValue = (prop) => GlDuoChatConversation.props[prop].default;
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
 
 const generateProps = ({ messages = [], showDelimiter = defaultValue('showDelimiter') } = {}) => ({
   messages,

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

@@ -109,8 +109,9 @@ describe('DuoChatMessage', () => {
   });
 
   describe('message output', () => {
-    it('hydrates the message with GLFM when mounting the component', () => {
+    it('hydrates the message with GLFM when mounting the component', async () => {
       createComponent();
+      await nextTick();
       expect(renderGFM).toHaveBeenCalled();
     });
 
@@ -327,6 +328,7 @@ describe('DuoChatMessage', () => {
           message: chunk1,
         },
       });
+      await nextTick();
       renderGFM.mockClear();
       expect(renderGFM).not.toHaveBeenCalled();
 

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

@@ -1,10 +1,12 @@
-import { MOCK_RESPONSE_MESSAGE, MOCK_USER_PROMPT_MESSAGE } from '../../mock_data';
+import {
+  MOCK_RESPONSE_MESSAGE,
+  MOCK_USER_PROMPT_MESSAGE,
+  renderGFM,
+  renderMarkdown,
+} from '../../mock_data';
 import GlDuoChatMessage from './duo_chat_message.vue';
 import readme from './duo_chat_message.md';
 
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
-
 const generateProps = ({ message = MOCK_RESPONSE_MESSAGE } = {}) => ({
   message,
 });

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

@@ -1,4 +1,5 @@
 <script>
+import { nextTick } from 'vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
@@ -60,7 +61,7 @@ export default {
         if (!chunkId) {
           this.messageChunks = [];
           this.messageContent = this.content;
-          this.renderGFM(this.$refs.content);
+          this.hydrateContentWithGFM();
         } else {
           this.messageChunks[chunkId] = content;
           this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
@@ -81,7 +82,13 @@ export default {
     if (this.message.chunkId) {
       this.messageChunks[this.message.chunkId] = this.message.content;
     }
-    this.renderGFM(this.$refs.content);
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      await nextTick();
+      this.renderGFM(this.$refs.content);
+    },
   },
 };
 </script>

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/components/experimental/duo/chat/duo_chat.stories.js

@@ -8,11 +8,10 @@ import {
   MOCK_RESPONSE_MESSAGE,
   MOCK_USER_PROMPT_MESSAGE,
   generateMockResponseChunks,
+  renderGFM,
+  renderMarkdown,
 } from './mock_data';
 
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
-
 const defaultValue = (prop) =>
   typeof GlDuoChat.props[prop].default === 'function'
     ? GlDuoChat.props[prop].default()

package/src/components/experimental/duo/chat/mock_data.js

@@ -94,3 +94,11 @@ export const MOCK_USER_PROMPT_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
   extras: null,
 };
+
+export const renderMarkdown = (content) => content;
+export const renderGFM = (el) => {
+  const codeBlock = el.querySelectorAll('.markdown-code-block');
+  codeBlock.forEach((block) => {
+    block?.classList.add('gl-bg-purple-50', 'gl-p-3', 'gl-mb-3');
+  });
+};