@gitlab/ui 78.18.0 → 79.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [79.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.19.0...v79.0.0) (2024-04-22)
+
+
+### Features
+
+* **BaseDropdown:** Use a "main" element boundary when available ([ee0cd82](https://gitlab.com/gitlab-org/gitlab-ui/commit/ee0cd82b8b2ae6986052877250884ce9cd43df21))
+
+
+### BREAKING CHANGES
+
+* **BaseDropdown:** This change slightly alters the default positioning
+of GlDisclosureDropdown and GlListbox.
+
+If the dropdown is placed inside a <main> element: The disclosure
+will use main as a boundary to not overflow it. This change aims
+to smartly reduce the need to use custom "placement" ('right'
+and 'bottom-end') options, especially when the dropdown is placed
+on the right side, such as in contextual menus.
+
+If the dropdown is not placed in a <main> element, behavior does
+change.
+
+# [78.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.18.0...v78.19.0) (2024-04-22)
+
+
+### Features
+
+* **GlFormTextarea:** add support for character count ([1b359aa](https://gitlab.com/gitlab-org/gitlab-ui/commit/1b359aabb514831bddaeca108132427ecde4ae64))
+
 # [78.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.17.0...v78.18.0) (2024-04-19)
 
 

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -1,4 +1,6 @@
 import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
+import debounce from 'lodash/debounce';
+import uniqueId from 'lodash/uniqueId';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const model = {
@@ -29,8 +31,23 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Max character count for the textarea.
+     */
+    characterCount: {
+      type: Number,
+      required: false,
+      default: null
     }
   },
+  data() {
+    return {
+      characterCountId: uniqueId('form-textarea-character-count-'),
+      remainingCharacterCount: this.initialRemainingCharacterCount(),
+      remainingCharacterCountSrOnly: this.initialRemainingCharacterCount()
+    };
+  },
   computed: {
     listeners() {
       var _this = this;
@@ -62,13 +79,50 @@ var script = {
     },
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
+    },
+    isCharacterCountOverLimit() {
+      return this.remainingCharacterCount < 0;
+    },
+    characterCountTextClass() {
+      return this.isCharacterCountOverLimit ? 'gl-text-red-500' : 'gl-text-gray-500';
+    },
+    showCharacterCount() {
+      return this.characterCount !== null;
+    },
+    bFormTextareaProps() {
+      return {
+        ...this.$attrs,
+        class: 'gl-form-input gl-form-textarea',
+        noResize: this.noResize,
+        value: this.value
+      };
+    }
+  },
+  watch: {
+    value(newValue) {
+      if (!this.showCharacterCount) {
+        return;
+      }
+      this.remainingCharacterCount = this.characterCount - newValue.length;
+      this.debouncedUpdateRemainingCharacterCountSrOnly(newValue);
     }
   },
+  created() {
+    // Debounce updating the remaining character count for a second so
+    // screen readers announce the remaining text after the text in the textarea.
+    this.debouncedUpdateRemainingCharacterCountSrOnly = debounce(this.updateRemainingCharacterCountSrOnly, 1000);
+  },
   methods: {
     handleKeyPress(e) {
       if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
         this.$emit('submit');
       }
+    },
+    updateRemainingCharacterCountSrOnly(newValue) {
+      this.remainingCharacterCountSrOnly = this.characterCount - newValue.length;
+    },
+    initialRemainingCharacterCount() {
+      return this.characterCount - this.value.length;
     }
   }
 };
@@ -77,7 +131,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-textarea',_vm._g(_vm._b({staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showCharacterCount)?_c('div',[_c('b-form-textarea',_vm._g(_vm._b({attrs:{"aria-describedby":_vm.characterCountId},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners)),_vm._v(" "),_c('small',{class:['form-text', _vm.characterCountTextClass],attrs:{"aria-hidden":"true"}},[(_vm.isCharacterCountOverLimit)?_vm._t("character-count-over-limit-text",null,{"count":Math.abs(_vm.remainingCharacterCount)}):_vm._t("character-count-text",null,{"count":_vm.remainingCharacterCount})],2),_vm._v(" "),_c('div',{staticClass:"gl-sr-only",attrs:{"id":_vm.characterCountId,"aria-live":"polite","data-testid":"character-count-text-sr-only"}},[(_vm.isCharacterCountOverLimit)?_vm._t("character-count-over-limit-text",null,{"count":Math.abs(_vm.remainingCharacterCount)}):_vm._t("character-count-text",null,{"count":_vm.remainingCharacterCountSrOnly})],2)],1):_c('b-form-textarea',_vm._g(_vm._b({nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,7 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
-import { offset, autoPlacement, size, autoUpdate, computePosition } from '@floating-ui/dom';
+import { offset, autoPlacement, shift, size, autoUpdate, computePosition } from '@floating-ui/dom';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
-import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
 import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
@@ -252,8 +252,9 @@ var script = {
         strategy: this.positioningStrategy,
         middleware: [offset(this.offset), autoPlacement({
           alignment,
+          boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
           allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
-        }), size({
+        }), shift(), size({
           apply: _ref => {
             var _this$nonScrollableCo;
             let {

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

@@ -1,4 +1,5 @@
 // base dropdown events
+const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
 const GL_DROPDOWN_SHOWN = 'shown';
 const GL_DROPDOWN_HIDDEN = 'hidden';
 const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
@@ -18,4 +19,4 @@ const POSITION_ABSOLUTE = 'absolute';
 const POSITION_FIXED = 'fixed';
 const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 17:05:30 GMT
+ * Generated on Mon, 22 Apr 2024 16:22:48 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 17:05:31 GMT
+ * Generated on Mon, 22 Apr 2024 16:22:48 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 17:05:31 GMT
+ * Generated on Mon, 22 Apr 2024 16:22:48 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Apr 2024 17:05:30 GMT
+ * Generated on Mon, 22 Apr 2024 16:22:48 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 Fri, 19 Apr 2024 17:05:31 GMT
+// Generated on Mon, 22 Apr 2024 16:22:49 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 Fri, 19 Apr 2024 17:05:31 GMT
+// Generated on Mon, 22 Apr 2024 16:22:48 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/dist/utils/story_decorators/container.js

@@ -5,12 +5,15 @@
  * @param {object} style The style attribute to apply to the container.
  * @return {function} The story decorator.
  */
-const makeContainer = style => Story => ({
-  render(h) {
-    return h('div', {
-      style
-    }, [h(Story())]);
-  }
-});
+const makeContainer = function (style) {
+  let tag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
+  return Story => ({
+    render(h) {
+      return h(tag, {
+        style
+      }, [h(Story())]);
+    }
+  });
+};
 
 export { makeContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.18.0",
+  "version": "79.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -131,14 +131,14 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.7.3",
+    "cypress": "13.8.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-cypress": "2.15.2",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

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

@@ -1,6 +1,9 @@
 import { mount } from '@vue/test-utils';
+import lodashDebounce from 'lodash/debounce';
 import GlFormTextarea from './form_textarea.vue';
 
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
 const modelEvent = GlFormTextarea.model.event;
 const newValue = 'foo';
 
@@ -10,6 +13,25 @@ describe('GlFormTextArea', () => {
   const createComponent = (propsData = {}) => {
     wrapper = mount(GlFormTextarea, {
       propsData,
+      scopedSlots: {
+        'character-count-text': function characterCountText({ count }) {
+          return count === 1 ? `${count} character remaining` : `${count} characters remaining`;
+        },
+        'character-count-over-limit-text': function characterCountOverLimitText({ count }) {
+          return count === 1 ? `${count} character over limit` : `${count} characters over limit`;
+        },
+      },
+    });
+  };
+
+  const findTextarea = () => wrapper.find('textarea');
+
+  const itUpdatesDebouncedScreenReaderText = (expectedText) => {
+    it('updates debounced screen reader text', () => {
+      expect(lodashDebounce).toHaveBeenCalledWith(expect.any(Function), 1000);
+      expect(wrapper.find('[data-testid="character-count-text-sr-only"]').text()).toBe(
+        expectedText
+      );
     });
   };
 
@@ -20,7 +42,7 @@ describe('GlFormTextArea', () => {
       });
 
       it(`sets the textarea's value`, () => {
-        expect(wrapper.element.value).toBe('initial');
+        expect(findTextarea().element.value).toBe('initial');
       });
 
       describe('when the value prop changes', () => {
@@ -30,7 +52,7 @@ describe('GlFormTextArea', () => {
         });
 
         it(`updates the textarea's value`, () => {
-          expect(wrapper.element.value).toBe(newValue);
+          expect(findTextarea().element.value).toBe(newValue);
         });
       });
     });
@@ -39,7 +61,7 @@ describe('GlFormTextArea', () => {
       beforeEach(() => {
         createComponent();
 
-        wrapper.setValue(newValue);
+        findTextarea().setValue(newValue);
       });
 
       it('synchronously emits update event', () => {
@@ -59,7 +81,7 @@ describe('GlFormTextArea', () => {
 
         createComponent({ debounce });
 
-        wrapper.setValue(newValue);
+        findTextarea().setValue(newValue);
       });
 
       it('synchronously emits an update event', () => {
@@ -82,7 +104,7 @@ describe('GlFormTextArea', () => {
     beforeEach(() => {
       createComponent({ lazy: true });
 
-      wrapper.setValue(newValue);
+      findTextarea().setValue(newValue);
     });
 
     it('synchronously emits an update event', () => {
@@ -119,4 +141,65 @@ describe('GlFormTextArea', () => {
       expect(wrapper.emitted('submit')).toEqual([[]]);
     });
   });
+
+  describe('when `characterCount` prop is set', () => {
+    const characterCount = 10;
+
+    describe('when textarea character count is under the max character count', () => {
+      const textareaCharacterCount = 5;
+      const expectedText = `${characterCount - textareaCharacterCount} characters remaining`;
+
+      beforeEach(() => {
+        createComponent({
+          value: 'a'.repeat(textareaCharacterCount),
+          characterCount,
+        });
+      });
+
+      it('displays remaining characters', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
+
+    describe('when textarea character count is over the max character count', () => {
+      const textareaCharacterCount = 15;
+      const expectedText = `${textareaCharacterCount - characterCount} characters over limit`;
+
+      beforeEach(() => {
+        createComponent({
+          value: 'a'.repeat(textareaCharacterCount),
+          characterCount,
+        });
+      });
+
+      it('displays number of characters over', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
+
+    describe('when textarea value is updated', () => {
+      const textareaCharacterCount = 5;
+      const newTextareaCharacterCount = textareaCharacterCount + 3;
+      const expectedText = `${characterCount - newTextareaCharacterCount} characters remaining`;
+
+      beforeEach(() => {
+        createComponent({
+          value: 'a'.repeat(textareaCharacterCount),
+          characterCount,
+        });
+
+        wrapper.setProps({ value: 'a'.repeat(newTextareaCharacterCount) });
+      });
+
+      it('updates character count text', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
+  });
 });

package/src/components/base/form/form_textarea/form_textarea.stories.js

@@ -3,32 +3,57 @@ import readme from './form_textarea.md';
 
 const template = `
   <gl-form-textarea
-    v-model="model"
+    :value="value"
     :placeholder="placeholder"
     :rows="5"
     :no-resize="noResize"
-  />
+    :character-count="characterCount"
+    @input="onInput"
+  >
+    <template #character-count-text="{ count }">{{ characterCountText(count) }}</template>
+    <template #character-count-over-limit-text="{ count }">{{ characterCountOverLimitText(count) }}</template>
+  </gl-form-textarea>
 `;
 
 const generateProps = ({
-  model = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
+  value = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
   placeholder = 'hello',
   noResize = GlFormTextarea.props.noResize.default,
+  characterCount = null,
 } = {}) => ({
-  model,
+  value,
   placeholder,
   noResize,
+  characterCount,
 });
 
-const Template = (args) => ({
+const Template = (args, { updateArgs }) => ({
   components: { GlFormTextarea },
   props: Object.keys(args),
+  methods: {
+    onInput(value) {
+      updateArgs({ ...args, value });
+    },
+    characterCountText(count) {
+      return count === 1 ? `${count} character remaining` : `${count} characters remaining`;
+    },
+    characterCountOverLimitText(count) {
+      return count === 1 ? `${count} character over limit` : `${count} characters over limit`;
+    },
+  },
   template,
 });
 
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithCharacterCount = Template.bind({});
+WithCharacterCount.args = generateProps({
+  value: '',
+  placeholder: 'hello',
+  characterCount: 100,
+});
+
 export default {
   title: 'base/form/form-textarea',
   component: GlFormTextarea,

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -1,5 +1,7 @@
 <script>
 import { BFormTextarea } from 'bootstrap-vue';
+import debounce from 'lodash/debounce';
+import uniqueId from 'lodash/uniqueId';
 
 const model = {
   prop: 'value',
@@ -31,6 +33,21 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Max character count for the textarea.
+     */
+    characterCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      characterCountId: uniqueId('form-textarea-character-count-'),
+      remainingCharacterCount: this.initialRemainingCharacterCount(),
+      remainingCharacterCountSrOnly: this.initialRemainingCharacterCount(),
+    };
   },
   computed: {
     listeners() {
@@ -57,6 +74,41 @@ export default {
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
     },
+    isCharacterCountOverLimit() {
+      return this.remainingCharacterCount < 0;
+    },
+    characterCountTextClass() {
+      return this.isCharacterCountOverLimit ? 'gl-text-red-500' : 'gl-text-gray-500';
+    },
+    showCharacterCount() {
+      return this.characterCount !== null;
+    },
+    bFormTextareaProps() {
+      return {
+        ...this.$attrs,
+        class: 'gl-form-input gl-form-textarea',
+        noResize: this.noResize,
+        value: this.value,
+      };
+    },
+  },
+  watch: {
+    value(newValue) {
+      if (!this.showCharacterCount) {
+        return;
+      }
+
+      this.remainingCharacterCount = this.characterCount - newValue.length;
+      this.debouncedUpdateRemainingCharacterCountSrOnly(newValue);
+    },
+  },
+  created() {
+    // Debounce updating the remaining character count for a second so
+    // screen readers announce the remaining text after the text in the textarea.
+    this.debouncedUpdateRemainingCharacterCountSrOnly = debounce(
+      this.updateRemainingCharacterCountSrOnly,
+      1000
+    );
   },
   methods: {
     handleKeyPress(e) {
@@ -64,16 +116,59 @@ export default {
         this.$emit('submit');
       }
     },
+    updateRemainingCharacterCountSrOnly(newValue) {
+      this.remainingCharacterCountSrOnly = this.characterCount - newValue.length;
+    },
+    initialRemainingCharacterCount() {
+      return this.characterCount - this.value.length;
+    },
   },
 };
 </script>
 
 <template>
+  <div v-if="showCharacterCount">
+    <b-form-textarea
+      :aria-describedby="characterCountId"
+      v-bind="bFormTextareaProps"
+      v-on="listeners"
+      @[keypressEvent].native="handleKeyPress"
+    />
+    <small :class="['form-text', characterCountTextClass]" aria-hidden="true">
+      <!-- 
+      @slot Internationalized over character count text. Example: `<template #character-count-over-limit-text="{ count }">{{ n__('%d character over limit', '%d characters over limit', count) }}</template>`
+      @binding {number} count
+      -->
+      <slot
+        v-if="isCharacterCountOverLimit"
+        name="character-count-over-limit-text"
+        :count="Math.abs(remainingCharacterCount)"
+      ></slot>
+      <!-- 
+      @slot Internationalized character count text. Example: `<template #character-count-text="{ count }">{{ n__('%d character remaining', '%d characters remaining', count) }}</template>`
+      @binding {number} count
+      -->
+
+      <slot v-else name="character-count-text" :count="remainingCharacterCount"></slot>
+    </small>
+    <div
+      :id="characterCountId"
+      class="gl-sr-only"
+      aria-live="polite"
+      data-testid="character-count-text-sr-only"
+    >
+      <slot
+        v-if="isCharacterCountOverLimit"
+        name="character-count-over-limit-text"
+        :count="Math.abs(remainingCharacterCount)"
+      ></slot>
+
+      <slot v-else name="character-count-text" :count="remainingCharacterCountSrOnly"></slot>
+    </div>
+  </div>
   <b-form-textarea
-    class="gl-form-input gl-form-textarea"
-    :no-resize="noResize"
-    v-bind="$attrs"
-    :value="value"
+    v-else
+    v-bind="bFormTextareaProps"
     v-on="listeners"
     @[keypressEvent].native="handleKeyPress"
   />

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { computePosition, autoUpdate, offset, autoPlacement } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, autoPlacement, shift } from '@floating-ui/dom';
 import {
   ARROW_DOWN,
   GL_DROPDOWN_FOCUS_CONTENT,
@@ -15,8 +15,9 @@ import GlBaseDropdown from './base_dropdown.vue';
 
 jest.mock('@floating-ui/dom');
 const mockStopAutoUpdate = jest.fn();
-offset.mockImplementation((options) => options);
-autoPlacement.mockImplementation((options) => options);
+offset.mockImplementation((offsetOpts = {}) => ({ offsetOpts }));
+autoPlacement.mockImplementation((autoPlacementOpts = {}) => ({ autoPlacementOpts }));
+shift.mockImplementation((shiftOpts = {}) => ({ shiftOpts }));
 
 const DEFAULT_BTN_TOGGLE_CLASSES = [
   'btn',
@@ -29,7 +30,7 @@ const DEFAULT_BTN_TOGGLE_CLASSES = [
 describe('base dropdown', () => {
   let wrapper;
 
-  const buildWrapper = (propsData, slots = {}, listeners = {}) => {
+  const buildWrapper = (propsData, { slots = {}, ...options } = {}) => {
     wrapper = mount(GlBaseDropdown, {
       propsData: {
         toggleId: 'dropdown-toggle-btn-1',
@@ -40,7 +41,7 @@ describe('base dropdown', () => {
         ...slots,
       },
       attachTo: document.body,
-      listeners,
+      ...options,
     });
   };
 
@@ -99,6 +100,35 @@ describe('base dropdown', () => {
         autoUpdate.mockImplementation(jest.requireActual('@floating-ui/dom').autoUpdate);
       });
 
+      it('initializes Floating UI with a default boundary', async () => {
+        document.body.innerHTML = '<main><div></div></main>';
+
+        buildWrapper(undefined, {
+          attachTo: document.querySelector('main div'),
+        });
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          {
+            placement: 'bottom-start',
+            strategy: 'absolute',
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                alignment: 'start',
+                boundary: document.querySelector('main'),
+                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+              }),
+              shift(),
+            ],
+          }
+        );
+
+        document.body.innerHTML = '';
+      });
+
       it('initializes Floating UI with reference and floating elements and config for left-aligned menu', async () => {
         buildWrapper();
         await findDefaultDropdownToggle().trigger('click');
@@ -113,8 +143,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: 'start',
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
               }),
+              shift(),
             ],
           }
         );
@@ -134,8 +166,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: undefined,
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['bottom', 'top'],
               }),
+              shift(),
             ],
           }
         );
@@ -155,8 +189,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: 'end',
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
               }),
+              shift(),
             ],
           }
         );
@@ -176,8 +212,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: 'start',
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
               }),
+              shift(),
             ],
           }
         );
@@ -197,7 +235,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset), autoPlacement(expect.any(Object))],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Object)), shift()],
           }
         );
       });
@@ -245,7 +283,7 @@ describe('base dropdown', () => {
     const slots = { default: defaultContent };
 
     it('renders the content', () => {
-      buildWrapper({}, slots);
+      buildWrapper({}, { slots });
       expect(wrapper.find('.gl-new-dropdown-inner').html()).toContain(defaultContent);
     });
   });
@@ -409,10 +447,12 @@ describe('base dropdown', () => {
 
     beforeEach(() => {
       event = undefined;
-      buildWrapper(undefined, undefined, {
-        [GL_DROPDOWN_BEFORE_CLOSE]({ originalEvent, preventDefault }) {
-          event = originalEvent;
-          preventDefault();
+      buildWrapper(undefined, {
+        listeners: {
+          [GL_DROPDOWN_BEFORE_CLOSE]({ originalEvent, preventDefault }) {
+            event = originalEvent;
+            preventDefault();
+          },
         },
       });
     });
@@ -467,7 +507,7 @@ describe('base dropdown', () => {
 
     beforeEach(() => {
       const slots = { toggle: toggleContent };
-      buildWrapper({}, slots);
+      buildWrapper({}, { slots });
     });
 
     it('does not render default toggle button', () => {

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

@@ -1,6 +1,6 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { computePosition, autoUpdate, offset, size, autoPlacement } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, size, autoPlacement, shift } from '@floating-ui/dom';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
@@ -9,6 +9,7 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
+  GL_DROPDOWN_BOUNDARY_SELECTOR,
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_BEFORE_CLOSE,
@@ -272,8 +273,10 @@ export default {
           offset(this.offset),
           autoPlacement({
             alignment,
+            boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
             allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
           }),
+          shift(),
           size({
             apply: ({ availableHeight, elements }) => {
               const contentsEl = elements.floating.querySelector(`.${GL_DROPDOWN_CONTENTS_CLASS}`);

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

@@ -1,4 +1,5 @@
 // base dropdown events
+export const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
 export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';

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

@@ -343,3 +343,31 @@ export default {
     startOpened: true,
   },
 };
+
+export const InMainWrapper = (args, { argTypes }) => ({
+  toggleId: TOGGLE_ID,
+  props: Object.keys(argTypes),
+  components: {
+    GlDisclosureDropdown,
+    GlTooltip,
+  },
+  template: `
+    <div>
+      ${template()}
+      <gl-tooltip :target="$options.toggleId" placement="right">
+        Automatic placement to stay inside &lt;main&gt; boundary
+      </gl-tooltip>
+    </div>
+  `,
+});
+InMainWrapper.args = {
+  items: mockItems,
+  icon: 'ellipsis_v',
+  noCaret: true,
+  toggleText: 'Disclosure',
+  textSrOnly: true,
+  toggleId: TOGGLE_ID,
+};
+InMainWrapper.decorators = [
+  makeContainer({ backgroundColor: '#efefef', textAlign: 'right', height: '200px' }, 'main'),
+];

package/src/utils/story_decorators/container.js

@@ -5,8 +5,10 @@
  * @param {object} style The style attribute to apply to the container.
  * @return {function} The story decorator.
  */
-export const makeContainer = (style) => (Story) => ({
-  render(h) {
-    return h('div', { style }, [h(Story())]);
-  },
-});
+export const makeContainer =
+  (style, tag = 'div') =>
+  (Story) => ({
+    render(h) {
+      return h(tag, { style }, [h(Story())]);
+    },
+  });