@gitlab/ui 93.3.0 → 94.0.0

package/src/components/base/table/table.md

@@ -14,6 +14,23 @@ like mentioned in the implementation example.
 _Full documentation for the
 `field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_
 
+## Header text alignment
+
+To align a given `TH` element's text to the right, set the `thAlignRight` property to `true` in
+the fields definition. This will ensure that proper styling is applied, including when the column
+is sortable.
+
+```js
+const fields = [
+  {
+    key: "column_one",
+    label: __("First column"),
+    sortable: true,
+    thAlignRight: true,
+  },
+];
+```
+
 ## Use `GlTableLite` when possible
 
 If you don't need all the features of `GlTable`, like filtering, sorting, or

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

@@ -5,9 +5,8 @@ table.gl-table {
   tr {
     th,
     td {
-      @apply gl-border-b-solid gl-border-b-1;
+      @apply gl-border-b-1 gl-p-5 gl-border-b-solid;
       border-color: var(--gl-border-color-default);
-      @apply gl-p-5;
       @include gl-bg-transparent;
       @apply gl-leading-normal;
       @apply gl-text-base;
@@ -18,12 +17,15 @@ table.gl-table {
       @apply gl-font-bold;
       color: var(--gl-text-color-heading);
 
-      &.gl-text-right > div {
-        flex-direction: row-reverse;
+      .gl-table-th-sort-icon-wrapper {
+        @apply gl-ml-2;
+      }
+
+      &.gl-table-th-align-right > div {
+        @apply gl-flex-row-reverse;
 
-        div.gl-ml-2 {
-          @apply gl-ml-0;
-          @apply gl-mr-2;
+        .gl-table-th-sort-icon-wrapper {
+          @apply gl-ml-0 gl-mr-2;
         }
       }
 
@@ -70,8 +72,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;
       }
 
@@ -83,7 +85,7 @@ table.gl-table {
         }
 
         &:first-child {
-          @apply gl-border-t-solid gl-border-t-1;
+          @apply gl-border-t-1 gl-border-t-solid;
         }
 
         &:not(:first-child) {

package/src/components/base/table/table.vue

@@ -61,6 +61,22 @@ export default {
         ...Object.keys(this.$scopedSlots).filter((slotName) => slotName.startsWith('head(')),
       ];
     },
+    computedFields() {
+      return this.fields?.map((field) => {
+        if (typeof field === 'string') {
+          return field;
+        }
+        const { thAlignRight, thClass = '', ...rest } = field;
+        const computedThClass = Array.isArray(thClass) ? thClass : thClass.split(' ');
+        if (thAlignRight) {
+          computedThClass.push('gl-table-th-align-right');
+        }
+        return {
+          ...rest,
+          thClass: computedThClass,
+        };
+      });
+    },
   },
   mounted() {
     // logWarning will call isDev before logging any message
@@ -97,7 +113,7 @@ export default {
 <template>
   <b-table
     :table-class="localTableClass"
-    :fields="fields"
+    :fields="computedFields"
     :sort-by.sync="localSortBy"
     :sort-desc.sync="localSortDesc"
     no-sort-reset
@@ -112,7 +128,7 @@ export default {
         <slot :name="headSlotName" v-bind="scope"
           ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <div class="gl-ml-2 gl-flex gl-w-5 gl-justify-center">
+          <div class="gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center">
             <span
               name="sort-icon"
               data-testid="sort-icon"

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/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

@@ -27,10 +27,6 @@ import {
 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',
@@ -549,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>
@@ -571,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.',