@gitlab/ui 93.4.0 → 94.0.1

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -2,7 +2,7 @@ $gl-search-box-by-type-search-icon-size: 16px;
 $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 
 .gl-search-box-by-type-search-icon {
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
   @apply gl-w-5;
   position: absolute;
   left: $gl-spacing-scale-3;
@@ -15,7 +15,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 }
 
 .gl-search-box-by-type-loading-icon {
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
   @apply gl-w-5;
   @apply gl-mr-2;
 }
@@ -53,7 +53,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   }
 
   &::placeholder {
-    @include gl-text-gray-400;
+    @apply gl-text-gray-400;
   }
 
   &::-webkit-search-cancel-button {

package/src/components/base/segmented_control/segmented_control.scss

@@ -35,9 +35,9 @@
   .btn-gl-segmented-button {
     @apply gl-text-base;
     @apply gl-leading-normal;
-    @include gl-text-gray-900;
+    @apply gl-text-gray-900;
     @include gl-fill-current-color;
-    @include gl-bg-gray-10;
+    @apply gl-bg-gray-10;
     @include gl-inset-border-y-1-gray-200;
 
     &:first-child {
@@ -50,29 +50,29 @@
 
     &:hover {
       @include gl-inset-border-2-gray-400;
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
 
     &.focus {
       @apply gl-z-1;
       @include gl-btn-gl-segmented-button-focus($gray-400);
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
 
     &.active {
       @apply gl-z-2;
       @include gl-inset-border-2-gray-300;
-      @include gl-bg-white;
+      @apply gl-bg-white;
 
       &:hover {
         @include gl-inset-border-2-gray-400;
-        @include gl-bg-gray-50;
+        @apply gl-bg-gray-50;
       }
 
       &.focus,
       &.focus:hover {
         @include gl-btn-gl-segmented-button-focus($gray-400);
-        @include gl-bg-gray-50;
+        @apply gl-bg-gray-50;
       }
     }
 
@@ -84,7 +84,7 @@
     &[disabled],
     &.disabled:hover,
     &[disabled]:hover {
-      @include gl-text-gray-400;
+      @apply gl-text-gray-400;
       @include gl-inset-border-y-1-gray-200;
       @include gl-z-index-0;
       @include gl-cursor-not-allowed;

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,10 +5,8 @@ table.gl-table {
   tr {
     th,
     td {
-      @apply gl-border-b-solid gl-border-b-1;
+      @apply gl-border-b-1 gl-bg-transparent 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;
       @apply gl-align-top;
@@ -18,12 +16,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;
         }
       }
 
@@ -79,11 +80,11 @@ table.gl-table {
         @apply gl-border-l-1 gl-border-r-1 gl-border-l-solid gl-border-r-solid;
 
         &::before {
-          @include gl-text-left;
+          @apply gl-text-left;
         }
 
         &:first-child {
-          @apply gl-border-t-solid gl-border-t-1;
+          @apply gl-border-t-1 gl-border-t-solid;
         }
 
         &:not(:first-child) {
@@ -92,7 +93,7 @@ table.gl-table {
       }
 
       div {
-        @include gl-text-right;
+        @apply gl-text-right;
         @apply gl-break-words;
       }
     }

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/toast/toast.scss

@@ -43,7 +43,7 @@
   }
 
   .gl-toast-action {
-    @include gl-text-blue-300;
+    @apply gl-text-blue-300;
     @apply gl-p-3;
     @apply gl-m-0;
     @apply gl-ml-5;

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

@@ -32,7 +32,7 @@ $toggle-height: 2.5 * $grid-size;
 
     .gl-toggle {
       @include gl-cursor-not-allowed;
-      @include gl-bg-gray-200;
+      @apply gl-bg-gray-200;
 
       .toggle-icon > svg {
         @include gl-fill-gray-200;
@@ -40,7 +40,7 @@ $toggle-height: 2.5 * $grid-size;
     }
 
     .gl-toggle.is-checked {
-      @include gl-bg-blue-200;
+      @apply gl-bg-blue-200;
 
       .toggle-icon > svg {
         @include gl-fill-blue-200;
@@ -49,14 +49,14 @@ $toggle-height: 2.5 * $grid-size;
 
     .gl-toggle-label,
     .gl-description-label {
-      @include gl-text-gray-500;
+      @apply gl-text-gray-500;
     }
   }
 }
 
 .gl-help-label {
   @apply gl-mt-3;
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
   @apply gl-font-normal;
 }
 
@@ -86,7 +86,7 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-justify-center;
   @apply gl-border-0;
   @include gl-cursor-pointer;
-  @include gl-bg-gray-600;
+  @apply gl-bg-gray-600;
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
@@ -106,7 +106,7 @@ $toggle-height: 2.5 * $grid-size;
   &:active,
   &:focus,
   &:focus:active {
-    @include gl-bg-gray-700;
+    @apply gl-bg-gray-700;
   }
 
   &:active,
@@ -121,7 +121,7 @@ $toggle-height: 2.5 * $grid-size;
 
   .toggle-icon {
     @include gl-rounded-full;
-    @include gl-bg-white;
+    @apply gl-bg-white;
     position: absolute;
     @apply gl-inline-flex;
     @apply gl-items-center;
@@ -140,13 +140,13 @@ $toggle-height: 2.5 * $grid-size;
   }
 
   &.is-checked {
-    @include gl-bg-blue-500;
+    @apply gl-bg-blue-500;
 
     &:hover,
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-bg-blue-600;
+      @apply gl-bg-blue-600;
     }
 
     .toggle-icon {

package/src/components/base/token/token.scss

@@ -1,6 +1,6 @@
 .gl-token {
-  @include gl-text-gray-900;
-  @include gl-bg-gray-100;
+  @apply gl-text-gray-900;
+  @apply gl-bg-gray-100;
   @include gl-rounded-small;
   @apply gl-pl-3;
   @apply gl-inline-flex;
@@ -14,7 +14,7 @@
 }
 
 .gl-token-search-type-variant {
-  @include gl-bg-gray-100;
+  @apply gl-bg-gray-100;
   @apply gl-rounded-tr-none;
   @apply gl-rounded-br-none;
 }

package/src/components/base/token_selector/token_selector.scss

@@ -10,7 +10,7 @@
 }
 
 .gl-token-selector-token-container:focus .gl-token {
-  @include gl-bg-gray-300;
+  @apply gl-bg-gray-300;
 }
 
 .gl-token-selector-input {

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

@@ -61,7 +61,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @apply gl-whitespace-nowrap;
     @include gl-overflow-hidden;
     @apply gl-text-ellipsis;
-    @include gl-text-right;
+    @apply gl-text-right;
     @apply gl-w-1/8;
   }
 

package/src/components/charts/single_stat/single_stat.scss

@@ -2,7 +2,7 @@
   @apply gl-leading-1;
 
   &:hover[tabindex='0'] {
-    @include gl-bg-gray-50;
+    @apply gl-bg-gray-50;
     @apply gl-rounded-base;
   }
 

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

@@ -1,6 +1,6 @@
 .duo-chat-loader {
   @apply gl-flex;
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
 
   .transition {
     transition: width 0.5s ease;

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

@@ -3,7 +3,7 @@
   position: relative;
 
   code {
-    @include gl-bg-gray-100;
+    @apply gl-bg-gray-100;
   }
 
   pre {
@@ -14,7 +14,7 @@
   pre code {
     @apply gl-text-sm;
     @apply gl-leading-1;
-    @include gl-bg-transparent;
+    @apply gl-bg-transparent;
     white-space: inherit;
   }
 

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

@@ -73,7 +73,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-footer-sticky {
-  @include gl-bg-white;
+  @apply gl-bg-white;
   bottom: 0;
   position: sticky;
 }
@@ -152,7 +152,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   @apply -gl-mt-2;
 
   .active-command {
-    @include gl-bg-gray-50;
+    @apply gl-bg-gray-50;
     @apply gl-rounded-base;
   }
 

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -1,8 +1,8 @@
 .gl-clear-icon-button {
-  @include gl-bg-transparent;
+  @apply gl-bg-transparent;
   @apply gl-border-none;
   @include gl-cursor-pointer;
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
 
   &:focus {
     @include gl-focus;

package/src/index.js

@@ -22,6 +22,15 @@ export { default as GlNavbar } from './components/base/navbar/navbar.vue';
 export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer.vue';
 export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
 export { default as GlIcon } from './components/base/icon/icon.vue';
+export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon.vue';
+export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon.vue';
+export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon.vue';
+export { default as GlAnimatedSidebarIcon } from './components/base/animated_icon/animated_sidebar_icon.vue';
+export { default as GlAnimatedSmileIcon } from './components/base/animated_icon/animated_smile_icon.vue';
+export { default as GlAnimatedSortIcon } from './components/base/animated_icon/animated_sort_icon.vue';
+export { default as GlAnimatedStarIcon } from './components/base/animated_icon/animated_star_icon.vue';
+export { default as GlAnimatedTodoIcon } from './components/base/animated_icon/animated_todo_icon.vue';
+export { default as GlAnimatedUploadIcon } from './components/base/animated_icon/animated_upload_icon.vue';
 export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon.vue';
 export { default as GlModal } from './components/base/modal/modal.vue';
 export { default as GlPagination } from './components/base/pagination/pagination.vue';

package/src/scss/typescale/_index.scss

@@ -1,7 +1,7 @@
 @mixin gl-typescale-ui($selector: 'body') {
   #{$selector} {
     @apply gl-text-base;
-    @include gl-text-gray-900;
+    @apply gl-text-gray-900;
     @include gl-font-regular;
     @apply gl-font-normal;
     @apply gl-leading-normal;
@@ -60,7 +60,7 @@
   .gl-h6 {
     @apply gl-text-base;
     @apply gl-leading-20;
-    @include gl-text-gray-700;
+    @apply gl-text-gray-700;
   }
 
   p,
@@ -93,7 +93,7 @@
   }
 
   blockquote {
-    @include gl-text-gray-700;
+    @apply gl-text-gray-700;
     @apply gl-py-3;
     @apply gl-pl-6;
     @apply gl-my-3;