@gitlab/ui 93.4.0 → 94.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "93.4.0",
+  "version": "94.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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;
         }
       }
 
@@ -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"