@gitlab/ui 64.0.1 → 64.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.0.1",
+  "version": "64.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -86,7 +86,7 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.22.1",
     "@babel/preset-env": "^7.22.2",
-    "@babel/preset-react": "^7.22.0",
+    "@babel/preset-react": "^7.22.3",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",

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

@@ -1,9 +1,16 @@
 .gl-filtered-search-scrollable-container {
   @include gl-bg-white;
+  @include gl-display-flex;
+  @include gl-flex-grow-1;
+  @include gl-flex-basis-0;
+  @include gl-overflow-hidden;
+  @include gl-align-items-center;
+  @include gl-py-2;
+  @include gl-pl-4;
+  @include gl-pr-7;
   @include gl-inset-border-1-gray-400;
+  @include gl-border-none;
   @include gl-rounded-left-base;
-  position: relative;
-  flex-grow: 1;
 
   .input-group-prepend + & {
     @include gl-rounded-left-none;
@@ -12,20 +19,7 @@
 
 .gl-filtered-search-scrollable {
   @include gl-display-flex;
-  @include gl-flex-grow-1;
-  @include gl-flex-basis-0;
-  @include gl-align-items-center;
-  @include gl-py-2;
-  @include gl-pl-4;
-  @include gl-border-none;
-  position: absolute;
-  max-width: calc(100% - #{$gl-spacing-scale-7});
-  overflow: hidden;
-  overflow-x: auto;
-
-  // prevent overlapping with left border
-  left: $gl-border-size-1;
-  @include gl-display-flex;
+  @include gl-overflow-y-auto;
 }
 
 .gl-filtered-search-item {

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

@@ -103,6 +103,7 @@ describe('base dropdown', () => {
           findDropdownMenu().element,
           {
             placement: 'bottom-start',
+            strategy: 'absolute',
             middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
           }
         );
@@ -115,7 +116,11 @@ describe('base dropdown', () => {
         expect(computePosition).toHaveBeenCalledWith(
           findDefaultDropdownToggle().element,
           findDropdownMenu().element,
-          { placement: 'bottom', middleware: [offset({ mainAxis: DEFAULT_OFFSET })] }
+          {
+            placement: 'bottom',
+            strategy: 'absolute',
+            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+          }
         );
       });
 
@@ -126,7 +131,11 @@ describe('base dropdown', () => {
         expect(computePosition).toHaveBeenCalledWith(
           findDefaultDropdownToggle().element,
           findDropdownMenu().element,
-          { placement: 'bottom-end', middleware: [offset({ mainAxis: DEFAULT_OFFSET })] }
+          {
+            placement: 'bottom-end',
+            strategy: 'absolute',
+            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+          }
         );
       });
 
@@ -143,10 +152,45 @@ describe('base dropdown', () => {
           findDropdownMenu().element,
           {
             placement: 'bottom-end',
+            strategy: 'absolute',
             middleware: [offset(customOffset)],
           }
         );
       });
+
+      describe('positioningStrategy', () => {
+        it('uses the absolute positioning strategy by default', async () => {
+          buildWrapper();
+
+          await findDefaultDropdownToggle().trigger('click');
+
+          expect(computePosition).toHaveBeenCalledWith(
+            findDefaultDropdownToggle().element,
+            findDropdownMenu().element,
+            expect.objectContaining({
+              strategy: 'absolute',
+            })
+          );
+          expect(findDropdownMenu().classes()).toContain('gl-absolute');
+        });
+
+        it('applies the fixed positioning strategy properly', async () => {
+          buildWrapper({
+            positioningStrategy: 'fixed',
+          });
+
+          await findDefaultDropdownToggle().trigger('click');
+
+          expect(computePosition).toHaveBeenCalledWith(
+            findDefaultDropdownToggle().element,
+            findDropdownMenu().element,
+            expect.objectContaining({
+              strategy: 'fixed',
+            })
+          );
+          expect(findDropdownMenu().classes()).toContain('gl-fixed');
+        });
+      });
     });
   });
 

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

@@ -15,6 +15,8 @@ import {
   SPACE,
   ARROW_DOWN,
   GL_DROPDOWN_CONTENTS_CLASS,
+  POSITION_ABSOLUTE,
+  POSITION_FIXED,
 } from '../constants';
 import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
 
