@gitlab/ui 47.0.0 → 48.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [48.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v47.0.1...v48.0.0) (2022-10-19)
+
+
+### Features
+
+* **GlListbox:** convert header slot to a prop ([976250e](https://gitlab.com/gitlab-org/gitlab-ui/commit/976250ef04e72f0899762669aa16defb3a599c1e))
+
+
+### BREAKING CHANGES
+
+* **GlListbox:** GlListbox usages should be updated to pass the header
+via the `headerText` prop instead of the `header` slot.
+
+## [47.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v47.0.0...v47.0.1) (2022-10-18)
+
+
+### Bug Fixes
+
+* **GlDropdown:** Fix GlDropdown not auto flipping horizontally ([635eca3](https://gitlab.com/gitlab-org/gitlab-ui/commit/635eca3eea58f6ee1d2fd01a17a1db3401657647))
+
 # [47.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v46.1.0...v47.0.0) (2022-10-17)
 
 

package/dist/components/base/dropdown/dropdown.js

@@ -1,3 +1,4 @@
+import _merge from 'lodash/merge';
 import Vue from 'vue';
 import { BDropdown } from 'bootstrap-vue/esm/index.js';
 import { selectAll, isVisible } from 'bootstrap-vue/esm/utils/dom';
@@ -9,8 +10,6 @@ import GlLoadingIcon from '../loading_icon/loading_icon';
 import GlDropdownDivider from './dropdown_divider';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 function filterVisible(els) {
   return (els || []).filter(isVisible);
 }
@@ -27,6 +26,14 @@ const ExtendedBDropdown = Vue.extend(BDropdown, {
 
   }
 });
+const DefaultPopperOptions = {
+  modifiers: {
+    flip: {
+      flipVariationsByContent: true,
+      padding: 28
+    }
+  }
+};
 var script = {
   components: {
     BDropdown: ExtendedBDropdown,
@@ -139,6 +146,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    popperOpts: {
+      type: Object,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -188,6 +200,10 @@ var script = {
 
     hasHighlightedItemsOrClearAll() {
       return this.hasHighlightedItemsContent && this.showHighlightedItemsTitle || this.showClearAll;
+    },
+
+    popperOptions() {
+      return _merge({}, DefaultPopperOptions, this.popperOpts);
     }
 
   },
@@ -212,7 +228,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-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_vm.loading)?_c('gl-loading-icon',{class:{ 'gl-mr-2': !_vm.isIconOnly }}):_vm._e(),_vm._v(" "),(_vm.icon && !(_vm.isIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_vm._v(_vm._s(_vm.buttonText))]})],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right,"popper-opts":_vm.popperOptions},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_vm.loading)?_c('gl-loading-icon',{class:{ 'gl-mr-2': !_vm.isIconOnly }}):_vm._e(),_vm._v(" "),(_vm.icon && !(_vm.isIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_vm._v(_vm._s(_vm.buttonText))]})],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -245,3 +261,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
+export { DefaultPopperOptions };

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

