@gitlab/ui 78.1.1 → 78.2.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Mar 2024 16:29:47 GMT
+ * Generated on Thu, 14 Mar 2024 18:11:11 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Mar 2024 16:29:47 GMT
+ * Generated on Thu, 14 Mar 2024 18:11:11 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 Mar 2024 16:29:47 GMT
+ * Generated on Thu, 14 Mar 2024 18:11:11 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, 05 Mar 2024 16:29:47 GMT
+ * Generated on Thu, 14 Mar 2024 18:11:11 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, 05 Mar 2024 16:29:47 GMT
+// Generated on Thu, 14 Mar 2024 18:11:11 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, 05 Mar 2024 16:29:47 GMT
+// Generated on Thu, 14 Mar 2024 18:11:11 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

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

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

@@ -7,9 +7,7 @@ const defaultValue = (prop) => GlPopover.props[prop].default;
 const components = { GlPopover, GlButton };
 
 const contentString = `
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
-  pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
-  massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
+  A popover is used to provide supplemental, useful, unique information about an element.
 `;
 
 const getTemplate = (id, slots = '') => `
@@ -58,6 +56,23 @@ WithCloseButton.args = generateProps({
   showCloseButton: true,
 });
 
+export const TextLinks = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate(
+    'popover-with-text-links',
+    `
+    <template>
+      A popover is used to provide supplemental, useful, unique information about an element. This one has a link to <a class="gl-link" href="https://design.gitlab.com/components/popover">learn more about popovers.</a>
+    </template>
+  `
+  ),
+});
+TextLinks.args = generateProps({
+  showCloseButton: true,
+});
+
 export const OnClick = (_args, { viewMode, argTypes }) => ({
   viewMode,
   components,

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

@@ -17,6 +17,20 @@ table.gl-table {
     th {
       @include gl-font-weight-bold;
       @include gl-text-gray-900;
+
+      &.gl-text-right > span {
+        @include gl-display-flex;
+        flex-direction: row-reverse;
+
+        span:nth-of-type(2) {
+          @include gl-ml-0;
+          @include gl-mr-3;
+        }
+      }
+
+      [name='sort-icon'] {
+        user-select: none;
+      }
     }
 
     td {
@@ -121,3 +135,8 @@ table.gl-table {
 .table.b-table > tfoot > tr > th {
   background-image: none !important;
 }
+
+.table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left),
+.table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) {
+  padding-right: 1rem;
+}

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

@@ -3,7 +3,6 @@ import { shallowMount, mount } from '@vue/test-utils';
 import { BTable } from 'bootstrap-vue';
 import { logWarning } from '../../../utils/utils';
 import { waitForAnimationFrame } from '../../../utils/test_utils';
-import Icon from '../icon/icon.vue';
 import { glTableLiteWarning } from './constants';
 import Table from './table.vue';
 
@@ -100,20 +99,18 @@ describe('GlTable', () => {
         findFirstColHeader().trigger('click');
         await nextTick();
 
-        const icon = findFirstColHeader().findComponent(Icon);
+        const headerText = findFirstColHeader().text();
 
-        expect(icon.exists()).toBe(true);
-        expect(icon.props('name')).toBe('arrow-up');
+        expect(headerText).toContain('↑');
       });
 
       it('renders the descending sort icon', async () => {
         findFirstColHeader().trigger('click');
         findFirstColHeader().trigger('click');
         await nextTick();
-        const icon = findFirstColHeader().findComponent(Icon);
+        const headerText = findFirstColHeader().text();
 
-        expect(icon.exists()).toBe(true);
-        expect(icon.props('name')).toBe('arrow-down');
+        expect(headerText).toContain('↓');
       });
     });
 
@@ -136,11 +133,10 @@ describe('GlTable', () => {
         findFirstColHeader().trigger('click');
         await nextTick();
 
-        const icon = findFirstColHeader().findComponent(Icon);
+        const headerText = findFirstColHeader().text();
 
-        expect(icon.exists()).toBe(true);
-        expect(icon.props('name')).toBe('arrow-up');
-        expect(findFirstColHeader().text()).toContain(customSlotContent);
+        expect(headerText).toContain('↑');
+        expect(headerText).toContain(customSlotContent);
       });
     });
   });

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

@@ -7,15 +7,18 @@ const components = { GlTable };
 const tableItems = [
   {
     column_one: 'test',
-    col_2: 1234,
+    col_2: 'ABC',
+    col_three: 1234,
   },
   {
     column_one: 'test2',
-    col_2: 5678,
+    col_2: 'DEF',
+    col_three: 5678,
   },
   {
     column_one: 'test3',
-    col_2: 9101,
+    col_2: 'GHI',
+    col_three: 9101,
   },
 ];
 
@@ -44,8 +47,9 @@ export const Default = (args, { argTypes }) => ({
     :fixed="fixed"
     :stacked="stacked"
     :foot-clone="footClone"
-    sort-by="col_2"
+    sort-by="col_three"
     sort-desc
+    no-sort-reset
     hover
     selectable
     selected-variant="primary"
@@ -65,9 +69,16 @@ export const Default = (args, { argTypes }) => ({
     },
     {
       key: 'col_2',
+      label: 'Column 2',
+      formatter: (value) => value,
+    },
+    {
+      key: 'col_three',
       sortable: true,
       label: 'Column 2',
       formatter: (value) => value,
+      thClass: 'gl-text-right',
+      tdClass: 'gl-text-right',
     },
   ],
   items: tableItems,

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

@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTable } from 'bootstrap-vue';
-import GlIcon from '../icon/icon.vue';
 import { logWarning, isDev } from '../../../utils/utils';
 import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
 
@@ -18,7 +17,6 @@ export default {
   name: 'GlTable',
   components: {
     BTable,
-    GlIcon,
   },
   inheritAttrs: false,
   props: {
@@ -98,17 +96,27 @@ export default {
       <slot :name="slotName" v-bind="scope"></slot>
     </template>
     <template v-for="headSlotName in headSlots" #[headSlotName]="scope">
-      <div :key="headSlotName" class="gl-display-flex gl-align-items-center">
-        <slot :name="headSlotName" v-bind="scope">{{ scope.label }}</slot
+      <span :key="headSlotName">
+        <slot :name="headSlotName" v-bind="scope"
+          ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <gl-icon
-            v-if="getSortingIcon(scope)"
-            :name="getSortingIcon(scope)"
-            class="gl-ml-3 gl-min-w-5 gl-text-gray-900"
-          />
-          <div v-else class="gl-display-inline-block gl-w-5 gl-h-5 gl-ml-3"></div>
+          <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>
         </template>
-      </div>
+      </span>
     </template>
   </b-table>
 </template>

package/src/scss/variables.scss

@@ -213,6 +213,11 @@ $gl-transition-duration-slow: 0.4s;
 $gl-transition-duration-medium: 0.2s;
 $gl-transition-duration-fast: 0.1s;
 
+// Animation easings
+$gl-easing-linear: linear;
+$gl-easing-default: ease;
+$gl-easing-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
+
 // Focus ring
 $outline-offset: 1px;
 $outline-width: 2px;