@gitlab/ui 47.0.0 → 47.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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/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": "47.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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/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>