@@ -12,9 +12,11 @@ import { itemsValidator, isOption, flattenedOptions } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const ITEM_SELECTOR = '[role="option"]';
+const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
 const SEARCH_INPUT_SELECTOR = '.gl-search-box-by-type-input';
 var script = {
+  HEADER_ITEMS_BORDER_CLASSES,
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN
@@ -77,6 +79,13 @@ var script = {
       default: false
     },
 
+    /** The header text */
+    headerText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
     /**
      * Styling option - dropdown's toggle category
      */
@@ -278,6 +287,10 @@ var script = {
 
     announceSRSearchResults() {
       return this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only'];
+    },
+
+    headerId() {
+      return this.headerText && _uniqueId('listbox-header-');
     }
 
   },
@@ -467,7 +480,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",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"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,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide])},[_vm._t("header"),_vm._v(" "),(_vm.searchable)?_c('div',{staticClass:"gl-border-b-1 gl-border-b-solid gl-border-b-gray-200"},[_c('gl-search-box-by-type',{ref:"searchBox",attrs:{"aria-owns":_vm.listboxId,"data-testid":"listbox-search-input"},on:{"input":_vm.search,"keydown":_vm.onKeydown},model:{value:(_vm.searchStr),callback:function ($$v) {_vm.searchStr=$$v;},expression:"searchStr"}}),_vm._v(" "),(_vm.searching)?_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-search-loader","size":"md"}}):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.showList)?_c(_vm.listboxTag,{ref:"list",tag:"component",staticClass:"gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"id":"listbox","aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._l((_vm.items),function(item,index){return [(_vm.isOption(item))?[_c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n            "+_vm._s(item.text)+"\n          ")]},{"item":item})],2)]:[_c('gl-listbox-group',{key:item.text,class:_vm.groupClasses(index),attrs:{"name":item.text},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((item.options),function(option){return _c('gl-listbox-item',{key:option.value,attrs:{"is-selected":_vm.isSelected(option),"is-focused":_vm.isFocused(option),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(option, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n              "+_vm._s(option.text)+"\n            ")]},{"item":option})],2)})],2)]]})],2):_vm._e(),_vm._v(" "),(_vm.announceSRSearchResults)?_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"listbox-number-of-results","aria-live":"assertive"}},[_vm._t("search-summary-sr-only")],2):(_vm.showNoResultsText)?_c('div',{staticClass:"gl-pl-7 gl-pr-5 gl-pt-3 gl-font-base gl-text-gray-600",attrs:{"aria-live":"assertive","data-testid":"listbox-no-results-text"}},[_vm._v("\n    "+_vm._s(_vm.noResultsText)+"\n  ")]):_vm._e(),_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",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"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,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide])},[(_vm.headerText)?_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-p-3",class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('div',{staticClass:"gl-flex-grow-1 gl-font-weight-bold gl-font-sm",attrs:{"id":_vm.headerId,"data-testid":"listbox-header-text"}},[_vm._v("\n      "+_vm._s(_vm.headerText)+"\n    ")])]):_vm._e(),_vm._v(" "),(_vm.searchable)?_c('div',{class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('gl-search-box-by-type',{ref:"searchBox",attrs:{"aria-owns":_vm.listboxId,"data-testid":"listbox-search-input"},on:{"input":_vm.search,"keydown":_vm.onKeydown},model:{value:(_vm.searchStr),callback:function ($$v) {_vm.searchStr=$$v;},expression:"searchStr"}}),_vm._v(" "),(_vm.searching)?_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-search-loader","size":"md"}}):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.showList)?_c(_vm.listboxTag,{ref:"list",tag:"component",staticClass:"gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"id":"listbox","aria-labelledby":_vm.listAriaLabelledBy || _vm.headerId || _vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._l((_vm.items),function(item,index){return [(_vm.isOption(item))?[_c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n            "+_vm._s(item.text)+"\n          ")]},{"item":item})],2)]:[_c('gl-listbox-group',{key:item.text,class:_vm.groupClasses(index),attrs:{"name":item.text},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((item.options),function(option){return _c('gl-listbox-item',{key:option.value,attrs:{"is-selected":_vm.isSelected(option),"is-focused":_vm.isFocused(option),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(option, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n              "+_vm._s(option.text)+"\n            ")]},{"item":option})],2)})],2)]]})],2):_vm._e(),_vm._v(" "),(_vm.announceSRSearchResults)?_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"listbox-number-of-results","aria-live":"assertive"}},[_vm._t("search-summary-sr-only")],2):(_vm.showNoResultsText)?_c('div',{staticClass:"gl-pl-7 gl-pr-5 gl-pt-3 gl-font-base gl-text-gray-600",attrs:{"aria-live":"assertive","data-testid":"listbox-no-results-text"}},[_vm._v("\n    "+_vm._s(_vm.noResultsText)+"\n  ")]):_vm._e(),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/sorting/sorting_item.js

@@ -43,7 +43,7 @@ var script = {
    */
   render(createElement, _ref) {
     let {
-      children,
+      scopedSlots,
       data,
       props = {}
     } = _ref;
@@ -58,8 +58,15 @@ var script = {
     });
     return createElement(GlDropdownItem, { ...data,
       attrs: { ...props
+      },
+      scopedSlots: {
+        default: () => {
+          var _scopedSlots$default;
+
+          return [icon, (_scopedSlots$default = scopedSlots.default) === null || _scopedSlots$default === void 0 ? void 0 : _scopedSlots$default.call(scopedSlots)];
+        }
       }
-    }, [icon, children]);
+    });
   }
 
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "47.0.0",
+  "version": "48.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,7 +107,7 @@
     "eslint": "8.25.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.5",
+    "eslint-plugin-storybook": "0.6.6",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

