@gitlab/ui 52.10.0 → 52.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +23 -5
  3. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +291 -0
  4. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js +90 -0
  5. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js +107 -0
  6. package/dist/components/base/new_dropdowns/disclosure/mock_data.js +128 -0
  7. package/dist/components/base/new_dropdowns/disclosure/utils.js +15 -0
  8. package/dist/components/base/new_dropdowns/listbox/listbox.js +4 -4
  9. package/dist/components/base/new_dropdowns/listbox/listbox_group.js +1 -1
  10. package/dist/components/base/new_dropdowns/listbox/listbox_item.js +1 -1
  11. package/dist/index.css +2 -2
  12. package/dist/index.css.map +1 -1
  13. package/dist/index.js +3 -0
  14. package/package.json +2 -2
  15. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js +3 -3
  16. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue +21 -3
  17. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md +114 -0
  18. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.scss +7 -0
  19. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js +210 -0
  20. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js +306 -0
  21. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue +342 -0
  22. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js +82 -0
  23. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue +77 -0
  24. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js +94 -0
  25. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue +98 -0
  26. package/src/components/base/new_dropdowns/disclosure/mock_data.js +156 -0
  27. package/src/components/base/new_dropdowns/disclosure/utils.js +18 -0
  28. package/src/components/base/new_dropdowns/disclosure/utils.spec.js +73 -0
  29. package/src/components/base/new_dropdowns/dropdown.scss +6 -0
  30. package/src/components/base/new_dropdowns/listbox/listbox.scss +0 -6
  31. package/src/components/base/new_dropdowns/listbox/listbox.vue +4 -4
  32. package/src/components/base/new_dropdowns/listbox/listbox_group.vue +1 -1
  33. package/src/components/base/new_dropdowns/listbox/listbox_item.vue +1 -1
  34. package/src/index.js +3 -0
  35. package/src/scss/components.scss +2 -0
@@ -0,0 +1,15 @@
1
+ const itemValidator = _ref => {
2
+ let {
3
+ text,
4
+ href,
5
+ action
6
+ } = _ref;
7
+ return Boolean((text === null || text === void 0 ? void 0 : text.length) && ((href === null || href === void 0 ? void 0 : href.length) || typeof action === 'function'));
8
+ };
9
+ const isItem = item => Boolean(item) && itemValidator(item);
10
+ const isGroup = group => Boolean(group) && Array.isArray(group.items) && Boolean(group.items.length) && group.items.every(isItem);
11
+ const itemsValidator = items => items.every(isItem) || items.every(isGroup);
12
+ const isAllItems = items => items.every(isItem);
13
+ const isAllGroups = items => items.every(isGroup);
14
+
15
+ export { isAllGroups, isAllItems, isGroup, isItem, itemsValidator };
@@ -93,7 +93,7 @@ var script = {
93
93
  type: String,
94
94
  required: false,
95
95
  default: buttonCategoryOptions.primary,
96
- validator: value => Object.keys(buttonCategoryOptions).includes(value)
96
+ validator: value => value in buttonCategoryOptions
97
97
  },
98
98
  /**
99
99
  * Styling option - dropdown's toggle variant
@@ -102,7 +102,7 @@ var script = {
102
102
  type: String,
103
103
  required: false,
104
104
  default: dropdownVariantOptions.default,
105
- validator: value => Object.keys(dropdownVariantOptions).includes(value)
105
+ validator: value => value in dropdownVariantOptions
106
106
  },
107
107
  /**
108
108
  * The size of the dropdown toggle
@@ -111,7 +111,7 @@ var script = {
111
111
  type: String,
112
112
  required: false,
113
113
  default: 'medium',
114
- validator: value => Object.keys(buttonSizeOptions).includes(value)
114
+ validator: value => value in buttonSizeOptions
115
115
  },
116
116
  /**
117
117
  * Icon name that will be rendered in the toggle button
@@ -527,7 +527,7 @@ var script = {
527
527
  const __vue_script__ = script;
528
528
 
529
529
  /* template */
530
- 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":"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',_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)};
530
+ 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)};
531
531
  var __vue_staticRenderFns__ = [];
532
532
 
533
533
  /* style */
@@ -17,7 +17,7 @@ var script = {
17
17
  const __vue_script__ = script;
18
18
 
19
19
  /* template */
20
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"role":"group","aria-labelledby":_vm.nameId}},[_c('li',{staticClass:"gl-pl-5! gl-py-2! gl-font-base gl-font-weight-bold",attrs:{"id":_vm.nameId,"role":"presentation"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.name))]})],2),_vm._v(" "),_vm._t("default")],2)};
20
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"role":"group","aria-labelledby":_vm.nameId}},[_c('li',{staticClass:"gl-pl-5! gl-py-2! gl-font-sm gl-font-weight-bold",attrs:{"id":_vm.nameId,"role":"presentation"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.name))]})],2),_vm._v(" "),_vm._t("default")],2)};
21
21
  var __vue_staticRenderFns__ = [];
22
22
 
23
23
  /* style */
@@ -52,7 +52,7 @@ var script = {
52
52
  const __vue_script__ = script;
53
53
 
54
54
  /* template */
55
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-listbox-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{class:[
55
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-focusable-dropdown-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{class:[
56
56
  'gl-dropdown-item-check-icon',
57
57
  { 'gl-visibility-hidden': !_vm.isSelected },
58
58
  _vm.checkedClasses ],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}),_vm._v(" "),_c('span',{staticClass:"gl-dropdown-item-text-wrapper"},[_vm._t("default")],2)],1)])};