@gitlab/ui 78.2.1 → 78.2.3

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 Thu, 21 Mar 2024 17:32:26 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 Thu, 21 Mar 2024 17:32:27 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 Thu, 21 Mar 2024 17:32:27 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 Thu, 21 Mar 2024 17:32:26 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 Thu, 21 Mar 2024 17:32:27 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 Thu, 21 Mar 2024 17:32:27 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.3",
   "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/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -337,6 +337,20 @@ describe('base dropdown', () => {
       expect(toggle.element).toHaveFocus();
     });
 
+    it('should close menu on Escape when focus is on toggle', async () => {
+      const toggle = findDefaultDropdownToggle();
+      const menu = findDropdownMenu();
+
+      await toggle.trigger('click');
+      expect(menu.classes('gl-display-block!')).toBe(true);
+      expect(toggle.attributes('aria-expanded')).toBe('true');
+
+      await toggle.trigger('keydown.esc');
+      expect(menu.classes('gl-display-block!')).toBe(false);
+      expect(toggle.attributes('aria-expanded')).toBe('false');
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
+    });
+
     describe('when the consumer takes over the focus', () => {
       let consumerButton;
 
@@ -487,6 +501,18 @@ describe('base dropdown', () => {
         expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
         expect(toggle.find(`[data-testid="${customToggleTestId}"]`).element).toHaveFocus();
       });
+
+      it('should close menu on Escape when focus is on toggle', async () => {
+        const toggle = findCustomDropdownToggle();
+        const menu = findDropdownMenu();
+
+        await toggle.trigger('click');
+        expect(menu.classes('gl-display-block!')).toBe(true);
+
+        await toggle.trigger('keydown.esc');
+        expect(menu.classes('gl-display-block!')).toBe(false);
+        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
+      });
     });
 
     it('should emit `GL_DROPDOWN_FOCUS_CONTENT` event on `ARROW_DOWN`', () => {

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -400,9 +400,10 @@ export default {
         return;
       }
 
+      const hadFocusWithin = this.$el.contains(document.activeElement);
       const hasToggled = await this.toggle(event);
 
-      if (!this.$el.contains(document.activeElement)) {
+      if (!hadFocusWithin) {
         return;
       }
 
@@ -459,6 +460,7 @@ export default {
       ref="toggle"
       data-testid="base-dropdown-toggle"
       v-on="toggleListeners"
+      @keydown.esc.stop.prevent="close"
     >
       <!-- @slot Custom toggle button content -->
       <slot name="toggle">

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -59,6 +59,7 @@ describe('GlCollapsibleListbox', () => {
   const findSelectAllButton = () => wrapper.find("[data-testid='listbox-select-all-button']");
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
   const findDropdownMenu = () => wrapper.find("[data-testid='base-dropdown-menu']");
+  const findDropdownToggle = () => wrapper.find("[data-testid='base-dropdown-toggle'");
 
   it('passes custom offset to the base dropdown', () => {
     const dropdownOffset = { mainAxis: 10, crossAxis: 40 };
@@ -927,4 +928,17 @@ describe('GlCollapsibleListbox', () => {
       expect(findDropdownMenu().classes()).not.toContain('gl-display-block!');
     });
   });
+
+  it('focuses the toggle when closed by ESC key while item had focus', async () => {
+    buildWrapper({
+      selected: mockOptions[1].value,
+      items: mockOptions,
+      startOpened: true,
+    });
+
+    await nextTick();
+    findListItem(1).trigger('keydown.esc');
+    await nextTick();
+    expect(findDropdownToggle().element).toHaveFocus();
+  });
 });

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>

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -39,16 +39,11 @@ const generatePartialSlashCommands = () => {
 describe('GlDuoChat', () => {
   let wrapper;
 
-  const createComponent = ({ propsData = {}, data = {}, slots = {} } = {}) => {
+  const createComponent = ({ propsData = {}, slots = {} } = {}) => {
     jest.spyOn(DuoChatLoader.methods, 'computeTransitionWidth').mockImplementation();
 
     wrapper = shallowMount(GlDuoChat, {
       propsData,
-      data() {
-        return {
-          ...data,
-        };
-      },
       slots,
       stubs: {
         DuoChatLoader,
@@ -76,6 +71,8 @@ describe('GlDuoChat', () => {
   const findSlashCommands = () => wrapper.findAllComponents(GlDropdownItem);
   const findSelectedSlashCommand = () => wrapper.find('.active-command');
 
+  const setPromptInput = (val) => findChatInput().vm.$emit('input', val);
+
   beforeEach(() => {
     createComponent();
   });
@@ -321,8 +318,8 @@ describe('GlDuoChat', () => {
       `('$event should $action the prompt form', ({ trigger, expectEmitted } = {}) => {
         createComponent({
           propsData: { messages: [], isChatAvailable: true },
-          data: { prompt: promptStr },
         });
+        setPromptInput(promptStr);
         trigger();
         expect(wrapper.emitted('send-chat-prompt')).toEqual(expectEmitted);
       });
@@ -335,8 +332,8 @@ describe('GlDuoChat', () => {
       `('prevents submission when loading $desc', ({ msgs } = {}) => {
         createComponent({
           propsData: { isChatAvailable: true, isLoading: true, messages: msgs },
-          data: { prompt: promptStr },
         });
+        setPromptInput(promptStr);
         clickSubmit();
         expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
       });
@@ -352,18 +349,21 @@ describe('GlDuoChat', () => {
       ])('prevents submission when streaming (messages = "%o")', (msgs = []) => {
         createComponent({
           propsData: { isChatAvailable: true, messages: msgs },
-          data: { prompt: promptStr },
         });
+        setPromptInput(promptStr);
         clickSubmit();
         expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
       });
 
       it('resets the prompt after form submission', async () => {
         const prompt = 'foo';
-        createComponent({ data: { prompt } });
+        createComponent();
+        await setPromptInput(prompt);
         expect(findChatInput().props('value')).toBe(prompt);
+
         clickSubmit();
         await nextTick();
+
         expect(findChatInput().props('value')).toBe('');
       });
 
@@ -372,7 +372,8 @@ describe('GlDuoChat', () => {
         jest.spyOn(HTMLElement.prototype, 'focus').mockImplementation(function focusMockImpl() {
           focusSpy(this);
         });
-        createComponent({ data: { prompt: 'TEST!' } });
+        createComponent();
+        await setPromptInput('TEST!');
 
         clickSubmit();
         await nextTick();
@@ -385,8 +386,8 @@ describe('GlDuoChat', () => {
       it('emits the event with the reset prompt', () => {
         createComponent({
           propsData: { messages, isChatAvailable: true },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toEqual([[CHAT_RESET_MESSAGE]]);
@@ -396,8 +397,8 @@ describe('GlDuoChat', () => {
       it('reset does nothing when chat is loading', () => {
         createComponent({
           propsData: { messages, isChatAvailable: true, isLoading: true },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
@@ -407,8 +408,8 @@ describe('GlDuoChat', () => {
       it('reset does nothing when there are no messages', () => {
         createComponent({
           propsData: { messages: [], isChatAvailable: true },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
@@ -429,8 +430,8 @@ describe('GlDuoChat', () => {
             messages: existingMessages,
             isChatAvailable: true,
           },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
@@ -442,16 +443,17 @@ describe('GlDuoChat', () => {
     });
   });
 
-  describe('interaction', () => {
-    it('is hidden after the header button is clicked', async () => {
+  describe('when closed', () => {
+    beforeEach(async () => {
       findCloseButton().vm.$emit('click');
       await nextTick();
-      expect(findChatComponent().exists()).toBe(false);
     });
 
-    it('resets the hidden status of the component on loading', async () => {
-      createComponent({ data: { isHidden: true } });
+    it('is hidden', () => {
       expect(findChatComponent().exists()).toBe(false);
+    });
+
+    it('when starts loading, resets hidden status', async () => {
       // setProps is justified here because we are testing the component's
       // reactive behavior which consistutes an exception
       // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
@@ -461,7 +463,9 @@ describe('GlDuoChat', () => {
       await nextTick();
       expect(findChatComponent().exists()).toBe(true);
     });
+  });
 
+  describe('interaction', () => {
     it('renders custom loader when isLoading', () => {
       createComponent({ propsData: { isLoading: true } });
       expect(findCustomLoader().exists()).toBe(true);
@@ -554,11 +558,8 @@ describe('GlDuoChat', () => {
         });
 
         it('does not render slash commands when prompt is "/"', async () => {
-          createComponent({
-            data: {
-              prompt: '/',
-            },
-          });
+          createComponent();
+          setPromptInput('/');
 
           await nextTick();
           expect(findSlashCommandsCard().exists()).toBe(false);
@@ -582,10 +583,8 @@ describe('GlDuoChat', () => {
             propsData: {
               slashCommands,
             },
-            data: {
-              prompt: '/',
-            },
           });
+          setPromptInput('/');
 
           await nextTick();
           expect(findSlashCommandsCard().exists()).toBe(true);
@@ -615,10 +614,8 @@ describe('GlDuoChat', () => {
                 propsData: {
                   slashCommands,
                 },
-                data: {
-                  prompt,
-                },
               });
+              setPromptInput(prompt);
 
               await nextTick();
               expect(findSlashCommandsCard().exists()).toBe(false);
@@ -634,10 +631,8 @@ describe('GlDuoChat', () => {
                 propsData: {
                   slashCommands,
                 },
-                data: {
-                  prompt,
-                },
               });
+              setPromptInput(prompt);
 
               await nextTick();
               expect(findSlashCommandsCard().exists()).toBe(true);
@@ -653,10 +648,8 @@ describe('GlDuoChat', () => {
                 propsData: {
                   slashCommands,
                 },
-                data: {
-                  prompt,
-                },
               });
+              setPromptInput(prompt);
 
               await nextTick();
               expect(findSlashCommandsCard().exists()).toBe(false);
@@ -688,10 +681,8 @@ describe('GlDuoChat', () => {
               propsData: {
                 slashCommands,
               },
-              data: {
-                prompt,
-              },
             });
+            setPromptInput(prompt);
 
             await nextTick();
             expect(findSlashCommands()).toHaveLength(expectedCommands.length);
@@ -709,10 +700,8 @@ describe('GlDuoChat', () => {
               slashCommands,
               messages,
             },
-            data: {
-              prompt: '/',
-            },
           });
+          setPromptInput('/');
         });
 
         it('toggles through commands on ArrowDown', async () => {
@@ -777,10 +766,8 @@ describe('GlDuoChat', () => {
               slashCommands,
               messages,
             },
-            data: {
-              prompt: '/',
-            },
           });
+          setPromptInput('/');
         });
 
         it('updates the selected command when hovering over it', async () => {