@gitlab/ui 107.6.1 → 107.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [107.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v107.6.2...v107.7.0) (2025-01-30)
+
+
+### Features
+
+* **Dropdown:** Add indicator ([065c810](https://gitlab.com/gitlab-org/gitlab-ui/commit/065c810e49345d97748f7c3341604641372ad5b8))
+
+## [107.6.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v107.6.1...v107.6.2) (2025-01-30)
+
+
+### Bug Fixes
+
+* **GlButtonGroup:** Fix specificity problem ([837d85c](https://gitlab.com/gitlab-org/gitlab-ui/commit/837d85c744068fc4d44301b75a6d672fac757e77))
+
 ## [107.6.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v107.6.0...v107.6.1) (2025-01-27)
 
 

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

@@ -1,12 +1,12 @@
 import uniqueId from 'lodash/uniqueId';
-import { offset, autoPlacement, shift, size, autoUpdate, computePosition } from '@floating-ui/dom';
+import { offset, autoPlacement, shift, arrow, 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 { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
-import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
+import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS, ARROW_X_MINIMUM } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
@@ -257,7 +257,9 @@ var script = {
         middleware: [offset(this.offset), autoPlacement({
           alignment,
           allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
-        }), shift(), size({
+        }), shift(), arrow({
+          element: this.$refs.dropdownArrow
+        }), size({
           apply: _ref => {
             var _this$nonScrollableCo;
             let {
@@ -265,9 +267,7 @@ var script = {
               elements
             } = _ref;
             const contentsEl = elements.floating.querySelector(`.${GL_DROPDOWN_CONTENTS_CLASS}`);
-            if (!contentsEl) {
-              return;
-            }
+            if (!contentsEl) return;
             const contentsAvailableHeight = availableHeight - ((_this$nonScrollableCo = this.nonScrollableContentHeight) !== null && _this$nonScrollableCo !== void 0 ? _this$nonScrollableCo : 0) - DEFAULT_OFFSET;
             Object.assign(contentsEl.style, {
               maxHeight: `${Math.max(contentsAvailableHeight, 0)}px`
@@ -302,19 +302,38 @@ var script = {
           Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`, this.$el);
       }
     },
+    getArrowOffsets(actualPlacement) {
+      // Try to extract the base direction (top, bottom, left, right) from the placement
+      const direction = actualPlacement === null || actualPlacement === void 0 ? void 0 : actualPlacement.split('-')[0];
+      const offsetConfigs = {
+        top: {
+          staticSide: 'bottom',
+          rotation: '225deg'
+        },
+        bottom: {
+          staticSide: 'top',
+          rotation: '45deg'
+        },
+        left: {
+          staticSide: 'right',
+          rotation: '135deg'
+        },
+        right: {
+          staticSide: 'left',
+          rotation: '315deg'
+        }
+      };
+      return offsetConfigs[direction] || offsetConfigs.bottom;
+    },
     async 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);
+        const result = await computePosition(this.toggleElement, this.$refs.content, this.floatingUIConfig);
 
         /**
          * Due to the asynchronous nature of computePosition, it's technically possible for the
@@ -322,10 +341,48 @@ var script = {
          * early to prevent a TypeError.
          */
         if (!this.$refs.content) return;
+        const {
+          x,
+          y,
+          middlewareData,
+          placement
+        } = result;
+
+        // Get offsets based on actual placement, not requested placement
+        const {
+          rotation,
+          staticSide
+        } = this.getArrowOffsets(placement);
+
+        // Assign dropdown window position
         Object.assign(this.$refs.content.style, {
           left: `${x}px`,
           top: `${y}px`
         });
+
+        // Assign arrow position
+        if (middlewareData && middlewareData.arrow) {
+          const {
+            x: arrowX,
+            y: arrowY
+          } = middlewareData.arrow;
+
+          /**
+           * Clamp arrow X position to a minimum of 24px from the edge of the dropdown.
+           * This prevents wide toggles from pushing the arrow to the very edge of the dropdown.
+           */
+          const toggleRect = this.toggleElement.getBoundingClientRect();
+          const contentRect = this.$refs.content.getBoundingClientRect();
+          const clampedArrowX = toggleRect.width > contentRect.width ? Math.min(Math.max(arrowX, ARROW_X_MINIMUM), contentRect.width - ARROW_X_MINIMUM) : arrowX;
+          Object.assign(this.$refs.dropdownArrow.style, {
+            left: arrowX != null ? `${clampedArrowX}px` : '',
+            top: arrowY != null ? `${arrowY}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: '-4px',
+            transform: `rotate(${rotation})`
+          });
+        }
       });
     },
     stopFloating() {
@@ -435,7 +492,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('div',{directives:[{name:"outside",rawName:"v-outside.click.focusin",value:(_vm.close),expression:"close",modifiers:{"click":true,"focusin":true}}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.close.apply(null, arguments)}}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"outside",rawName:"v-outside.click.focusin",value:(_vm.close),expression:"close",modifiers:{"click":true,"focusin":true}}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.close.apply(null, arguments)}}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{ref:"dropdownArrow",staticClass:"gl-new-dropdown-arrow"}),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,4 +1,5 @@
 const FIXED_WIDTH_CLASS = '!gl-w-31';
-const DEFAULT_OFFSET = 4;
+const DEFAULT_OFFSET = 8;
+const ARROW_X_MINIMUM = 24;
 
-export { DEFAULT_OFFSET, FIXED_WIDTH_CLASS };
+export { ARROW_X_MINIMUM, DEFAULT_OFFSET, FIXED_WIDTH_CLASS };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -340,7 +340,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('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */