@gitlab/ui 72.8.0 → 72.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.8.0",
+  "version": "72.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,13 +17,15 @@
   "files": [
     "src",
     "dist",
-    "translations.json"
+    "translations.json",
+    "tailwind.defaults.js"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
     "prebuild": "run-s build-tokens generate-utilities",
     "prepare": "run-s build-tokens generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
+    "deprecate-gl-utils": "./bin/deprecate_utils.js",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook src/scss/utilities.scss",
@@ -61,7 +63,8 @@
     "lint": "run-p prettier eslint stylelint markdownlint",
     "lint:fix": "run-s prettier:fix eslint:fix stylelint:fix markdownlint:fix",
     "generate:component": "plop",
-    "translations:collect": "make translations.json"
+    "translations:collect": "make translations.json",
+    "tailwind-config-viewer": "tailwind-config-viewer -o"
   },
   "dependencies": {
     "@floating-ui/dom": "1.4.3",
@@ -78,6 +81,7 @@
     "dompurify": "^2.4.7 || ^3.0.5",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
+    "tailwindcss": "3^",
     "vue": "^2.7.16"
   },
   "resolutions": {
@@ -154,7 +158,7 @@
     "react-dom": "^18.2.0",
     "rollup": "^2.53.1",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-postcss": "^3.1.1",
+    "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.6",
@@ -167,6 +171,8 @@
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
+    "tailwind-config-viewer": "1.7.3",
+    "tailwindcss": "3.4.1",
     "vue": "2.7.16",
     "vue-loader": "^15.8.3",
     "vue-loader-vue3": "npm:vue-loader@17",

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

@@ -476,7 +476,7 @@ describe('Filtered search', () => {
   });
 
   it('passes `searchButtonAttributes` prop to `GlSearchBoxByClick`', () => {
-    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+    const searchButtonAttributes = { 'data-prop': 'foo-bar' };
 
     createComponent({ searchButtonAttributes });
 
@@ -484,7 +484,7 @@ describe('Filtered search', () => {
   });
 
   it('passes `searchInputAttributes` prop to search term', async () => {
-    const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+    const searchInputAttributes = { 'data-prop': 'foo-bar' };
 
     createComponent({
       value: ['one'],

package/src/components/base/filtered_search/filtered_search_term.spec.js

@@ -15,7 +15,7 @@ const pointerClass = 'gl-cursor-pointer';
 describe('Filtered search term', () => {
   let wrapper;
 
-  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+  const searchInputAttributes = { 'data-testid': 'foo-bar', 'data-prop': 'foo-property' };
 
   const defaultProps = {
     availableTokens: [],
@@ -182,9 +182,7 @@ describe('Filtered search term', () => {
       searchInputAttributes,
     });
 
-    expect(findSearchInput().attributes('data-qa-selector')).toBe(
-      searchInputAttributes['data-qa-selector']
-    );
+    expect(findSearchInput().attributes('data-prop')).toBe(searchInputAttributes['data-prop']);
   });
 
   it('activates and deactivates when the input is focused/blurred', async () => {

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -10,7 +10,7 @@ const OPTIONS = [
 describe('Filtered search token segment', () => {
   let wrapper;
 
-  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+  const searchInputAttributes = { 'data-prop': 'foo-bar' };
 
   beforeAll(() => {
     if (!HTMLElement.prototype.scrollIntoView) {
@@ -336,7 +336,7 @@ describe('Filtered search token segment', () => {
       });
 
       it('does not add `searchInputAttributes` prop to search token segment', () => {
-        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+        expect(wrapper.attributes('data-prop')).toBe(undefined);
       });
     }
   );
@@ -353,9 +353,7 @@ describe('Filtered search token segment', () => {
     });
 
     it('adds `searchInputAttributes` prop to search token segment', () => {
-      expect(wrapper.attributes('data-qa-selector')).toBe(
-        searchInputAttributes['data-qa-selector']
-      );
+      expect(wrapper.attributes('data-prop')).toBe(searchInputAttributes['data-prop']);
     });
   });
 
@@ -363,8 +361,8 @@ describe('Filtered search token segment', () => {
     it('adds `searchInputAttributes` prop to search token segment input', () => {
       createComponent({ active: true, value: 'something', searchInputAttributes });
 
-      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
-        searchInputAttributes['data-qa-selector']
+      expect(wrapper.find('input').attributes('data-prop')).toBe(
+        searchInputAttributes['data-prop']
       );
     });
 

package/src/components/base/form/form_checkbox_tree/checkbox_tree_node.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <template>
-  <div :class="rootClass" :data-qa-selector="`${$options.qaPrefix}${option.value}`">
+  <div :class="rootClass" :data-testid="`${$options.qaPrefix}${option.value}`">
     <gl-form-checkbox
       :checked="node.isChecked"
       :indeterminate="node.isIndeterminate"

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js

@@ -87,7 +87,7 @@ describe('GlFormCheckboxTree', () => {
   const findCheckboxes = (el = wrapper) => el.findAllComponents(GlFormCheckbox);
   const countIndeterminate = () => wrapper.findAll('.js-is-indeterminate').length || 0;
   const countChecked = () => wrapper.findAll('.js-is-checked').length || 0;
-  const findCheckboxByValue = (value) => wrapper.find(`[data-qa-selector="${QA_PREFIX}${value}"]`);
+  const findCheckboxByValue = (value) => wrapper.find(`[data-testid="${QA_PREFIX}${value}"]`);
   const getCheckboxesCount = (el) => findCheckboxes(el).length;
   const findCheckboxInput = (checkbox) => checkbox.find('input[type="checkbox"]');
   const expectCheckboxUnchecked = (checkbox) => {
@@ -152,7 +152,7 @@ describe('GlFormCheckboxTree', () => {
 
     beforeEach(async () => {
       createWrapper({ options: getOptions(shape) });
-      checkbox = wrapper.find(`[data-qa-selector="${QA_PREFIX}${boxToCheck}"]`);
+      checkbox = wrapper.find(`[data-testid="${QA_PREFIX}${boxToCheck}"]`);
       await checkbox.find('input').setChecked();
     });
 

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

@@ -36,7 +36,7 @@ describe('base dropdown', () => {
         ...propsData,
       },
       slots: {
-        default: `<div class="${GL_DROPDOWN_CONTENTS_CLASS}" />`,
+        default: `<div class="${GL_DROPDOWN_CONTENTS_CLASS}"><button /></div>`,
         ...slots,
       },
       attachTo: document.body,
@@ -57,6 +57,8 @@ describe('base dropdown', () => {
   const findDropdownToggleText = () => findDefaultDropdownToggle().find('.gl-button-text');
   const findDropdownMenu = () => wrapper.find('.gl-new-dropdown-panel');
 
+  const moveFocusWithinDropdown = () => findDropdownMenu().find('button').element.focus();
+
   describe('Floating UI instance', () => {
     it("starts Floating UI's when opening the dropdown", async () => {
       buildWrapper();
@@ -324,14 +326,47 @@ describe('base dropdown', () => {
       expect(menu.classes('gl-display-block!')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBe('true');
 
-      // close menu clicking toggle btn
-      menu.element.focus();
+      moveFocusWithinDropdown();
+
+      // close menu by pressing ESC key
       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)).toHaveLength(1);
       expect(toggle.element).toHaveFocus();
     });
+
+    describe('when the consumer takes over the focus', () => {
+      let consumerButton;
+
+      beforeEach(() => {
+        consumerButton = document.createElement('button');
+        document.body.appendChild(consumerButton);
+      });
+
+      afterEach(() => {
+        consumerButton.remove();
+      });
+
+      it('does not steal the focus back from the consumer when closing the dropdown', async () => {
+        const toggle = findDefaultDropdownToggle();
+        const menu = findDropdownMenu();
+
+        // open menu clicking toggle btn
+        await toggle.trigger('click');
+
+        moveFocusWithinDropdown();
+
+        // consumer focuses some element
+        consumerButton.focus();
+
+        // close menu by pressing ESC key
+        await menu.trigger('keydown.esc');
+
+        expect(consumerButton).toHaveFocus();
+      });
+    });
   });
 
   describe('beforeClose event', () => {
@@ -353,7 +388,7 @@ describe('base dropdown', () => {
 
       await toggle.trigger('click');
 
-      menu.element.focus();
+      moveFocusWithinDropdown();
       await menu.trigger('keydown.esc');
       expect(menu.classes('gl-display-block!')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBeDefined();
@@ -365,6 +400,7 @@ describe('base dropdown', () => {
       const toggle = findDefaultDropdownToggle();
       const menu = findDropdownMenu();
       await toggle.trigger('click');
+      moveFocusWithinDropdown();
       await menu.trigger('keydown.esc');
       expect(event.type).toBe('keydown');
     });
@@ -444,6 +480,7 @@ describe('base dropdown', () => {
         expect(menu.classes('gl-display-block!')).toBe(true);
 
         // close menu pressing ESC on it
+        moveFocusWithinDropdown();
         await menu.trigger('keydown.esc');
         expect(menu.classes('gl-display-block!')).toBe(false);
         expect(firstToggleChild.attributes('aria-expanded')).toBe('false');

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

@@ -382,11 +382,23 @@ export default {
       }
       this.toggle(event);
     },
+    /**
+     * Closes the dropdown and returns the focus to the toggle unless it has has moved outside
+     * of the dropdown, meaning that the consumer needed to put some other element in focus.
+     *
+     * @param {KeyboardEvent?} event The keyboard event that caused the dropdown to close.
+     */
     async closeAndFocus(event) {
       if (!this.visible) {
         return;
       }
+
       const hasToggled = await this.toggle(event);
+
+      if (!this.$el.contains(document.activeElement)) {
+        return;
+      }
+
       if (hasToggled) {
         this.focusToggle();
       }

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

@@ -162,12 +162,10 @@ describe('search box by click component', () => {
   });
 
   it('adds `searchButtonAttributes` prop to search button', () => {
-    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+    const searchButtonAttributes = { 'data-prop': 'foo-bar' };
 
     createComponent({ searchButtonAttributes });
 
-    expect(findSearchButton().attributes('data-qa-selector')).toBe(
-      searchButtonAttributes['data-qa-selector']
-    );
+    expect(findSearchButton().attributes('data-prop')).toBe(searchButtonAttributes['data-prop']);
   });
 });

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

@@ -254,12 +254,12 @@ describe('GlTokenSelector', () => {
         createComponent({
           propsData: {
             textInputAttrs: {
-              'data-qa-selector': 'foo_bar',
+              'data-prop': 'foo_bar',
             },
           },
         });
 
-        expect(findTextInput().attributes('data-qa-selector')).toBe('foo_bar');
+        expect(findTextInput().attributes('data-prop')).toBe('foo_bar');
       });
     });
 

package/src/components/base/token_selector/token_selector.vue

@@ -91,7 +91,7 @@ export default {
       default: null,
     },
     /**
-     * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` attributes
      */
     textInputAttrs: {
       type: Object,

package/src/scss/storybook.scss

@@ -1,4 +1,7 @@
 @import 'tokens';
+
+@tailwind utilities;
+
 @import 'functions';
 @import 'variables';
 

package/src/scss/utilities.scss

@@ -6510,6 +6510,16 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-mr-auto\! {
   margin-right: auto !important;
 }
+.gl-md-mr-auto {
+  @include gl-media-breakpoint-up(md) {
+  margin-right: auto;
+  }
+}
+.gl-md-mr-auto\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-right: auto !important;
+  }
+}
 .gl-mr-0 {
   margin-right: 0;
 }

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

@@ -473,6 +473,12 @@
   margin-right: auto;
 }
 
+@mixin gl-md-mr-auto {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mr-auto;
+  }
+}
+
 @mixin gl-mr-0 {
   margin-right: 0;
 }

package/tailwind.defaults.js

@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: 'gl-',
+  corePlugins: [],
+};