@gitlab/ui 78.2.1 → 78.2.2

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 05:26:52 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 05:26:52 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 05:26:52 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 05:26:52 GMT
+ * Generated on Tue, 19 Mar 2024 16:19:47 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 19 Mar 2024 05:26:52 GMT
+// Generated on Tue, 19 Mar 2024 16:19:47 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 19 Mar 2024 05:26:52 GMT
+// Generated on Tue, 19 Mar 2024 16:19:47 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.2.1",
+  "version": "78.2.2",
   "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.89.0",
+    "@gitlab/svgs": "3.90.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/filtered_search/filtered_search.stories.js

@@ -349,7 +349,7 @@ const tokens = [
     token: UserToken,
   },
   { type: 'user', icon: 'user', title: 'Assignee', dataType: 'user', token: UserToken },
-  { type: 'milestone', icon: 'clock', title: 'Milestone', unique: true, token: MilestoneToken },
+  { type: 'milestone', icon: 'milestone', title: 'Milestone', unique: true, token: MilestoneToken },
   { type: 'label', icon: 'labels', title: 'Label', token: LabelToken },
   { type: 'weight', icon: 'weight', title: 'Weight', unique: true, token: GlFilteredSearchToken },
   {

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

@@ -18,13 +18,12 @@ table.gl-table {
       @include gl-font-weight-bold;
       @include gl-text-gray-900;
 
-      &.gl-text-right > span {
-        @include gl-display-flex;
+      &.gl-text-right > div {
         flex-direction: row-reverse;
 
-        span:nth-of-type(2) {
+        div.gl-ml-2 {
           @include gl-ml-0;
-          @include gl-mr-3;
+          @include gl-mr-2;
         }
       }
 
@@ -129,6 +128,14 @@ table.gl-table {
   &.table-hover td.table-secondary:hover {
     background-color: $gray-10;
   }
+
+  thead th:hover {
+    background-color: transparent !important;
+
+    [name='sort-icon'] {
+      display: flex !important;
+    }
+  }
 }
 
 .table.b-table > thead > tr > th,

package/src/components/base/table/table.spec.js

@@ -27,7 +27,10 @@ describe('GlTable', () => {
   };
 
   const findBTable = () => wrapper.findComponent(BTable);
-  const findFirstColHeader = () => findBTable().find('thead').findAll('th').at(0);
+  const findColHeaderAt = (index) => findBTable().find('thead').findAll('th').at(index);
+  const findFirstColHeader = () => findColHeaderAt(0);
+  const findSortIconForHeaderAt = (index) =>
+    findColHeaderAt(index).find('[data-testid="sort-icon"]');
 
   afterEach(() => {
     logWarning.mockClear();
@@ -80,19 +83,31 @@ describe('GlTable', () => {
   });
 
   describe('sortable columns', () => {
-    const field = {
-      key: 'name',
-      label: 'Name column',
-      sortable: true,
-    };
+    const fields = [
+      {
+        key: 'name',
+        label: 'Name column',
+        sortable: true,
+      },
+      {
+        key: 'age',
+        label: 'Age column',
+        sortable: true,
+      },
+      {
+        key: 'email',
+        label: 'Email column',
+        sortable: false,
+      },
+    ];
 
     describe('without custom slots', () => {
       beforeEach(() => {
-        factory({ mountFn: mount, props: { fields: [field] } });
+        factory({ mountFn: mount, props: { fields } });
       });
 
       it('sets the correct column label', () => {
-        expect(findFirstColHeader().text()).toMatch(field.label);
+        expect(findFirstColHeader().text()).toMatch(fields[0].label);
       });
 
       it('renders the ascending sort icon', async () => {
@@ -112,6 +127,40 @@ describe('GlTable', () => {
 
         expect(headerText).toContain('↓');
       });
+
+      it('sets initial sorting column using the sortBy property', () => {
+        factory({ mountFn: mount, props: { fields, sortBy: 'age' } });
+
+        expect(findSortIconForHeaderAt(0).classes()).toContain('gl-display-none');
+        expect(findSortIconForHeaderAt(1).classes()).not.toContain('gl-display-none');
+      });
+
+      it('sets initial sorting direction using the sortDesc property', () => {
+        factory({
+          mountFn: mount,
+          props: { fields, sortBy: 'age', sortDesc: true },
+        });
+
+        expect(findColHeaderAt(1).text()).toContain('↓');
+      });
+
+      it('does not render sort icon for non-sortable columns', () => {
+        expect(findSortIconForHeaderAt(2).exists()).toBe(false);
+      });
+
+      describe('changing the active sort column', () => {
+        it('hides sorting icon in previous active sort column', async () => {
+          await findColHeaderAt(0).trigger('click');
+
+          expect(findSortIconForHeaderAt(0).classes()).not.toContain('gl-display-none');
+          expect(findSortIconForHeaderAt(1).classes()).toContain('gl-display-none');
+
+          await findColHeaderAt(1).trigger('click');
+
+          expect(findSortIconForHeaderAt(0).classes()).toContain('gl-display-none');
+          expect(findSortIconForHeaderAt(1).classes()).not.toContain('gl-display-none');
+        });
+      });
     });
 
     describe('when headers are customized via slots', () => {
@@ -121,7 +170,7 @@ describe('GlTable', () => {
         factory({
           mountFn: mount,
           props: {
-            fields: [field],
+            fields,
           },
           scopedSlots: {
             'head(name)': `<div>${customSlotContent}</div>`,

package/src/components/base/table/table.stories.js

@@ -50,6 +50,7 @@ export const Default = (args, { argTypes }) => ({
     sort-by="col_three"
     sort-desc
     no-sort-reset
+    sort-direction="desc"
     hover
     selectable
     selected-variant="primary"

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

@@ -73,11 +73,22 @@ export default {
     isSortable({ field }) {
       return field?.sortable;
     },
+    activeSortingColumn({ field }) {
+      return this.localSortBy === field?.key;
+    },
     getSortingIcon({ field }) {
-      if (this.localSortBy !== field?.key) {
-        return null;
+      if (this.activeSortingColumn({ field })) {
+        if (this.localSortDesc) {
+          return '↓';
+        }
+        return '↑';
+      }
+
+      if (this.$attrs['sort-direction'] === 'desc') {
+        return '↓';
       }
-      return this.localSortDesc ? 'arrow-down' : 'arrow-up';
+
+      return '↑';
     },
   },
 };
@@ -96,27 +107,21 @@ export default {
       <slot :name="slotName" v-bind="scope"></slot>
     </template>
     <template v-for="headSlotName in headSlots" #[headSlotName]="scope">
-      <span :key="headSlotName">
+      <div :key="headSlotName" class="gl-display-flex">
         <slot :name="headSlotName" v-bind="scope"
           ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <span
-            v-if="getSortingIcon(scope) && getSortingIcon(scope) === 'arrow-up'"
-            class="gl-ml-3 gl-min-w-5 gl-text-gray-900 gl-text-center"
-            name="sort-icon"
-          >
-            ↑
-          </span>
-          <span
-            v-else-if="getSortingIcon(scope) && getSortingIcon(scope) === 'arrow-down'"
-            class="gl-ml-3 gl-min-w-5 gl-text-gray-900 gl-text-center"
-            name="sort-icon"
-          >
-            ↓
-          </span>
-          <span v-else class="gl-display-inline-block gl-w-5 gl-h-3 gl-ml-3"></span>
+          <div class="gl-ml-2 gl-w-5 gl-text-gray-900 gl-display-flex gl-justify-content-center">
+            <span
+              name="sort-icon"
+              data-testid="sort-icon"
+              :class="{ 'gl-display-none': !activeSortingColumn(scope) }"
+            >
+              {{ getSortingIcon(scope) }}
+            </span>
+          </div>
         </template>
-      </span>
+      </div>
     </template>
   </b-table>
 </template>