@gitlab/ui 58.2.0 → 58.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "58.2.0",
+  "version": "58.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,12 +83,12 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.2.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.24.0",
+    "@gitlab/svgs": "3.26.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -1,6 +1,12 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { ENTER, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, POPPER_CONFIG } from '../constants';
+import {
+  ARROW_DOWN,
+  GL_DROPDOWN_FOCUS_CONTENT,
+  GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_SHOWN,
+  POPPER_CONFIG,
+} from '../constants';
 import GlBaseDropdown from './base_dropdown.vue';
 
 const destroyPopper = jest.fn();
@@ -157,42 +163,50 @@ describe('base dropdown', () => {
     });
   });
 
-  describe('toggle visibility', () => {
+  describe('default toggle', () => {
     beforeEach(() => {
       buildWrapper();
     });
 
-    it('should toggle menu visibility on toggle button click', async () => {
+    it('should open the menu on click but keep focus on toggle', async () => {
       const toggle = findDefaultDropdownToggle();
       const menu = findDropdownMenu();
 
+      toggle.element.focus();
       // open menu clicking toggle btn
       await toggle.trigger('click');
       expect(menu.classes('gl-display-block!')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBe('true');
-      await nextTick();
-      expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
+      expect(toggle.element).toHaveFocus();
 
-      // close menu clicking toggle btn again
+      // close menu clicking toggle btn
       await toggle.trigger('click');
       expect(menu.classes('gl-display-block!')).toBe(false);
       expect(toggle.attributes('aria-expanded')).toBeUndefined();
-      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
+      expect(toggle.element).toHaveFocus();
+    });
+
+    it('should emit `GL_DROPDOWN_FOCUS_CONTENT` event on `ARROW_DOWN`', () => {
+      findDefaultDropdownToggle().trigger('keydown', { code: ARROW_DOWN });
+      expect(wrapper.emitted(GL_DROPDOWN_FOCUS_CONTENT)).toHaveLength(1);
     });
 
-    it('should close the menu when Escape is pressed inside menu and focus toggle', async () => {
+    it('should close menu on Escape and focus toggle', async () => {
       const toggle = findDefaultDropdownToggle();
       const menu = findDropdownMenu();
 
       // open menu clicking toggle btn
       await toggle.trigger('click');
       expect(menu.classes('gl-display-block!')).toBe(true);
+      expect(toggle.attributes('aria-expanded')).toBe('true');
 
-      // close menu pressing ESC on it
+      // close menu clicking toggle btn
+      menu.element.focus();
       await menu.trigger('keydown.esc');
       expect(menu.classes('gl-display-block!')).toBe(false);
       expect(toggle.attributes('aria-expanded')).toBeUndefined();
-      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
       expect(toggle.element).toHaveFocus();
     });
   });
@@ -221,22 +235,22 @@ describe('base dropdown', () => {
     });
 
     describe('toggle visibility', () => {
-      it('should toggle menu visibility on toggle button ENTER', async () => {
+      it('should toggle menu visibility on toggle click', async () => {
         const toggle = findCustomDropdownToggle();
         const firstToggleChild = findFirstToggleElement();
         const menu = findDropdownMenu();
         // open menu clicking toggle btn
-        await toggle.trigger('keydown', { code: ENTER });
+        await toggle.trigger('click');
         expect(menu.classes('gl-display-block!')).toBe(true);
         expect(firstToggleChild.attributes('aria-expanded')).toBe('true');
         await nextTick();
-        expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
+        expect(wrapper.emitted(GL_DROPDOWN_SHOWN)).toHaveLength(1);
 
         // close menu clicking toggle btn again
-        await toggle.trigger('keydown', { code: ENTER });
+        await toggle.trigger('click');
         expect(menu.classes('gl-display-block!')).toBe(false);
         expect(firstToggleChild.attributes('aria-expanded')).toBe('false');
-        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
       });
 
       it('should close the menu when Escape is pressed inside menu and focus first child in the toggle', async () => {
@@ -251,9 +265,15 @@ describe('base dropdown', () => {
         await menu.trigger('keydown.esc');
         expect(menu.classes('gl-display-block!')).toBe(false);
         expect(firstToggleChild.attributes('aria-expanded')).toBe('false');
-        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
         expect(toggle.find(`[data-testid="${customToggleTestId}"]`).element).toHaveFocus();
       });
     });
+
+    it('should emit `GL_DROPDOWN_FOCUS_CONTENT` event on `ARROW_DOWN`', () => {
+      const toggle = findCustomDropdownToggle();
+      toggle.trigger('keydown', { code: ARROW_DOWN });
+      expect(wrapper.emitted(GL_DROPDOWN_FOCUS_CONTENT)).toHaveLength(1);
+    });
   });
 });

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

@@ -7,7 +7,15 @@ import {
   dropdownPlacements,
   dropdownVariantOptions,
 } from '../../../../utils/constants';
-import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE } from '../constants';
+import {
+  POPPER_CONFIG,
+  GL_DROPDOWN_SHOWN,
+  GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_FOCUS_CONTENT,
+  ENTER,
+  SPACE,
+  ARROW_DOWN,
+} from '../constants';
 import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
 
 import GlButton from '../../button/button.vue';
@@ -162,6 +170,7 @@ export default {
           class: this.toggleButtonClasses,
           ...this.ariaAttributes,
           listeners: {
+            keydown: (event) => this.onKeydown(event),
             click: () => this.toggle(),
           },
         };
@@ -260,11 +269,28 @@ export default {
       this.toggleElement.focus();
     },
     onKeydown(event) {
-      const { code } = event;
+      const {
+        code,
+        target: { tagName },
+      } = event;
+
+      let toggleOnEnter = true;
+      let toggleOnSpace = true;
+
+      if (tagName === 'BUTTON') {
+        toggleOnEnter = false;
+        toggleOnSpace = false;
+      } else if (tagName === 'A') {
+        toggleOnEnter = false;
+      }
 
-      if (code === ENTER || code === SPACE) {
+      if ((code === ENTER && toggleOnEnter) || (code === SPACE && toggleOnSpace)) {
         this.toggle();
       }
+
+      if (code === ARROW_DOWN) {
+        this.$emit(GL_DROPDOWN_FOCUS_CONTENT, event);
+      }
     },
   },
 };

package/src/components/base/new_dropdowns/constants.js

@@ -12,6 +12,7 @@ export const POPPER_CONFIG = {
 // base dropdown events
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
+export const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
 // KEY Codes
 export const ARROW_DOWN = 'ArrowDown';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -4,6 +4,7 @@ import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_FOCUS_CONTENT,
   ARROW_DOWN,
   ARROW_UP,
   HOME,
@@ -82,10 +83,6 @@ describe('GlDisclosureDropdown', () => {
     it('should re-emit the event', () => {
       expect(wrapper.emitted(GL_DROPDOWN_SHOWN)).toHaveLength(1);
     });
-
-    it('should focus the first item', () => {
-      expect(findDisclosureItems().at(0).find(ITEM_SELECTOR).element).toHaveFocus();
-    });
   });
 
   describe('onHide', () => {
@@ -112,7 +109,11 @@ describe('GlDisclosureDropdown', () => {
       thirdItem = findListItem(2);
     });
 
-    it('should move the focus down the list of items on `ARROW_DOWN` and stop on the last item', async () => {
+    it('should move the focus from toggle and down the list of items on `ARROW_DOWN` and stop on the last item', async () => {
+      findBaseDropdown().vm.$emit(
+        GL_DROPDOWN_FOCUS_CONTENT,
+        new KeyboardEvent('keydown', { code: ARROW_DOWN })
+      );
       expect(firstItem.element).toHaveFocus();
       await firstItem.trigger('keydown', { code: ARROW_DOWN });
       expect(secondItem.element).toHaveFocus();
@@ -135,6 +136,10 @@ describe('GlDisclosureDropdown', () => {
     });
 
     it('should move focus to the last item on `END` keydown', async () => {
+      findBaseDropdown().vm.$emit(
+        GL_DROPDOWN_FOCUS_CONTENT,
+        new KeyboardEvent('keydown', { code: ARROW_DOWN })
+      );
       expect(firstItem.element).toHaveFocus();
       await firstItem.trigger('keydown', { code: END });
       expect(thirdItem.element).toHaveFocus();
@@ -158,6 +163,10 @@ describe('GlDisclosureDropdown', () => {
       });
 
       it('should skip over it', async () => {
+        findBaseDropdown().vm.$emit(
+          GL_DROPDOWN_FOCUS_CONTENT,
+          new KeyboardEvent('keydown', { code: ARROW_DOWN })
+        );
         expect(firstItem.element).toHaveFocus();
         await firstItem.trigger('keydown', { code: ARROW_DOWN });
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -6,6 +6,7 @@ import { stopEvent, filterVisible } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_FOCUS_CONTENT,
   HOME,
   END,
   ARROW_DOWN,
@@ -26,6 +27,7 @@ export default {
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
+    GL_DROPDOWN_FOCUS_CONTENT,
   },
   components: {
     GlBaseDropdown,
@@ -188,12 +190,6 @@ export default {
       this.$refs.baseDropdown.close();
     },
     onShow() {
-      const items = this.getFocusableListItemElements();
-
-      if (items.length) {
-        this.focusItem(0, items);
-      }
-
       /**
        * Emitted when dropdown is shown
        *
@@ -285,6 +281,7 @@ export default {
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
+    @[$options.events.GL_DROPDOWN_FOCUS_CONTENT]="onKeydown"
   >
     <template v-if="hasCustomToggle" #toggle>
       <!-- @slot Custom toggle content -->

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

@@ -63,6 +63,36 @@ describe('GlCollapsibleListbox', () => {
     });
   });
 
+  describe('toggle classes', () => {
+    describe.each`
+      toggleClass              | multiple | selected                  | expectedToggleClasses
+      ${'customClass'}         | ${false} | ${mockOptions[0].value}   | ${['customClass']}
+      ${{ customClass: true }} | ${false} | ${mockOptions[0].value}   | ${[{ customClass: true }]}
+      ${['customClass']}       | ${false} | ${mockOptions[0].value}   | ${[['customClass']]}
+      ${'customClass'}         | ${false} | ${null}                   | ${['customClass', 'gl-text-gray-500!']}
+      ${{ customClass: true }} | ${false} | ${undefined}              | ${[{ customClass: true }, 'gl-text-gray-500!']}
+      ${['customClass']}       | ${false} | ${null}                   | ${[['customClass'], 'gl-text-gray-500!']}
+      ${'customClass'}         | ${true}  | ${[mockOptions[0].value]} | ${['customClass']}
+      ${{ customClass: true }} | ${true}  | ${[mockOptions[0].value]} | ${[{ customClass: true }]}
+      ${['customClass']}       | ${true}  | ${[mockOptions[0].value]} | ${[['customClass']]}
+      ${'customClass'}         | ${true}  | ${null}                   | ${['customClass', 'gl-text-gray-500!']}
+      ${{ customClass: true }} | ${true}  | ${undefined}              | ${[{ customClass: true }, 'gl-text-gray-500!']}
+      ${['customClass']}       | ${true}  | ${null}                   | ${[['customClass'], 'gl-text-gray-500!']}
+    `('when listbox', ({ toggleClass, multiple, selected, expectedToggleClasses }) => {
+      beforeEach(() => {
+        buildWrapper({ items: mockOptions, toggleClass, multiple, selected });
+      });
+
+      it(`is ${multiple ? 'multi' : 'single'}-select and ${
+        selected
+          ? 'has selected - does not set non-selected styles'
+          : 'does not have selected - sets the non-selected styles'
+      }`, () => {
+        expect(findBaseDropdown().props('toggleClass')).toEqual(expectedToggleClasses);
+      });
+    });
+  });
+
   describe('ARIA attributes', () => {
     it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container`', async () => {
       await buildWrapper({ items: mockOptions });

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

@@ -45,6 +45,7 @@ const generateProps = ({
   searchPlaceholder = defaultValue('searchPlaceholder'),
   noCaret = defaultValue('noCaret'),
   placement = defaultValue('placement'),
+  toggleClass,
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
   headerText = defaultValue('headerText'),
@@ -71,6 +72,7 @@ const generateProps = ({
   searchPlaceholder,
   noCaret,
   placement,
+  toggleClass,
   toggleText,
   textSrOnly,
   headerText,
@@ -100,6 +102,7 @@ const makeBindings = (overrides = {}) =>
     ':search-placeholder': 'searchPlaceholder',
     ':no-caret': 'noCaret',
     ':placement': 'placement',
+    ':toggle-class': 'toggleClass',
     ':toggle-text': 'toggleText',
     ':text-sr-only': 'textSrOnly',
     ':header-text': 'headerText',
@@ -231,9 +234,10 @@ export const CustomListItem = (args, { argTypes }) => ({
   },
   computed: {
     customToggleText() {
-      return this.selected.length !== 1
-        ? `${this.selected.length} assignees`
-        : this.items.find(({ value }) => value === this.selected[0]).text;
+      if (this.selected.length === 0) return 'Select assignee(s)';
+      if (this.selected.length === 1)
+        return this.items.find(({ value }) => value === this.selected[0]).text;
+      return `${this.selected.length} assignees`;
     },
   },
   methods: {

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

@@ -349,6 +349,17 @@ export default {
     hasCustomToggle() {
       return Boolean(this.$scopedSlots.toggle);
     },
+    hasSelection() {
+      return Boolean(this.selectedValues.length);
+    },
+    toggleButtonClasses() {
+      const toggleClasses = [this.toggleClass];
+
+      if (!this.hasSelection) {
+        toggleClasses.push('gl-text-gray-500!');
+      }
+      return toggleClasses;
+    },
   },
   watch: {
     selected: {
@@ -561,7 +572,7 @@ export default {
     :block="block"
     :toggle-id="toggleId"
     :toggle-text="listboxToggleText"
-    :toggle-class="toggleClass"
+    :toggle-class="toggleButtonClasses"
     :text-sr-only="textSrOnly"
     :category="category"
     :variant="variant"

package/src/scss/utilities.scss

@@ -1743,6 +1743,16 @@
   border-bottom-right-radius: 0 !important;
 }
 
+.gl-rounded-bottom-base {
+  border-bottom-left-radius: $gl-border-radius-base;
+  border-bottom-right-radius: $gl-border-radius-base;
+}
+
+.gl-rounded-bottom-base\! {
+  border-bottom-left-radius: $gl-border-radius-base !important;
+  border-bottom-right-radius: $gl-border-radius-base !important;
+}
+
 .gl-rounded-top-left-small {
   border-top-left-radius: $gl-border-radius-small;
 }

package/src/scss/utility-mixins/border.scss

@@ -421,6 +421,11 @@
   border-bottom-right-radius: 0;
 }
 
+@mixin gl-rounded-bottom-base {
+  border-bottom-left-radius: $gl-border-radius-base;
+  border-bottom-right-radius: $gl-border-radius-base;
+}
+
 @mixin gl-rounded-top-left-small {
   border-top-left-radius: $gl-border-radius-small;
 }