@gitlab/ui 63.4.0 → 64.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "63.4.0",
+  "version": "64.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -62,7 +62,7 @@
     "generate:component": "plop"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
+    "@floating-ui/dom": "1.2.9",
     "bootstrap-vue": "2.23.1",
     "dompurify": "^2.4.5",
     "echarts": "^5.3.2",
@@ -84,28 +84,28 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/core": "^7.22.1",
+    "@babel/preset-env": "^7.22.2",
+    "@babel/preset-react": "^7.22.0",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.48.0",
+    "@gitlab/svgs": "3.49.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.12",
-    "@storybook/addon-docs": "7.0.12",
-    "@storybook/addon-essentials": "7.0.12",
-    "@storybook/addon-storyshots": "7.0.12",
-    "@storybook/addon-storyshots-puppeteer": "7.0.12",
-    "@storybook/addon-viewport": "7.0.12",
-    "@storybook/builder-webpack5": "7.0.12",
-    "@storybook/theming": "7.0.12",
-    "@storybook/vue": "7.0.12",
-    "@storybook/vue-webpack5": "7.0.12",
-    "@storybook/vue3": "7.0.12",
-    "@storybook/vue3-webpack5": "7.0.12",
+    "@storybook/addon-a11y": "7.0.18",
+    "@storybook/addon-docs": "7.0.18",
+    "@storybook/addon-essentials": "7.0.18",
+    "@storybook/addon-storyshots": "7.0.18",
+    "@storybook/addon-storyshots-puppeteer": "7.0.18",
+    "@storybook/addon-viewport": "7.0.18",
+    "@storybook/builder-webpack5": "7.0.18",
+    "@storybook/theming": "7.0.18",
+    "@storybook/vue": "7.0.18",
+    "@storybook/vue-webpack5": "7.0.18",
+    "@storybook/vue3": "7.0.18",
+    "@storybook/vue3-webpack5": "7.0.18",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -117,7 +117,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.12.0",
+    "cypress": "12.13.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.41.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -153,7 +153,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.12",
+    "storybook": "7.0.18",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.4",

package/src/components/base/filtered_search/filtered_search.scss

@@ -4,6 +4,10 @@
   @include gl-rounded-left-base;
   position: relative;
   flex-grow: 1;
+
+  .input-group-prepend + & {
+    @include gl-rounded-left-none;
+  }
 }
 
 .gl-filtered-search-scrollable {
@@ -14,9 +18,8 @@
   @include gl-py-2;
   @include gl-pl-4;
   @include gl-border-none;
-  @include gl-rounded-left-base;
   position: absolute;
-  max-width: calc(100% - $gl-spacing-scale-7);
+  max-width: calc(100% - #{$gl-spacing-scale-7});
   overflow: hidden;
   overflow-x: auto;
 

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

@@ -1,25 +1,20 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { computePosition, autoUpdate, offset } from '@floating-ui/dom';
 import {
   ARROW_DOWN,
   GL_DROPDOWN_FOCUS_CONTENT,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_SHOWN,
-  POPPER_CONFIG,
+  GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
-import { FIXED_WIDTH_CLASS } from './constants';
+import { waitForAnimationFrame } from '../../../../utils/test_utils';
+import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
 import GlBaseDropdown from './base_dropdown.vue';
 
-const destroyPopper = jest.fn();
-const updatePopper = jest.fn();
-const mockCreatePopper = jest.fn().mockImplementation(() => ({
-  destroy: destroyPopper,
-  update: updatePopper,
-}));
-
-jest.mock('@popperjs/core', () => ({
-  createPopper: (...args) => mockCreatePopper(...args),
-}));
+jest.mock('@floating-ui/dom');
+const mockStopAutoUpdate = jest.fn();
+offset.mockImplementation((options) => options);
 
 const DEFAULT_BTN_TOGGLE_CLASSES = [
   'btn',
@@ -38,14 +33,20 @@ describe('base dropdown', () => {
         toggleId: 'dropdown-toggle-btn-1',
         ...propsData,
       },
-      slots,
+      slots: {
+        default: `<div class="${GL_DROPDOWN_CONTENTS_CLASS}" />`,
+        ...slots,
+      },
       attachTo: document.body,
     });
-    return nextTick();
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
+    autoUpdate.mockImplementation(() => {
+      return mockStopAutoUpdate;
+    });
+    computePosition.mockImplementation(() => new Promise(() => {}));
   });
 
   const findDefaultDropdownToggle = () => wrapper.find('.btn.gl-new-dropdown-toggle');
@@ -53,61 +54,99 @@ describe('base dropdown', () => {
   const findDropdownToggleText = () => findDefaultDropdownToggle().find('.gl-button-text');
   const findDropdownMenu = () => wrapper.find('.gl-new-dropdown-panel');
 
-  describe('popper.js instance', () => {
-    it('should initialize popper.js instance with toggle and menu elements and config for left-aligned menu', async () => {
-      await buildWrapper();
-      expect(mockCreatePopper).toHaveBeenCalledWith(
-        findDefaultDropdownToggle().element,
-        findDropdownMenu().element,
-        { ...POPPER_CONFIG, placement: 'bottom-start' }
-      );
-    });
+  describe('Floating UI instance', () => {
+    it("starts Floating UI's when opening the dropdown", async () => {
+      buildWrapper();
+      await findDefaultDropdownToggle().trigger('click');
 
-    it('should initialize popper.js instance with toggle and menu elements and config for center-aligned menu', async () => {
-      await buildWrapper({ placement: 'center' });
-      expect(mockCreatePopper).toHaveBeenCalledWith(
-        findDefaultDropdownToggle().element,
-        findDropdownMenu().element,
-        { ...POPPER_CONFIG, placement: 'bottom' }
-      );
+      expect(autoUpdate).toHaveBeenCalledTimes(1);
     });
 
-    it('should initialize popper.js instance with toggle and menu elements and config for right-aligned menu', async () => {
-      await buildWrapper({ placement: 'right' });
-      expect(mockCreatePopper).toHaveBeenCalledWith(
-        findDefaultDropdownToggle().element,
-        findDropdownMenu().element,
-        { ...POPPER_CONFIG, placement: 'bottom-end' }
-      );
-    });
+    it("stops Floating UI's when closing the dropdown", async () => {
+      buildWrapper();
+      await findDefaultDropdownToggle().trigger('click');
+      await findDefaultDropdownToggle().trigger('click');
 
-    it('should pass custom options to popper.js, overriding built-in ones', async () => {
-      await buildWrapper({ placement: 'right', popperOptions: { placement: 'auto-start' } });
-      expect(mockCreatePopper).toHaveBeenCalledWith(
-        findDefaultDropdownToggle().element,
-        findDropdownMenu().element,
-        { ...POPPER_CONFIG, placement: 'auto-start' }
-      );
+      expect(autoUpdate).toHaveBeenCalledTimes(1);
+      expect(mockStopAutoUpdate).toHaveBeenCalledTimes(1);
     });
 
-    it('should update popper instance when component is updated', async () => {
-      await buildWrapper();
+    it("restarts Floating UI's when reopening the dropdown", async () => {
+      buildWrapper();
+      await findDefaultDropdownToggle().trigger('click');
+      await findDefaultDropdownToggle().trigger('click');
       await findDefaultDropdownToggle().trigger('click');
-      await wrapper.setProps({ category: 'tertiary' });
-      expect(updatePopper).toHaveBeenCalled();
-    });
 
-    it('should destroy popper instance when component is destroyed', async () => {
-      await buildWrapper();
-      wrapper.destroy();
-      expect(destroyPopper).toHaveBeenCalled();
+      expect(autoUpdate).toHaveBeenCalledTimes(2);
+      expect(mockStopAutoUpdate).toHaveBeenCalledTimes(1);
     });
 
-    it('should not destroy popper instance when component is not initiated', async () => {
+    it("stops Floating UI's auto updates on destroy", async () => {
       buildWrapper();
+      await findDefaultDropdownToggle().trigger('click');
       wrapper.destroy();
-      await nextTick();
-      expect(destroyPopper).not.toHaveBeenCalled();
+
+      expect(mockStopAutoUpdate).toHaveBeenCalled();
+    });
+
+    describe('computePosition', () => {
+      beforeEach(() => {
+        autoUpdate.mockImplementation(jest.requireActual('@floating-ui/dom').autoUpdate);
+      });
+
+      it('initializes Floating UI with reference and floating elements and config for left-aligned menu', async () => {
+        buildWrapper();
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          {
+            placement: 'bottom-start',
+            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+          }
+        );
+      });
+
+      it('initializes Floating UI with reference and floating elements and config for center-aligned menu', async () => {
+        buildWrapper({ placement: 'center' });
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          { placement: 'bottom', middleware: [offset({ mainAxis: DEFAULT_OFFSET })] }
+        );
+      });
+
+      it('initializes Floating UI with reference and floating elements and config for right-aligned menu', async () => {
+        buildWrapper({ placement: 'right' });
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          { placement: 'bottom-end', middleware: [offset({ mainAxis: DEFAULT_OFFSET })] }
+        );
+      });
+
+      it("passes custom offset to Floating UI's middleware", async () => {
+        const customOffset = { mainAxis: 10, crossAxis: 40 };
+        buildWrapper({
+          placement: 'right',
+          offset: customOffset,
+        });
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          {
+            placement: 'bottom-end',
+            middleware: [offset(customOffset)],
+          }
+        );
+      });
     });
   });
 
@@ -260,7 +299,7 @@ describe('base dropdown', () => {
         await toggle.trigger('click');
         expect(menu.classes('gl-display-block!')).toBe(true);
         expect(firstToggleChild.attributes('aria-expanded')).toBe('true');
-        await nextTick();
+        await waitForAnimationFrame();
         expect(wrapper.emitted(GL_DROPDOWN_SHOWN)).toHaveLength(1);
 
         // close menu clicking toggle btn again

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

@@ -1,6 +1,6 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { createPopper } from '@popperjs/core';
+import { computePosition, autoUpdate, offset, size, flip } from '@floating-ui/dom';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
@@ -8,20 +8,20 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
-  POPPER_CONFIG,
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_FOCUS_CONTENT,
   ENTER,
   SPACE,
   ARROW_DOWN,
+  GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
 import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
 
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
 import { OutsideDirective } from '../../../../directives/outside/outside';
-import { FIXED_WIDTH_CLASS } from './constants';
+import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
 
 export default {
   name: 'BaseDropdown',
@@ -119,10 +119,14 @@ export default {
       required: false,
       default: null,
     },
-    popperOptions: {
-      type: Object,
+    /**
+     * Custom value to be passed to the offset middleware.
+     * https://floating-ui.com/docs/offset
+     */
+    offset: {
+      type: [Number, Object],
       required: false,
-      default: () => ({}),
+      default: () => ({ mainAxis: DEFAULT_OFFSET }),
     },
     fluidWidth: {
       type: Boolean,
@@ -133,6 +137,7 @@ export default {
   data() {
     return {
       visible: false,
+      openedYet: false,
       baseDropdownId: uniqueId('base-dropdown-'),
     };
   },
@@ -206,11 +211,27 @@ export default {
         [FIXED_WIDTH_CLASS]: !this.fluidWidth,
       };
     },
-    popperConfig() {
+    floatingUIConfig() {
       return {
         placement: dropdownPlacements[this.placement],
-        ...POPPER_CONFIG,
-        ...this.popperOptions,
+        middleware: [
+          offset(this.offset),
+          flip(),
+          size({
+            apply: ({ availableHeight, elements }) => {
+              const contentsEl = elements.floating.querySelector(`.${GL_DROPDOWN_CONTENTS_CLASS}`);
+              if (!contentsEl) {
+                return;
+              }
+
+              const contentsAvailableHeight =
+                availableHeight - (this.nonScrollableContentHeight ?? 0) - DEFAULT_OFFSET;
+              Object.assign(contentsEl.style, {
+                maxHeight: `${Math.max(contentsAvailableHeight, 0)}px`,
+              });
+            },
+          }),
+        ],
       };
     },
   },
@@ -227,13 +248,10 @@ export default {
     },
   },
   mounted() {
-    this.$nextTick(() => {
-      this.popper = createPopper(this.toggleElement, this.$refs.content, this.popperConfig);
-    });
     this.checkToggleFocusable();
   },
   beforeDestroy() {
-    this.popper?.destroy();
+    this.stopFloating();
   },
   methods: {
     checkToggleFocusable() {
@@ -245,24 +263,52 @@ export default {
         );
       }
     },
+    startFloating() {
+      this.calculateNonScrollableAreaHeight();
+      this.observer = new MutationObserver(this.calculateNonScrollableAreaHeight);
+      this.observer.observe(this.$refs.content, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+
+      this.stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
+        const { x, y } = await computePosition(
+          this.toggleElement,
+          this.$refs.content,
+          this.floatingUIConfig
+        );
+
+        /**
+         * Due to the asynchronous nature of computePosition, it's technically possible for the
+         * component to have been destroyed by the time the promise resolves. In such case, we exit
+         * early to prevent a TypeError.
+         */
+        if (!this.$refs.content) return;
+
+        Object.assign(this.$refs.content.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    },
+    stopFloating() {
+      this.observer?.disconnect();
+      this.stopAutoUpdate?.();
+    },
     async toggle() {
       this.visible = !this.visible;
 
       if (this.visible) {
-        /* 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.
+        /**
+         * We defer the following logic to the next tick as all that comes next relies on the
+         * dropdown actually being visible.
          */
         await this.$nextTick();
-        await this.popper?.update();
+        this.startFloating();
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
+        this.stopFloating();
         this.$emit(GL_DROPDOWN_HIDDEN);
       }
     },
@@ -312,6 +358,15 @@ export default {
         this.$emit(GL_DROPDOWN_FOCUS_CONTENT, event);
       }
     },
+    calculateNonScrollableAreaHeight() {
+      const scrollableArea = this.$refs.content?.querySelector(`.${GL_DROPDOWN_CONTENTS_CLASS}`);
+      if (!scrollableArea) return;
+
+      const floatingElementBoundingBox = this.$refs.content.getBoundingClientRect();
+      const scrollableAreaBoundingBox = scrollableArea.getBoundingClientRect();
+      this.nonScrollableContentHeight =
+        floatingElementBoundingBox.height - scrollableAreaBoundingBox.height;
+    },
   },
 };
 </script>

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

@@ -1 +1,2 @@
-export const FIXED_WIDTH_CLASS = 'gl-w-31';
+export const FIXED_WIDTH_CLASS = 'gl-w-31!';
+export const DEFAULT_OFFSET = 4;

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

@@ -1,14 +1,3 @@
-export const POPPER_CONFIG = {
-  modifiers: [
-    {
-      name: 'offset',
-      options: {
-        offset: [0, 4],
-      },
-    },
-  ],
-};
-
 // base dropdown events
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
@@ -21,3 +10,5 @@ export const END = 'End';
 export const ENTER = 'Enter';
 export const HOME = 'Home';
 export const SPACE = 'Space';
+
+export const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';

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

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { autoUpdate } from '@floating-ui/dom';
 import * as utils from '../../../../utils/utils';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import {
@@ -15,6 +16,11 @@ import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
 import { mockItems, mockGroups } from './mock_data';
 
+jest.mock('@floating-ui/dom');
+autoUpdate.mockImplementation(() => {
+  return () => {};
+});
+
 const ITEM_SELECTOR = '[data-testid="disclosure-dropdown-item"]';
 
 describe('GlDisclosureDropdown', () => {
@@ -37,11 +43,11 @@ describe('GlDisclosureDropdown', () => {
 
   jest.spyOn(utils, 'filterVisible').mockImplementation((items) => items);
 
-  it('passes custom popper.js options to the base dropdown', () => {
-    const popperOptions = { foo: 'bar' };
-    buildWrapper({ popperOptions });
+  it('passes custom offset to the base dropdown', () => {
+    const dropdownOffset = { mainAxis: 10, crossAxis: 40 };
+    buildWrapper({ dropdownOffset });
 
-    expect(findBaseDropdown().props('popperOptions')).toEqual(popperOptions);
+    expect(findBaseDropdown().props('offset')).toEqual(dropdownOffset);
   });
 
   describe('toggle text', () => {

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

@@ -13,6 +13,7 @@ import {
   END,
   ARROW_DOWN,
   ARROW_UP,
+  GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
 import {
   buttonCategoryOptions,
@@ -170,13 +171,13 @@ export default {
       default: null,
     },
     /**
-     * Options to be passed to the underlying Popper.js instance.
-     * Overrides built-in options.
+     * Custom offset to be applied to Floating UI's offset middleware.
+     * https://floating-ui.com/docs/offset
      */
-    popperOptions: {
-      type: Object,
+    dropdownOffset: {
+      type: [Number, Object],
       required: false,
-      default: () => ({}),
+      default: undefined,
     },
     /**
      * Lets the dropdown extend to match its content's width, up to a maximum width
@@ -300,6 +301,7 @@ export default {
     },
     isItem,
   },
+  GL_DROPDOWN_CONTENTS_CLASS,
 };
 </script>
 
@@ -319,7 +321,7 @@ export default {
     :loading="loading"
     :no-caret="noCaret"
     :placement="placement"
-    :popper-options="popperOptions"
+    :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
@@ -340,7 +342,7 @@ export default {
       ref="content"
       :aria-labelledby="listAriaLabelledBy || toggleId"
       data-testid="disclosure-content"
-      class="gl-new-dropdown-contents"
+      :class="$options.GL_DROPDOWN_CONTENTS_CLASS"
       tabindex="-1"
       @keydown="onKeydown"
       @click="handleAutoClose"

package/src/components/base/new_dropdowns/dropdown.scss

@@ -20,6 +20,9 @@
     @include gl-border-gray-200;
     @include gl-rounded-lg;
     @include gl-shadow-md;
+    position: absolute;
+    top: 0;
+    left: 0;
     min-width: $gl-new-dropdown-min-width;
     max-width: $gl-new-dropdown-max-width;
     z-index: 1000;

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { autoUpdate } from '@floating-ui/dom';
 import { useMockIntersectionObserver } from '~/utils/use_mock_intersection_observer';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import {
@@ -17,6 +18,11 @@ import GlListboxItem from './listbox_item.vue';
 import GlListboxGroup from './listbox_group.vue';
 import { mockOptions, mockGroups } from './mock_data';
 
+jest.mock('@floating-ui/dom');
+autoUpdate.mockImplementation(() => {
+  return () => {};
+});
+
 describe('GlCollapsibleListbox', () => {
   let wrapper;
 
@@ -44,11 +50,11 @@ describe('GlCollapsibleListbox', () => {
   const findSelectAllButton = () => wrapper.find("[data-testid='listbox-select-all-button']");
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
 
-  it('passes custom popper.js options to the base dropdown', () => {
-    const popperOptions = { foo: 'bar' };
-    buildWrapper({ popperOptions });
+  it('passes custom offset to the base dropdown', () => {
+    const dropdownOffset = { mainAxis: 10, crossAxis: 40 };
+    buildWrapper({ dropdownOffset });
 
-    expect(findBaseDropdown().props('popperOptions')).toEqual(popperOptions);
+    expect(findBaseDropdown().props('offset')).toEqual(dropdownOffset);
   });
 
   describe('toggle text', () => {

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

@@ -197,10 +197,10 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
     `
     <template #footer>
        <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
-        <gl-button  @click="selectAllItems" category="tertiary" block class="gl-justify-content-start! gl-mt-2!"">
+        <gl-button @click="selectAllItems" category="tertiary" block class="gl-justify-content-start! gl-mt-2!">
           Select all
         </gl-button>
-        <gl-button category="tertiary" block class="gl-justify-content-start! gl-mt-2!">
+        <gl-button category="tertiary" block class="gl-justify-content-start! gl-mt-2!" data-testid="footer-bottom-button">
           Manage departments
         </gl-button>
       </div>