@gitlab/ui 78.19.0 → 79.0.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [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)
 
 

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 Mon, 22 Apr 2024 11:22:17 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 Mon, 22 Apr 2024 11:22:17 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 Mon, 22 Apr 2024 11:22:17 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 Mon, 22 Apr 2024 11:22:17 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 Mon, 22 Apr 2024 11:22:17 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 Mon, 22 Apr 2024 11:22:17 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.19.0",
+  "version": "79.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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())]);
+    },
+  });