package/src/components/base/dropdown/dropdown.spec.js

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 
+import { BDropdown } from 'bootstrap-vue';
 import { dropdownVariantOptions } from '../../../utils/constants';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlDropdown from './dropdown.vue';
@@ -34,6 +35,7 @@ describe('new dropdown', () => {
   const findClearAll = () => findByTestId('clear-all-button');
   const findHighlightedItemsTitle = () => findByTestId('highlighted-items-title');
   const findHighlightedItems = () => findByTestId('highlighted-items');
+  const findDropdown = () => wrapper.findComponent(BDropdown);
 
   it('renders when text is null', () => {
     buildWrapper({ text: null });
@@ -417,4 +419,39 @@ describe('new dropdown', () => {
       });
     });
   });
+
+  describe('popperOpts prop', () => {
+    it('combines the passed in popperOpts with the default popperOpts', () => {
+      const popperOpts = {
+        modifiers: {
+          flip: {
+            flipVariationsByContent: false,
+          },
+        },
+      };
+      buildWrapper({ popperOpts });
+
+      expect(findDropdown().props('popperOpts')).toEqual({
+        modifiers: {
+          flip: {
+            flipVariationsByContent: false,
+            padding: 28,
+          },
+        },
+      });
+    });
+
+    it('uses the default popperOpts prop', () => {
+      buildWrapper();
+
+      expect(findDropdown().props('popperOpts')).toEqual({
+        modifiers: {
+          flip: {
+            flipVariationsByContent: true,
+            padding: 28,
+          },
+        },
+      });
+    });
+  });
 });

package/src/components/base/dropdown/dropdown.stories.js

@@ -84,7 +84,7 @@ const withContainer = (template, containerHeight = 150) => `
     ${template}
   </div>`;
 
-function wrap(template, containerHeight) {
+function wrap(template, containerHeight, cssClass) {
   return withContainer(
     `
     <gl-dropdown
@@ -109,6 +109,7 @@ function wrap(template, containerHeight) {
       :highlighted-items-title-class="highlightedItemsTitleClass"
       :loading="loading"
       :right="right"
+      class="${cssClass}"
     >
       ${template}
     </gl-dropdown>`,
@@ -514,6 +515,28 @@ WithHighlightedItems.args = generateProps({
   highlightedItemsTitleClass: 'gl-px-5',
 });
 
+export const OnRightEdge = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(
+    `
+    <gl-dropdown-item>First item</gl-dropdown-item>
+    <gl-dropdown-item>Second item</gl-dropdown-item>
+    <gl-dropdown-item>Third item</gl-dropdown-item>
+    <gl-dropdown-item>Fourth item</gl-dropdown-item>
+    `,
+    200,
+    'gl-display-block gl-text-right'
+  ),
+  mounted() {
+    clickDropdown(this);
+  },
+  updated() {
+    addClass(this);
+  },
+});
+OnRightEdge.args = generateProps({ text: 'Some dropdown' });
+
 export default {
   title: 'base/dropdown',
   component: GlDropdown,

package/src/components/base/dropdown/dropdown.vue

@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
+import { merge } from 'lodash';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
@@ -33,6 +34,15 @@ const ExtendedBDropdown = Vue.extend(BDropdown, {
   },
 });
 
+export const DefaultPopperOptions = {
+  modifiers: {
+    flip: {
+      flipVariationsByContent: true,
+      padding: 28,
+    },
+  },
+};
+
 export default {
   components: {
     BDropdown: ExtendedBDropdown,
@@ -146,6 +156,11 @@ export default {
       required: false,
       default: false,
     },
+    popperOpts: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     renderCaret() {
@@ -199,6 +214,9 @@ export default {
         (this.hasHighlightedItemsContent && this.showHighlightedItemsTitle) || this.showClearAll
       );
     },
+    popperOptions() {
+      return merge({}, DefaultPopperOptions, this.popperOpts);
+    },
   },
   methods: {
     hasSlotContents(slotName) {
@@ -227,6 +245,7 @@ export default {
     :block="block"
     :disabled="disabled || loading"
     :right="right"
+    :popper-opts="popperOptions"
     v-on="$listeners"
   >
     <div class="gl-new-dropdown-inner">

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

@@ -30,6 +30,7 @@ describe('GlListbox', () => {
   const findListboxItems = (root = wrapper) => root.findAllComponents(GlListboxItem);
   const findListboxGroups = () => wrapper.findAllComponents(GlListboxGroup);
   const findListItem = (index) => findListboxItems().at(index).find(ITEM_SELECTOR);
+  const findHeaderText = () => wrapper.find("[data-testid='listbox-header-text']");
   const findSearchBox = () => wrapper.find("[data-testid='listbox-search-input']");
   const findNoResultsText = () => wrapper.find("[data-testid='listbox-no-results-text']");
   const findLoadingIcon = () => wrapper.find("[data-testid='listbox-search-loader']");
@@ -263,13 +264,28 @@ describe('GlListbox', () => {
     });
   });
 
-  describe('when the header slot content is provided', () => {
+  describe('when the header prop is provided', () => {
     const headerContent = 'Header Content';
-    const slots = { header: headerContent };
 
     it('renders it', () => {
-      buildWrapper({}, slots);
-      expect(wrapper.text()).toContain(headerContent);
+      buildWrapper({ headerText: headerContent, items: mockOptions });
+
+      expect(findHeaderText().text()).toContain(headerContent);
+    });
+
+    it("uses the generated header ID as the list's aria-labelledby attribute", () => {
+      buildWrapper({ headerText: headerContent, items: mockOptions });
+
+      expect(findListContainer().attributes('aria-labelledby')).toBe(
+        findHeaderText().attributes('id')
+      );
+    });
+
+    it('if a custom list label is passed, it overrides the header ID', () => {
+      const listAriaLabelledBy = 'listAriaLabelledBy';
+      buildWrapper({ listAriaLabelledBy, headerText: headerContent, items: mockOptions });
+
+      expect(findListContainer().attributes('aria-labelledby')).toBe(listAriaLabelledBy);
     });
   });
 

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

@@ -33,6 +33,7 @@ const generateProps = ({
   right = defaultValue('right'),
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
+  headerText = defaultValue('headerText'),
   icon = '',
   multiple = defaultValue('multiple'),
   isCheckCentered = defaultValue('isCheckCentered'),
@@ -53,6 +54,7 @@ const generateProps = ({
   right,
   toggleText,
   textSrOnly,
+  headerText,
   icon,
   multiple,
   isCheckCentered,
@@ -76,6 +78,7 @@ const makeBindings = (overrides = {}) =>
     ':right': 'right',
     ':toggle-text': 'toggleText',
     ':text-sr-only': 'textSrOnly',
+    ':header-text': 'headerText',
     ':icon': 'icon',
     ':multiple': 'multiple',
     ':is-check-centered': 'isCheckCentered',
@@ -151,10 +154,7 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
       this.selected.push(mockOptions[index].value);
     },
   },
-  template: template(
-    `<template #header>
-        <p class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">Assign to department</p>
-    </template>
+  template: template(`
     <template #footer>
       <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-justify-content-center gl-p-3">
         <gl-button-group :vertical="false">
@@ -164,11 +164,11 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
         </gl-button-group>
       </div>
     </template>
-  `
-  ),
+  `),
 });
 HeaderAndFooter.args = generateProps({
   toggleText: 'Header and Footer',
+  headerText: 'Assign to department',
   multiple: true,
 });
 HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
@@ -315,7 +315,6 @@ export const Searchable = (args, { argTypes }) => ({
       filteredItems: mockOptions,
       searchInProgress: false,
       timeoutId: null,
-      headerId: 'listbox-header',
     };
   },
   mounted() {
@@ -358,19 +357,12 @@ export const Searchable = (args, { argTypes }) => ({
     },
   },
   template: template(
-    `<template #header>
-        <p :id="headerId"
-          class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">
-          Assign to department</p>
-      </template>
-      <template #search-summary-sr-only>
-        {{ numberOfSearchResults }}
-      </template>
-  `,
+    `<template #search-summary-sr-only>
+      {{ numberOfSearchResults }}
+    </template>`,
     {
       bindingOverrides: {
         ':items': 'filteredItems',
-        ':list-aria-labelled-by': 'headerId',
         ':toggle-text': 'customToggleText',
         ':searching': 'searchInProgress',
         '@search': 'filterList',
@@ -378,7 +370,7 @@ export const Searchable = (args, { argTypes }) => ({
     }
   ),
 });
-Searchable.args = generateProps({ searchable: true });
+Searchable.args = generateProps({ headerText: 'Assign to department', searchable: true });
 Searchable.decorators = [makeContainer({ height: '370px' })];
 
 export const SearchableGroups = (args, { argTypes }) => ({
@@ -392,7 +384,6 @@ export const SearchableGroups = (args, { argTypes }) => ({
       filteredGroupOptions: mockGroups,
       searchInProgress: false,
       timeoutId: null,
-      headerId: 'listbox-header',
     };
   },
   mounted() {
@@ -450,19 +441,12 @@ export const SearchableGroups = (args, { argTypes }) => ({
     },
   },
   template: template(
-    `<template #header>
-        <p :id="headerId"
-          class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">
-          Assign to department</p>
-      </template>
-      <template #search-summary-sr-only>
-        {{ numberOfSearchResults }}
-      </template>
-  `,
+    `<template #search-summary-sr-only>
+      {{ numberOfSearchResults }}
+    </template>`,
     {
       bindingOverrides: {
         ':items': 'filteredGroupOptions',
-        ':list-aria-labelled-by': 'headerId',
         ':toggle-text': 'customToggleText',
         ':searching': 'searchInProgress',
         '@search': 'filterList',
@@ -470,5 +454,9 @@ export const SearchableGroups = (args, { argTypes }) => ({
     }
   ),
 });
-SearchableGroups.args = generateProps({ searchable: true, items: mockGroups });
+SearchableGroups.args = generateProps({
+  headerText: 'Select ref',
+  searchable: true,
+  items: mockGroups,
+});
 SearchableGroups.decorators = [makeContainer({ height: '370px' })];

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

@@ -23,10 +23,12 @@ import GlListboxGroup from './listbox_group.vue';
 import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
+const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
 export const SEARCH_INPUT_SELECTOR = '.gl-search-box-by-type-input';
 
 export default {
+  HEADER_ITEMS_BORDER_CLASSES,
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
@@ -84,6 +86,12 @@ export default {
       required: false,
       default: false,
     },
+    /** The header text */
+    headerText: {
+      type: String,
+      required: false,
+      default: '',
+    },
     /**
      * Styling option - dropdown's toggle category
      */
@@ -255,6 +263,9 @@ export default {
         this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only']
       );
     },
+    headerId() {
+      return this.headerText && uniqueId('listbox-header-');
+    },
   },
   watch: {
     selected: {
@@ -431,10 +442,21 @@ export default {
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >
-    <!-- @slot Content to display in dropdown header -->
-    <slot name="header"></slot>
+    <div
+      v-if="headerText"
+      class="gl-display-flex gl-align-items-center gl-p-3"
+      :class="$options.HEADER_ITEMS_BORDER_CLASSES"
+    >
+      <div
+        :id="headerId"
+        class="gl-flex-grow-1 gl-font-weight-bold gl-font-sm"
+        data-testid="listbox-header-text"
+      >
+        {{ headerText }}
+      </div>
+    </div>
 
-    <div v-if="searchable" class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-200">
+    <div v-if="searchable" :class="$options.HEADER_ITEMS_BORDER_CLASSES">
       <gl-search-box-by-type
         ref="searchBox"
         v-model="searchStr"
@@ -456,7 +478,7 @@ export default {
       v-if="showList"
       id="listbox"
       ref="list"
-      :aria-labelledby="listAriaLabelledBy || toggleId"
+      :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
       role="listbox"
       class="gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0"
       tabindex="-1"

package/src/components/base/sorting/sorting_item.spec.js

@@ -15,12 +15,14 @@ describe('sorting item component', () => {
   const createComponent = (propsData) => {
     wrapper = shallowMount(GlSortingItem, {
       context: {
-        children: [sortingItemText],
         props: {
           ...defaultProps,
           ...propsData,
         },
       },
+      slots: {
+        default: sortingItemText,
+      },
       stubs: {
         GlDropdownItem,
       },

package/src/components/base/sorting/sorting_item.vue

@@ -39,7 +39,7 @@ export default {
    * The content of the item.
    * @slot default
    */
-  render(createElement, { children, data, props = {} }) {
+  render(createElement, { scopedSlots, data, props = {} }) {
     const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${
       props.active ? '' : 'inactive gl-visibility-hidden'
     }`;
@@ -52,16 +52,15 @@ export default {
       },
     });
 
-    return createElement(
-      GlDropdownItem,
-      {
-        ...data,
-        attrs: {
-          ...props,
-        },
+    return createElement(GlDropdownItem, {
+      ...data,
+      attrs: {
+        ...props,
+      },
+      scopedSlots: {
+        default: () => [icon, scopedSlots.default?.()],
       },
-      [icon, children]
-    );
+    });
   },
 };
 </script>