@gitlab/ui 93.2.0 → 93.4.0

package/src/components/base/table/table.scss

@@ -70,8 +70,8 @@ table.gl-table {
     tbody > tr {
       &::after {
         content: '';
-        @include gl-h-6;
-        @include gl-w-full;
+        @apply gl-h-6;
+        @apply gl-w-full;
         @apply gl-block;
       }
 

package/src/components/base/tabs/tabs/tabs.scss

@@ -103,7 +103,7 @@
 }
 
 .gl-actions-tabs-start {
-  @include gl-w-full;
+  @apply gl-w-full;
   @apply gl-flex;
   @apply gl-flex-col;
   @apply gl-mt-3;
@@ -134,7 +134,7 @@
 }
 
 .gl-tabs-fade {
-  @include gl-w-8;
+  @apply gl-w-8;
   bottom: 0;
   position: sticky;
   @apply gl-p-2;
@@ -154,7 +154,7 @@
   @apply gl-border;
   @include gl-action-neutral-colors;
   @apply gl-p-0;
-  @include gl-h-full;
+  @apply gl-h-full;
 }
 
 .gl-scrollable-tabs-nav {

package/src/components/base/toast/toast.scss

@@ -8,10 +8,10 @@
       bottom: $gl-spacing-scale-6;
       left: $gl-spacing-scale-6;
       right: auto;
-      @include gl-w-auto;
+      @apply gl-w-auto;
 
       @include media-breakpoint-down(xs) {
-        @include gl-w-full;
+        @apply gl-w-full;
         left: 0;
         right: 0;
       }
@@ -47,7 +47,7 @@
     @apply gl-p-3;
     @apply gl-m-0;
     @apply gl-ml-5;
-    @include gl-text-transform-none;
+    @apply gl-normal-case;
     @apply gl-text-base;
     @apply gl-whitespace-nowrap;
     @apply gl-font-bold;

package/src/components/base/toggle/toggle.scss

@@ -116,7 +116,7 @@ $toggle-height: 2.5 * $grid-size;
   }
 
   .toggle-loading {
-    @include gl-h-5;
+    @apply gl-h-5;
   }
 
   .toggle-icon {
@@ -132,8 +132,8 @@ $toggle-height: 2.5 * $grid-size;
     @apply gl-p-1;
 
     > svg {
-      @include gl-w-4;
-      @include gl-h-4;
+      @apply gl-w-4;
+      @apply gl-h-4;
       @include gl-fill-gray-600;
       @include gl-vertical-align-baseline;
     }

package/src/components/base/tooltip/tooltip.scss

@@ -13,8 +13,8 @@
   }
 
   .arrow {
-    @include gl-h-3;
-    @include gl-w-2;
+    @apply gl-h-3;
+    @apply gl-w-2;
 
     &::before {
       @apply gl-border-4;
@@ -25,8 +25,8 @@
 .gl-tooltip.bs-tooltip-top,
 .gl-tooltip.bs-tooltip-bottom {
   .arrow {
-    @include gl-w-3;
-    @include gl-h-2;
+    @apply gl-w-3;
+    @apply gl-h-2;
   }
 }
 

package/src/components/charts/legend/legend.scss

@@ -21,9 +21,9 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     bottom: 0;
     content: '';
     @apply gl-block;
-    @include gl-h-4;
+    @apply gl-h-4;
     position: absolute;
-    @include gl-w-full;
+    @apply gl-w-full;
   }
 }
 
@@ -62,7 +62,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @include gl-overflow-hidden;
     @apply gl-text-ellipsis;
     @include gl-text-right;
-    @include gl-w-eighth;
+    @apply gl-w-1/8;
   }
 
   .gl-legend-tabular-header-cell {

package/src/components/charts/tooltip/tooltip.scss

@@ -3,7 +3,7 @@
 
   > .popover {
     @include gl-min-w-0;
-    @include gl-w-max-content;
+    @apply gl-w-max;
     max-width: $chart-tooltip-max-width;
   }
 }

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue

