@gitlab/ui 48.3.1 → 49.0.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [49.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.0.0...v49.0.1) (2022-10-24)
+
+
+### Bug Fixes
+
+* **GlListbox:** fix dropdown positioning ([18d061f](https://gitlab.com/gitlab-org/gitlab-ui/commit/18d061fc905ac906a6c88f080b08b9e085eb372e))
+
+# [49.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.3.1...v49.0.0) (2022-10-24)
+
+
+### Bug Fixes
+
+* **GlToggle:** Fix help text visibility ([1bd4137](https://gitlab.com/gitlab-org/gitlab-ui/commit/1bd4137fca78152966869b0b6781fe44c5f9a69e))
+
+
+### BREAKING CHANGES
+
+* **GlToggle:** Hide help text when `labelPosition: left`
+
 ## [48.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.3.0...v48.3.1) (2022-10-24)
 
 

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -147,14 +147,6 @@ var script = {
 
   },
 
-  updated() {
-    if (this.visible) {
-      var _this$popper;
-
-      (_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update();
-    }
-  },
-
   mounted() {
     this.$nextTick(() => {
       this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
@@ -166,11 +158,24 @@ var script = {
   },
 
   methods: {
-    toggle() {
+    async toggle() {
       this.visible = !this.visible;
 
       if (this.visible) {
-        this.popper.update();
+        var _this$popper;
+
+        /* Initially dropdown is hidden with `display="none"`.
+          When `visible` prop is toggled ON, with the `nextTick` we wait for the DOM update -
+          dropdown's `display="block"` is set (adding CSS class `show`).
+          After that we can recalculate its position (calling `popper.update()`).
+          https://github.com/floating-ui/floating-ui/issues/630:
+          "Unfortunately there's not any way to compute the position of an element not rendered in the document".
+          Then we `await` while the new dropdown position is calculated and DOM updated accordingly.
+          After we can  emit the `GL_DROPDOWN_SHOWN` event to the parent which might interact with updated  dropdown,
+          e.g. set focus..
+         */
+        await this.$nextTick();
+        await ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update());
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.$emit(GL_DROPDOWN_HIDDEN);

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -326,23 +326,21 @@ var script = {
     },
 
     onShow() {
-      this.$nextTick(() => {
-        if (this.searchable) {
-          this.focusSearchInput();
-        } else {
-          var _this$selectedIndices;
+      if (this.searchable) {
+        this.focusSearchInput();
+      } else {
+        var _this$selectedIndices;
 
-          this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
-        }
-        /**
-         * Emitted when dropdown is shown
-         *
-         * @event shown
-         */
+        this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
+      }
+      /**
+       * Emitted when dropdown is shown
+       *
+       * @event shown
+       */
 
 
-        this.$emit(GL_DROPDOWN_SHOWN);
-      });
+      this.$emit(GL_DROPDOWN_SHOWN);
     },
 
     onHide() {
@@ -413,12 +411,10 @@ var script = {
     },
 
     focusItem(index, elements) {
-      this.nextFocusedItemIndex = index;
-      this.$nextTick(() => {
-        var _elements$index;
+      var _elements$index;
 
-        (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
-      });
+      this.nextFocusedItemIndex = index;
+      (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
     },
 
     focusSearchInput() {

package/dist/components/base/toggle/toggle.js

@@ -90,7 +90,7 @@ var script = {
   computed: {
     shouldRenderHelp() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help);
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
 
     icon() {
@@ -103,6 +103,10 @@ var script = {
 
     isChecked() {
       return this.value ? 'true' : 'false';
+    },
+
+    isVerticalLayout() {
+      return this.labelPosition === 'top' || this.labelPosition === 'hidden';
     }
 
   },
@@ -133,8 +137,8 @@ const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-toggle-wrapper gl-display-flex gl-mb-0",class:{
-    'gl-flex-direction-column': _vm.labelPosition === 'top' || _vm.labelPosition === 'hidden',
-    'gl-toggle-label-inline': _vm.labelPosition === 'left',
+    'gl-flex-direction-column': _vm.isVerticalLayout,
+    'gl-toggle-label-inline': !_vm.isVerticalLayout,
     'is-disabled': _vm.disabled,
   },attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label gl-flex-shrink-0",class:{ 'gl-sr-only': _vm.labelPosition === 'hidden' },attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{staticClass:"gl-flex-shrink-0",class:{
       'gl-toggle': true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "48.3.1",
+  "version": "49.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -144,6 +144,7 @@ describe('base dropdown', () => {
       await toggle.trigger('click');
       expect(menu.classes('show')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBe('true');
+      await nextTick();
       expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
 
       // close menu clicking toggle btn again

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

@@ -138,11 +138,6 @@ export default {
       };
     },
   },
-  updated() {
-    if (this.visible) {
-      this.popper?.update();
-    }
-  },
   mounted() {
     this.$nextTick(() => {
       this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
@@ -152,11 +147,22 @@ export default {
     this.popper.destroy();
   },
   methods: {
-    toggle() {
+    async toggle() {
       this.visible = !this.visible;
 
       if (this.visible) {
-        this.popper.update();
+        /* Initially dropdown is hidden with `display="none"`.
+          When `visible` prop is toggled ON, with the `nextTick` we wait for the DOM update -
+          dropdown's `display="block"` is set (adding CSS class `show`).
+          After that we can recalculate its position (calling `popper.update()`).
+          https://github.com/floating-ui/floating-ui/issues/630:
+          "Unfortunately there's not any way to compute the position of an element not rendered in the document".
+          Then we `await` while the new dropdown position is calculated and DOM updated accordingly.
+          After we can  emit the `GL_DROPDOWN_SHOWN` event to the parent which might interact with updated  dropdown,
+          e.g. set focus..
+         */
+        await this.$nextTick();
+        await this.popper?.update();
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.$emit(GL_DROPDOWN_HIDDEN);

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

@@ -247,19 +247,25 @@ describe('GlListbox', () => {
     });
 
     describe('when `searchable` is enabled', () => {
-      it('should move focus to the first item on search input `ARROW_DOWN`', async () => {
+      let searchbox;
+
+      beforeEach(() => {
         buildWrapper({ items: mockOptions, searchable: true });
         findBaseDropdown().vm.$emit(GL_DROPDOWN_SHOWN);
-        findSearchBox().trigger('keydown', { code: ARROW_DOWN });
+        firstItem = findListItem(0);
+        searchbox = findSearchBox();
+      });
+
+      it('should move focus to the first item on search input `ARROW_DOWN`', async () => {
+        expect(searchbox.element).toHaveFocus();
+        searchbox.trigger('keydown', { code: ARROW_DOWN });
         expect(firstItem.element).toHaveFocus();
       });
 
       it('should move focus to the search input on first item `ARROW_UP', async () => {
-        buildWrapper({ items: mockOptions, searchable: true });
-        findBaseDropdown().vm.$emit(GL_DROPDOWN_SHOWN);
-        const focusSpy = jest.spyOn(wrapper.vm.$refs.searchBox, 'focusInput');
-        await firstItem.trigger('keydown', { code: ARROW_UP });
-        expect(focusSpy).toHaveBeenCalled();
+        searchbox.trigger('keydown', { code: ARROW_DOWN });
+        firstItem.trigger('keydown', { code: ARROW_UP });
+        expect(searchbox.element).toHaveFocus();
       });
     });
   });

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

@@ -293,19 +293,17 @@ export default {
       return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
     },
     onShow() {
-      this.$nextTick(() => {
-        if (this.searchable) {
-          this.focusSearchInput();
-        } else {
-          this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
-        }
-        /**
-         * Emitted when dropdown is shown
-         *
-         * @event shown
-         */
-        this.$emit(GL_DROPDOWN_SHOWN);
-      });
+      if (this.searchable) {
+        this.focusSearchInput();
+      } else {
+        this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
+      }
+      /**
+       * Emitted when dropdown is shown
+       *
+       * @event shown
+       */
+      this.$emit(GL_DROPDOWN_SHOWN);
     },
     onHide() {
       /**
@@ -366,9 +364,7 @@ export default {
     focusItem(index, elements) {
       this.nextFocusedItemIndex = index;
 
-      this.$nextTick(() => {
-        elements[index]?.focus();
-      });
+      elements[index]?.focus();
     },
     focusSearchInput() {
       this.$refs.searchBox.focusInput();

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

@@ -86,10 +86,11 @@ describe('toggle', () => {
   });
 
   describe.each`
-    state                  | help         | props                 | options                          | getAriaDescribedBy
-    ${'with help'}         | ${helpText}  | ${{ help: helpText }} | ${undefined}                     | ${() => findHelpElement().attributes('id')}
-    ${'with help in slot'} | ${helpText}  | ${undefined}          | ${{ slots: { help: helpText } }} | ${() => findHelpElement().attributes('id')}
-    ${'without help'}      | ${undefined} | ${undefined}          | ${undefined}                     | ${() => undefined}
+    state                                 | help         | props                                                          | options                          | getAriaDescribedBy
+    ${'with help'}                        | ${helpText}  | ${{ help: helpText }}                                          | ${undefined}                     | ${() => findHelpElement().attributes('id')}
+    ${'with help in slot'}                | ${helpText}  | ${undefined}                                                   | ${{ slots: { help: helpText } }} | ${() => findHelpElement().attributes('id')}
+    ${'without help'}                     | ${undefined} | ${undefined}                                                   | ${undefined}                     | ${() => undefined}
+    ${'with help and labelPosition left'} | ${undefined} | ${{ help: helpText, labelPosition: toggleLabelPosition.left }} | ${undefined}                     | ${() => undefined}
   `('$state', ({ help, props, options, getAriaDescribedBy }) => {
     beforeEach(() => {
       createWrapper(props, options);

package/src/components/base/toggle/toggle.vue

@@ -83,7 +83,7 @@ export default {
   computed: {
     shouldRenderHelp() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help);
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
@@ -94,6 +94,9 @@ export default {
     isChecked() {
       return this.value ? 'true' : 'false';
     },
+    isVerticalLayout() {
+      return this.labelPosition === 'top' || this.labelPosition === 'hidden';
+    },
   },
 
   beforeCreate() {
@@ -121,8 +124,8 @@ export default {
   <div
     class="gl-toggle-wrapper gl-display-flex gl-mb-0"
     :class="{
-      'gl-flex-direction-column': labelPosition === 'top' || labelPosition === 'hidden',
-      'gl-toggle-label-inline': labelPosition === 'left',
+      'gl-flex-direction-column': isVerticalLayout,
+      'gl-toggle-label-inline': !isVerticalLayout,
       'is-disabled': disabled,
     }"
     data-testid="toggle-wrapper"