@gitlab/ui 74.9.2 → 75.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.9.2",
+  "version": "75.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.83.0",
+    "@gitlab/svgs": "3.84.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -1,9 +1,4 @@
 .duo-chat-loader {
-  @include gl-py-3;
-  @include gl-px-4;
-  @include gl-mb-4;
-  @include gl-rounded-lg;
-  @include gl-rounded-bottom-left-none;
   @include gl-display-flex;
   @include gl-text-gray-500;
 
@@ -64,4 +59,4 @@
   40% {
     transform: scale(1);
   }
-}
+}

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

@@ -12,18 +12,9 @@
     transform: translateY(10px);
   }
 
-  .loader-enter-active,
-  .loader-leave-active {
-    transition: opacity 0.5s ease;
-  }
-
-  .loader-enter,
-  .loader-leave-to {
-    @include gl-opacity-0;
-  }
-
-  .loader-leave-active {
-    @include gl-absolute;
+  .duo-chat-loader.message-leave,
+  .duo-chat-loader.message-leave-to {
+    transition: none;
   }
 
   .gl-drawer-body-scrim-on-footer {
@@ -31,11 +22,19 @@
       background: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
     }
   }
+
+  .gl-drawer-body {
+    overflow-y: auto;
+  }
 }
 
 .duo-chat-history {
   scroll-behavior: smooth;
 
+  &.force-scroll-bar {
+    min-height: calc(100% + 1rem);
+  }
+
   /*
   Browsers a are pretty good at keeping the focus on an element while
   the parent element grows in size. With this we mark all child elements

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

@@ -72,6 +72,7 @@ describe('GlDuoChat', () => {
   };
 
   const findChatComponent = () => wrapper.find('[data-testid="chat-component"]');
+  const findChatHistoryComponent = () => wrapper.find('[data-testid="chat-history"]');
   const findCloseButton = () => wrapper.find('[data-testid="chat-close-button"]');
   const findChatConversations = () => wrapper.findAllComponents(DuoChatConversation);
   const findCustomLoader = () => wrapper.findComponent(DuoChatLoader);
@@ -462,7 +463,7 @@ describe('GlDuoChat', () => {
 
       beforeEach(() => {
         createComponent({ propsData: { messages, isChatAvailable: true } });
-        element = findChatComponent().element;
+        element = findChatHistoryComponent().element;
       });
 
       it('when scrolling to the bottom it removes the scrim class', async () => {
@@ -470,7 +471,7 @@ describe('GlDuoChat', () => {
         jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(100);
         jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
 
-        findChatComponent().trigger('scroll');
+        findChatHistoryComponent().trigger('scroll');
 
         await nextTick();
 
@@ -482,7 +483,7 @@ describe('GlDuoChat', () => {
         jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(100);
         jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
 
-        findChatComponent().trigger('scroll');
+        findChatHistoryComponent().trigger('scroll');
 
         await nextTick();
 

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

@@ -285,8 +285,8 @@ export default {
       this.prompt = prompt;
       this.sendChatPrompt();
     },
-    handleScrolling() {
-      const { scrollTop, offsetHeight, scrollHeight } = this.$refs.drawer;
+    handleScrolling(event) {
+      const { scrollTop, offsetHeight, scrollHeight } = event.target;
       this.scrolledToBottom = scrollTop + offsetHeight >= scrollHeight;
     },
     async scrollToBottom() {
@@ -355,11 +355,9 @@ export default {
   <aside
     v-if="!isHidden"
     id="chat-component"
-    ref="drawer"
     class="markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
     role="complementary"
     data-testid="chat-component"
-    @scroll="handleScrollingTrottled"
   >
     <header
       v-if="showHeader"
@@ -416,50 +414,43 @@ export default {
       </gl-alert>
     </header>
 
-    <div class="gl-drawer-body gl-display-flex gl-flex-direction-column">
-      <section
-        class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
+    <div class="gl-drawer-body" data-testid="chat-history" @scroll="handleScrollingTrottled">
+      <transition-group
+        tag="section"
+        name="message"
+        class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-bg-gray-10"
+        :class="[
+          {
+            'gl-h-full': !hasMessages,
+            'force-scroll-bar': hasMessages,
+          },
+        ]"
       >
-        <transition-group
-          tag="div"
-          name="message"
-          class="gl-display-flex gl-flex-direction-column gl-justify-content-end"
-          :class="[
-            {
-              'gl-h-full': !hasMessages,
-              'gl-h-auto': hasMessages,
-            },
-          ]"
-        >
-          <gl-duo-chat-conversation
-            v-for="(conversation, index) in conversations"
-            :key="`conversation-${index}`"
-            :messages="conversation"
-            :show-delimiter="index > 0"
-            @track-feedback="onTrackFeedback"
+        <gl-duo-chat-conversation
+          v-for="(conversation, index) in conversations"
+          :key="`conversation-${index}`"
+          :messages="conversation"
+          :show-delimiter="index > 0"
+          @track-feedback="onTrackFeedback"
+        />
+        <template v-if="!hasMessages && !isLoading">
+          <gl-empty-state
+            key="empty-state"
+            :svg-path="$options.emptySvg"
+            :svg-height="145"
+            :title="emptyStateTitle"
+            :description="emptyStateDescription"
+            class="gl-flex-grow gl-justify-content-center"
           />
-          <template v-if="!hasMessages && !isLoading">
-            <div key="empty-state" class="gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto">
-              <gl-empty-state
-                :svg-path="$options.emptySvg"
-                :svg-height="145"
-                :title="emptyStateTitle"
-                :description="emptyStateDescription"
-                class="gl-align-self-center"
-              />
-            </div>
-            <gl-duo-chat-predefined-prompts
-              key="predefined-prompts"
-              :prompts="predefinedPrompts"
-              @click="sendPredefinedPrompt"
-            />
-          </template>
-        </transition-group>
-        <transition name="loader">
-          <gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" class="gl-px-0!" />
-        </transition>
-        <div ref="anchor" class="scroll-anchor"></div>
-      </section>
+          <gl-duo-chat-predefined-prompts
+            key="predefined-prompts"
+            :prompts="predefinedPrompts"
+            @click="sendPredefinedPrompt"
+          />
+        </template>
+        <gl-duo-chat-loader v-if="isLoading" key="loader" :tool-name="toolName" />
+        <div key="anchor" ref="anchor" class="scroll-anchor"></div>
+      </transition-group>
     </div>
     <footer
       v-if="isChatAvailable"

package/src/scss/utilities.scss

@@ -4177,12 +4177,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   object-fit: contain !important
 }
 
-.gl-isolation-isolate {
-  isolation: isolate
-}
-.gl-isolation-isolate\! {
-  isolation: isolate !important
-}
 .gl-list-style-none {
   list-style-type: none
 }
@@ -9670,11 +9664,3 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-z-index-9999\! {
   z-index: 9999 !important
 }
-
-.gl-isolate {
-  isolation: isolate
-}
-
-.gl-isolate\! {
-  isolation: isolate !important
-}

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

@@ -29,7 +29,6 @@
 @import './flex';
 @import './grid';
 @import './image';
-@import './isolation';
 @import './list-style';
 @import './masks';
 @import './mix-blend-mode';

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

@@ -35,7 +35,3 @@
 @mixin gl-z-index-9999 {
   z-index: 9999;
 }
-
-@mixin gl-isolate {
-  isolation: isolate;
-}

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

@@ -1,3 +0,0 @@
-@mixin gl-isolation-isolate {
-  isolation: isolate;
-}