@@ -124,22 +124,19 @@ export default {
       </div>
     </template>
     <div>
-      <div v-if="filePath !== null" class="gl-flex gl-flex-wrap gl-items-center">
-        <gl-icon name="document" :size="12" variant="subtle" class="gl-mr-1" />
-        <span>{{ contextItem.metadata.project }}</span
+      <div v-if="filePath !== null">
+        <gl-icon name="document" :size="12" variant="subtle" class="gl-mr-1" /><span
+          class="gl-break-all"
+          >{{ contextItem.metadata.project }}</span
         ><span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
           >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
         >
       </div>
-
-      <div
-        v-if="filePath === null"
-        class="gl-flex gl-flex-wrap gl-items-center gl-leading-1 gl-text-subtle"
-      >
-        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1" />
-
-        <span>{{ contextItem.metadata.project }}</span
-        ><span v-if="id !== null">{{ formattedId }}</span>
+      <div v-else>
+        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1" /><span
+          class="gl-break-all"
+          >{{ contextItem.metadata.project }}</span
+        ><span v-if="id !== null" class="gl-break-all">{{ formattedId }}</span>
       </div>
       <gl-alert
         v-if="!isEnabled"

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

@@ -39,8 +39,8 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   right: 0;
   @apply gl-transition-all;
   position: fixed;
-  @include gl-h-full;
-  @include gl-w-full;
+  @apply gl-h-full;
+  @apply gl-w-full;
   @include gl-overflow-y-auto;
   @include gl-shadow-lg;
   @apply gl-text-base;
@@ -54,9 +54,9 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-header-sticky {
-  @include gl-bg-white;
   top: 0;
   position: sticky;
+  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
 }
 
 .duo-chat-drawer-body {
@@ -87,8 +87,8 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
     left: 0;
     position: absolute;
     @include gl-pointer-events-none;
-    @include gl-w-full;
-    @include gl-h-7;
+    @apply gl-w-full;
+    @apply gl-h-7;
   }
 }
 

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

@@ -23,15 +23,10 @@ import {
   CHAT_INCLUDE_MESSAGE,
   MESSAGE_MODEL_ROLES,
 } from './constants';
-import { INCLUDE_SLASH_COMMAND } from './mock_data';
 
 export const i18n = {
   CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
   CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
-  CHAT_LEGAL_GENERATED_BY_AI: translate(
-    'GlDuoChat.chatLegalGeneratedByAI',
-    'Responses generated by AI'
-  ),
   CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
   CHAT_EMPTY_STATE_DESC: translate(
     'GlDuoChat.chatEmptyStateDesc',
@@ -324,7 +319,7 @@ export default {
         return false;
       }
 
-      return INCLUDE_SLASH_COMMAND.name.startsWith(this.caseInsensitivePrompt);
+      return CHAT_INCLUDE_MESSAGE.startsWith(this.caseInsensitivePrompt);
     },
     inputPlaceholder() {
       if (this.chatPromptPlaceholder) {
@@ -462,7 +457,7 @@ export default {
         this.contextItemMenuRef?.handleKeyUp(e);
         return;
       }
-      if (this.caseInsensitivePrompt === INCLUDE_SLASH_COMMAND.name) {
+      if (this.caseInsensitivePrompt === CHAT_INCLUDE_MESSAGE) {
         this.contextItemsMenuIsOpen = true;
         return;
       }
@@ -550,7 +545,7 @@ export default {
     <header
       v-if="showHeader"
       data-testid="chat-header"
-      class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-200 gl-border-b-0 !gl-p-0"
+      class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-200 gl-bg-gray-10 !gl-p-0"
     >
       <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
         <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
@@ -572,16 +567,6 @@ export default {
         />
       </div>
 
-      <gl-alert
-        :dismissible="false"
-        variant="tip"
-        :show-icon="false"
-        class="legal-warning gl-border-t gl-max-w-full gl-bg-gray-50 gl-p-4 gl-text-center gl-text-gray-700"
-        role="alert"
-        data-testid="chat-legal-warning"
-        >{{ $options.i18n.CHAT_LEGAL_GENERATED_BY_AI }}</gl-alert
-      >
-
       <!--
         @slot Subheader to be rendered right after the title. It is sticky and stays on top of the chat no matter the number of messages.
       -->

package/translations.js

@@ -23,7 +23,6 @@ export default {
   'GlDuoChat.chatEmptyStateTitle': 'Ask a question',
   'GlDuoChat.chatLegalDisclaimer':
     "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
-  'GlDuoChat.chatLegalGeneratedByAI': 'Responses generated by AI',
   'GlDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
   'GlDuoChat.chatPromptPlaceholderWithCommands': 'Type "/" for slash commands',
   'GlDuoChat.chatSubmitLabel': 'Send chat message.',