@@ -133,6 +135,17 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Strategy to be applied by computePosition. If this is set to fixed, the dropdown's position
+     * needs to be set to fixed in CSS as well.
+     * https://floating-ui.com/docs/computePosition#strategy
+     */
+    positioningStrategy: {
+      type: String,
+      required: false,
+      default: POSITION_ABSOLUTE,
+      validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
+    },
   },
   data() {
     return {
@@ -209,11 +222,17 @@ export default {
       return {
         'gl-display-block!': this.visible,
         [FIXED_WIDTH_CLASS]: !this.fluidWidth,
+        'gl-fixed': this.isFixed,
+        'gl-absolute': !this.isFixed,
       };
     },
+    isFixed() {
+      return this.positioningStrategy === POSITION_FIXED;
+    },
     floatingUIConfig() {
       return {
         placement: dropdownPlacements[this.placement],
+        strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
           flip(),

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

@@ -11,4 +11,9 @@ export const ENTER = 'Enter';
 export const HOME = 'Home';
 export const SPACE = 'Space';
 
+// Positioning strategies
+// https://floating-ui.com/docs/computePosition#strategy
+export const POSITION_ABSOLUTE = 'absolute';
+export const POSITION_FIXED = 'fixed';
+
 export const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';

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

@@ -10,6 +10,8 @@ import {
   ARROW_UP,
   HOME,
   END,
+  POSITION_ABSOLUTE,
+  POSITION_FIXED,
 } from '../constants';
 import GlDisclosureDropdown from './disclosure_dropdown.vue';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
@@ -345,4 +347,15 @@ describe('GlDisclosureDropdown', () => {
       expect(closeSpy).not.toHaveBeenCalled();
     });
   });
+
+  describe('positioningStrategy', () => {
+    it.each([POSITION_ABSOLUTE, POSITION_FIXED])(
+      'passes the %s positioning strategy to the base dropdown',
+      (positioningStrategy) => {
+        buildWrapper({ positioningStrategy });
+
+        expect(findBaseDropdown().props('positioningStrategy')).toBe(positioningStrategy);
+      }
+    );
+  });
 });

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

@@ -41,6 +41,7 @@ const makeBindings = (overrides = {}) =>
     ':list-aria-labelled-by': 'listAriaLabelledBy',
     ':fluid-width': 'fluidWidth',
     ':auto-close': 'autoClose',
+    ':positioning-strategy': 'positioningStrategy',
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)

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

@@ -14,6 +14,8 @@ import {
   ARROW_DOWN,
   ARROW_UP,
   GL_DROPDOWN_CONTENTS_CLASS,
+  POSITION_ABSOLUTE,
+  POSITION_FIXED,
 } from '../constants';
 import {
   buttonCategoryOptions,
@@ -196,6 +198,17 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Strategy to be applied by computePosition. If the dropdown's container is too short for it to
+     * fit in, setting this to fixed will let it position itself above its container.
+     * https://floating-ui.com/docs/computePosition#strategy
+     */
+    positioningStrategy: {
+      type: String,
+      required: false,
+      default: POSITION_ABSOLUTE,
+      validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
+    },
   },
   data() {
     return {
@@ -323,6 +336,7 @@ export default {
     :placement="placement"
     :offset="dropdownOffset"
     :fluid-width="fluidWidth"
+    :positioning-strategy="positioningStrategy"
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"

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

@@ -20,7 +20,6 @@
     @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;

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

@@ -11,6 +11,8 @@ import {
   HOME,
   END,
   ENTER,
+  POSITION_ABSOLUTE,
+  POSITION_FIXED,
 } from '../constants';
 import GlIntersectionObserver from '../../../utilities/intersection_observer/intersection_observer.vue';
 import GlCollapsibleListbox, { ITEM_SELECTOR } from './listbox.vue';
@@ -744,4 +746,15 @@ describe('GlCollapsibleListbox', () => {
       expect(findBaseDropdown().props('fluidWidth')).toBe(true);
     });
   });
+
+  describe('positioningStrategy', () => {
+    it.each([POSITION_ABSOLUTE, POSITION_FIXED])(
+      'passes the %s positioning strategy to the base dropdown',
+      (positioningStrategy) => {
+        buildWrapper({ positioningStrategy });
+
+        expect(findBaseDropdown().props('positioningStrategy')).toBe(positioningStrategy);
+      }
+    );
+  });
 });

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

@@ -59,6 +59,7 @@ const generateProps = ({
   showSelectAllButtonLabel = defaultValue('showSelectAllButtonLabel'),
   startOpened = true,
   fluidWidth,
+  positioningStrategy,
 } = {}) => ({
   items,
   category,
@@ -88,6 +89,7 @@ const generateProps = ({
   showSelectAllButtonLabel,
   startOpened,
   fluidWidth,
+  positioningStrategy,
 });
 
 const makeBindings = (overrides = {}) =>
@@ -119,6 +121,7 @@ const makeBindings = (overrides = {}) =>
     ':reset-button-label': 'resetButtonLabel',
     ':show-select-all-button-label': 'showSelectAllButtonLabel',
     ':fluid-width': 'fluidWidth',
+    ':positioning-strategy': 'positioningStrategy',
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)

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

@@ -12,6 +12,8 @@ import {
   ARROW_DOWN,
   ARROW_UP,
   GL_DROPDOWN_CONTENTS_CLASS,
+  POSITION_ABSOLUTE,
+  POSITION_FIXED,
 } from '../constants';
 import {
   buttonCategoryOptions,
@@ -318,6 +320,17 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Strategy to be applied by computePosition. If the dropdown's container is too short for it to
+     * fit in, setting this to fixed will let it position itself above its container.
+     * https://floating-ui.com/docs/computePosition#strategy
+     */
+    positioningStrategy: {
+      type: String,
+      required: false,
+      default: POSITION_ABSOLUTE,
+      validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
+    },
   },
   data() {
     return {
@@ -709,6 +722,7 @@ export default {
     :placement="placement"
     :offset="dropdownOffset"
     :fluid-width="fluidWidth"
+    :positioning-strategy="positioningStrategy"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >