@gitlab/ui 52.12.0 → 52.13.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [52.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.13.0...v52.13.1) (2023-01-19)
+
+
+### Bug Fixes
+
+* **GlListBox:** allow item.value to be a number ([40173e4](https://gitlab.com/gitlab-org/gitlab-ui/commit/40173e494d447cfdb8fc0b438d6125011749b78e))
+
+# [52.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.12.0...v52.13.0) (2023-01-18)
+
+
+### Features
+
+* **GlBaseDropdown:** Allow listbox to stretch in full-width ([83ab66c](https://gitlab.com/gitlab-org/gitlab-ui/commit/83ab66c2ae3a43d906398b286d784c129b0ef9d1))
+
 # [52.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.11.0...v52.12.0) (2023-01-17)
 
 

package/dist/components/base/button/button.js

@@ -58,6 +58,11 @@ var script = {
       required: false,
       default: ''
     },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     disabled: {
       type: Boolean,
       required: false,
@@ -93,6 +98,9 @@ var script = {
     },
     buttonSize() {
       return buttonSizeOptions[this.size];
+    },
+    displayBlock() {
+      return !this.label && this.block;
     }
   },
   mounted() {
@@ -107,7 +115,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(_vm.label ? 'span' : 'b-button',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses,attrs:{"target":_vm.target,"variant":_vm.variant,"size":_vm.buttonSize,"disabled":_vm.isButtonDisabled}},'component',_vm.$attrs,false),_vm.$listeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default")],2):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.label ? 'span' : 'b-button',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses,attrs:{"block":_vm.displayBlock,"target":_vm.target,"variant":_vm.variant,"size":_vm.buttonSize,"disabled":_vm.isButtonDisabled}},'component',_vm.$attrs,false),_vm.$listeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default")],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -26,6 +26,11 @@ var script = {
       required: false,
       default: false
     },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     category: {
       type: String,
       required: false,
@@ -126,6 +131,9 @@ var script = {
         'dropdown-toggle-no-caret': this.noCaret
       }];
     },
+    toggleButtonTextClasses() {
+      return this.block ? 'gl-w-full' : '';
+    },
     toggleLabelledBy() {
       return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
     },
@@ -137,6 +145,8 @@ var script = {
         return {
           is: GlButton,
           icon: this.icon,
+          block: this.block,
+          buttonTextClasses: this.toggleButtonTextClasses,
           category: this.category,
           variant: this.variant,
           size: this.size,
@@ -236,7 +246,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",value:(_vm.close),expression:"close"}],staticClass:"gl-dropdown dropdown gl-display-inline-flex gl-vertical-align-middle"},[_c(_vm.toggleOptions.is,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle","aria-haspopup":_vm.ariaHaspopup,"aria-expanded":_vm.visible,"aria-labelledby":_vm.toggleLabelledBy,"aria-controls":_vm.baseDropdownId}},'component',_vm.toggleOptions,false),_vm.toggleOptions.listeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-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 dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"dropdown-menu",class:{ show: _vm.visible },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-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",value:(_vm.close),expression:"close"}],staticClass:"gl-dropdown dropdown gl-display-inline-flex gl-vertical-align-middle",class:{ 'gl-display-block': _vm.block }},[_c(_vm.toggleOptions.is,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle","aria-haspopup":_vm.ariaHaspopup,"aria-expanded":_vm.visible,"aria-labelledby":_vm.toggleLabelledBy,"aria-controls":_vm.baseDropdownId}},'component',_vm.toggleOptions,false),_vm.toggleOptions.listeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-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 dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"dropdown-menu",class:{ show: _vm.visible },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-dropdown-inner"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -262,6 +262,14 @@ var script = {
       type: String,
       required: false,
       default: ''
+    },
+    /**
+     * Render the toggle button as a block element
+     */
+    block: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -527,7 +535,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]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.headerText)?_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8",class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('div',{staticClass:"gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-pr-2",attrs:{"id":_vm.headerId,"data-testid":"listbox-header-text"}},[_vm._v("\n      "+_vm._s(_vm.headerText)+"\n    ")]),_vm._v(" "),(_vm.showResetButton)?_c('gl-button',{staticClass:"gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2!",attrs:{"category":"tertiary","data-testid":"listbox-reset-button"},on:{"click":_vm.onResetButtonClicked}},[_vm._v("\n      "+_vm._s(_vm.resetButtonLabel)+"\n    ")]):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.searchable)?_c('div',{class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('gl-listbox-search-input',{ref:"searchBox",attrs:{"aria-owns":_vm.listboxId,"data-testid":"listbox-search-input","placeholder":_vm.searchPlaceholder},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-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"id":_vm.listboxId,"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',_vm._b({key:item.value,attrs:{"data-testid":("listbox-item-" + (item.value)),"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},'gl-listbox-item',_vm.listboxItemMoreItemsAriaAttributes(index),false),[_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:{"data-testid":("listbox-item-" + (option.value)),"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)]]}),_vm._v(" "),(_vm.infiniteScrollLoading)?_c(_vm.listboxTag === 'ul' ? 'li' : 'div',{tag:"component"},[_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-infinite-scroll-loader","size":"md"}})],1):_vm._e(),_vm._v(" "),(_vm.showIntersectionObserver)?_c('gl-intersection-observer',{on:{"appear":_vm.onIntersectionObserverAppear}}):_vm._e()],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,"block":_vm.block,"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]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.headerText)?_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8",class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('div',{staticClass:"gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-pr-2",attrs:{"id":_vm.headerId,"data-testid":"listbox-header-text"}},[_vm._v("\n      "+_vm._s(_vm.headerText)+"\n    ")]),_vm._v(" "),(_vm.showResetButton)?_c('gl-button',{staticClass:"gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2!",attrs:{"category":"tertiary","data-testid":"listbox-reset-button"},on:{"click":_vm.onResetButtonClicked}},[_vm._v("\n      "+_vm._s(_vm.resetButtonLabel)+"\n    ")]):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.searchable)?_c('div',{class:_vm.$options.HEADER_ITEMS_BORDER_CLASSES},[_c('gl-listbox-search-input',{ref:"searchBox",attrs:{"aria-owns":_vm.listboxId,"data-testid":"listbox-search-input","placeholder":_vm.searchPlaceholder},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-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"id":_vm.listboxId,"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',_vm._b({key:item.value,attrs:{"data-testid":("listbox-item-" + (item.value)),"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},'gl-listbox-item',_vm.listboxItemMoreItemsAriaAttributes(index),false),[_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:{"data-testid":("listbox-item-" + (option.value)),"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)]]}),_vm._v(" "),(_vm.infiniteScrollLoading)?_c(_vm.listboxTag === 'ul' ? 'li' : 'div',{tag:"component"},[_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-infinite-scroll-loader","size":"md"}})],1):_vm._e(),_vm._v(" "),(_vm.showIntersectionObserver)?_c('gl-intersection-observer',{on:{"appear":_vm.onIntersectionObserverAppear}}):_vm._e()],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/new_dropdowns/listbox/utils.js

@@ -1,6 +1,7 @@
+import _isNumber from 'lodash/isNumber';
 import _isString from 'lodash/isString';
 
-const isOption = item => Boolean(item) && _isString(item.value);
+const isOption = item => Boolean(item) && (_isString(item.value) || _isNumber(item.value));
 const isGroup = function () {
   let {
     options

package/dist/utils/charts/story_config.js

@@ -1,5 +1,5 @@
 import times from 'lodash/times';
-import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_utils';
+import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
 import { marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
 import { colorFromDefaultPalette } from './theme';
 

package/dist/utils/stories_constants.js

@@ -0,0 +1,23 @@
+/**
+ * Arg types subcategories to be used to organize props within arg tables
+ */
+
+const ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL = 'Look & feel';
+const ARG_TYPE_SUBCATEGORY_STATE = 'State';
+const ARG_TYPE_SUBCATEGORY_SEARCH = 'Search';
+const ARG_TYPE_SUBCATEGORY_ACCESSIBILITY = 'Accessibility';
+const ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL = 'Infinite scroll';
+
+/**
+ * These are used to test varying lengths of series names
+ */
+const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
+const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
+const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
+const SERIES_NAME = {
+  [SERIES_NAME_SHORT]: 'Series ',
+  [SERIES_NAME_LONG]: 'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
+  [SERIES_NAME_LONG_WITHOUT_SPACES]: 'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END'
+};
+
+export { ARG_TYPE_SUBCATEGORY_ACCESSIBILITY, ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL, ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL, ARG_TYPE_SUBCATEGORY_SEARCH, ARG_TYPE_SUBCATEGORY_STATE, SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT };

package/dist/utils/stories_utils.js

@@ -1,15 +1,3 @@
-/**
- * These are used to test varying lengths of series names
- */
-const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
-const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
-const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
-const SERIES_NAME = {
-  [SERIES_NAME_SHORT]: 'Series ',
-  [SERIES_NAME_LONG]: 'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
-  [SERIES_NAME_LONG_WITHOUT_SPACES]: 'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END'
-};
-
 /**
  * Builds the parameters object disable one or multiple controls.
  */
@@ -22,4 +10,4 @@ const disableControls = function () {
   }]));
 };
 
-export { SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT, disableControls };
+export { disableControls };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.12.0",
+  "version": "52.13.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -194,6 +194,21 @@ describe('button component', () => {
 
         expect(wrapper.attributes('href')).toBe(unsafeUrl);
       });
+
+      it.each`
+        description                                       | label    | expectedResult
+        ${'applies block styling'}                        | ${true}  | ${false}
+        ${'does not apply block styling when label=true'} | ${false} | ${true}
+      `('block prop $description', ({ label, expectedResult }) => {
+        buildWrapper({
+          propsData: {
+            label,
+            block: true,
+          },
+        });
+
+        expect(wrapper.classes().includes('btn-block')).toBe(expectedResult);
+      });
     });
   });
 });

package/src/components/base/button/button.vue

@@ -62,6 +62,11 @@ export default {
       required: false,
       default: '',
     },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       required: false,
@@ -109,6 +114,9 @@ export default {
     buttonSize() {
       return buttonSizeOptions[this.size];
     },
+    displayBlock() {
+      return !this.label && this.block;
+    },
   },
   mounted() {
     // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
@@ -123,6 +131,7 @@ export default {
     :is="label ? 'span' : 'b-button'"
     v-bind="$attrs"
     v-safe-link:[safeLinkConfig]
+    :block="displayBlock"
     :target="target"
     :variant="variant"
     :size="buttonSize"

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

@@ -44,6 +44,7 @@ describe('base dropdown', () => {
 
   const findDefaultDropdownToggle = () => wrapper.find('.btn.gl-dropdown-toggle');
   const findCustomDropdownToggle = () => wrapper.find('.gl-dropdown-custom-toggle');
+  const findDropdownToggleText = () => findDefaultDropdownToggle().find('.gl-button-text');
   const findDropdownMenu = () => wrapper.find('.dropdown-menu');
 
   describe('popper.js instance', () => {
@@ -132,6 +133,23 @@ describe('base dropdown', () => {
     });
   });
 
+  describe('block prop', () => {
+    it('does not apply block style if false', () => {
+      buildWrapper({ block: false });
+
+      expect(wrapper.classes()).not.toContain('gl-w-full');
+      expect(findDropdownToggleText().classes()).not.toContain('gl-w-full');
+    });
+
+    it('applies block style if true', () => {
+      buildWrapper({ block: true });
+
+      expect(wrapper.classes()).toContain('gl-display-block');
+      expect(findDropdownToggleText().classes()).toContain('gl-w-full');
+      expect(findDefaultDropdownToggle().props('block')).toBe(true);
+    });
+  });
+
   describe('toggle visibility', () => {
     beforeEach(() => {
       buildWrapper();

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

@@ -29,6 +29,11 @@ export default {
       required: false,
       default: false,
     },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     category: {
       type: String,
       required: false,
@@ -130,6 +135,9 @@ export default {
         },
       ];
     },
+    toggleButtonTextClasses() {
+      return this.block ? 'gl-w-full' : '';
+    },
     toggleLabelledBy() {
       return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
     },
@@ -141,6 +149,8 @@ export default {
         return {
           is: GlButton,
           icon: this.icon,
+          block: this.block,
+          buttonTextClasses: this.toggleButtonTextClasses,
           category: this.category,
           variant: this.variant,
           size: this.size,
@@ -241,6 +251,7 @@ export default {
   <div
     v-outside="close"
     class="gl-dropdown dropdown gl-display-inline-flex gl-vertical-align-middle"
+    :class="{ 'gl-display-block': block }"
   >
     <component
       :is="toggleOptions.is"

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

@@ -13,8 +13,15 @@ import {
   GlAvatar,
 } from '../../../../index';
 import { makeContainer } from '../../../../utils/story_decorators/container';
-import { disableControls } from '../../../../utils/stories_utils';
 import { setStoryTimeout } from '../../../../utils/test_utils';
+import { disableControls } from '../../../../utils/stories_utils';
+import {
+  ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+  ARG_TYPE_SUBCATEGORY_STATE,
+  ARG_TYPE_SUBCATEGORY_SEARCH,
+  ARG_TYPE_SUBCATEGORY_ACCESSIBILITY,
+  ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL,
+} from '../../../../utils/stories_constants';
 import readme from './listbox.md';
 import { mockOptions, mockGroups, mockUsers } from './mock_data';
 import { flattenedOptions } from './utils';
@@ -27,6 +34,7 @@ const generateProps = ({
   variant = defaultValue('variant'),
   size = defaultValue('size'),
   disabled = defaultValue('disabled'),
+  block = defaultValue('block'),
   loading = defaultValue('loading'),
   searchable = defaultValue('searchable'),
   searching = defaultValue('searching'),
@@ -52,6 +60,7 @@ const generateProps = ({
   variant,
   size,
   disabled,
+  block,
   loading,
   searchable,
   searching,
@@ -78,6 +87,7 @@ const makeBindings = (overrides = {}) =>
     ':items': 'items',
     ':category': 'category',
     ':variant': 'variant',
+    ':block': 'block',
     ':size': 'size',
     ':disabled': 'disabled',
     ':loading': 'loading',
@@ -195,6 +205,7 @@ HeaderAndFooter.args = generateProps({
   headerText: 'Assign to department',
   resetButtonLabel: 'Unassign',
   multiple: true,
+  block: true,
 });
 HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
 
@@ -396,18 +407,127 @@ export default {
         type: 'select',
         options: buttonCategoryOptions,
       },
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
     },
     variant: {
       control: {
         type: 'select',
         options: buttonVariantOptions,
       },
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
     },
     size: {
       control: {
         type: 'select',
         options: Object.keys(buttonSizeOptions),
       },
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    noCaret: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    right: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    toggleText: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    icon: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    isCheckCentered: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    headerText: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    resetButtonLabel: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    toggleClass: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
+    disabled: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_STATE,
+      },
+    },
+    loading: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_STATE,
+      },
+    },
+    searchable: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_SEARCH,
+      },
+    },
+    searching: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_SEARCH,
+      },
+    },
+    noResultsText: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_SEARCH,
+      },
+    },
+    searchPlaceholder: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_SEARCH,
+      },
+    },
+    textSrOnly: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_ACCESSIBILITY,
+      },
+    },
+    toggleAriaLabelledBy: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_ACCESSIBILITY,
+      },
+    },
+    listAriaLabelledBy: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_ACCESSIBILITY,
+      },
+    },
+    infiniteScroll: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL,
+      },
+    },
+    infiniteScrollLoading: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL,
+      },
+    },
+    totalItems: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL,
+      },
     },
   },
 };

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

@@ -275,6 +275,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Render the toggle button as a block element
+     */
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -546,6 +554,7 @@ export default {
     ref="baseDropdown"
     aria-haspopup="listbox"
     :aria-labelledby="toggleAriaLabelledBy"
+    :block="block"
     :toggle-id="toggleId"
     :toggle-text="listboxToggleText"
     :toggle-class="toggleClass"

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

@@ -1,6 +1,6 @@
-import { isString } from 'lodash';
+import { isString, isNumber } from 'lodash';
 
-const isOption = (item) => Boolean(item) && isString(item.value);
+const isOption = (item) => Boolean(item) && (isString(item.value) || isNumber(item.value));
 
 const isGroup = ({ options } = {}) => Array.isArray(options) && options.every(isOption);
 

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

@@ -9,12 +9,14 @@ describe('isOption', () => {
     }
   );
 
-  it.each([{ value: '' }, { value: 'foo', text: 'bar' }, { value: 'qux', foo: true }])(
-    'isOption(%p) === true',
-    (option) => {
-      expect(isOption(option)).toBe(true);
-    }
-  );
+  it.each([
+    { value: '' },
+    { value: 5.3 },
+    { value: 'foo', text: 'bar' },
+    { value: 'qux', foo: true },
+  ])('isOption(%p) === true', (option) => {
+    expect(isOption(option)).toBe(true);
+  });
 });
 
 describe('flattenedOptions', () => {

package/src/components/charts/legend/legend.stories.js

@@ -5,7 +5,7 @@ import {
   SERIES_NAME_SHORT,
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
-} from '../../../utils/stories_utils';
+} from '../../../utils/stories_constants';
 
 const generateOptions = (seriesLength, seriesNameType) => {
   return {

package/src/components/charts/series_label/series_label.stories.js

@@ -5,7 +5,7 @@ import {
   SERIES_NAME_SHORT,
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
-} from '../../../utils/stories_utils';
+} from '../../../utils/stories_constants';
 import readme from './series_label.md';
 
 const generateProps = ({

package/src/components/charts/tooltip/tooltip.stories.js

@@ -3,7 +3,7 @@ import {
   SERIES_NAME,
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
-} from '../../../utils/stories_utils';
+} from '../../../utils/stories_constants';
 import readme from './tooltip.md';
 
 const components = {

package/src/utils/charts/story_config.js

@@ -1,5 +1,5 @@
 import times from 'lodash/times';
-import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_utils';
+import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
 
 import {
   marqueeSelectionSvgPath,

package/src/utils/stories_constants.js

@@ -0,0 +1,24 @@
+/**
+ * Arg types subcategories to be used to organize props within arg tables
+ */
+
+export const ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL = 'Look & feel';
+export const ARG_TYPE_SUBCATEGORY_STATE = 'State';
+export const ARG_TYPE_SUBCATEGORY_SEARCH = 'Search';
+export const ARG_TYPE_SUBCATEGORY_ACCESSIBILITY = 'Accessibility';
+export const ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL = 'Infinite scroll';
+
+/**
+ * These are used to test varying lengths of series names
+ */
+export const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
+export const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
+export const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
+
+export const SERIES_NAME = {
+  [SERIES_NAME_SHORT]: 'Series ',
+  [SERIES_NAME_LONG]:
+    'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
+  [SERIES_NAME_LONG_WITHOUT_SPACES]:
+    'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END',
+};

package/src/utils/stories_utils.js

@@ -1,18 +1,3 @@
-/**
- * These are used to test varying lengths of series names
- */
-export const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
-export const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
-export const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
-
-export const SERIES_NAME = {
-  [SERIES_NAME_SHORT]: 'Series ',
-  [SERIES_NAME_LONG]:
-    'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
-  [SERIES_NAME_LONG_WITHOUT_SPACES]:
-    'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END',
-};
-
 /**
  * Builds the parameters object disable one or multiple controls.
  */