@gitlab/ui 47.0.1 → 48.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [48.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.0.0...v48.1.0) (2022-10-21)
+
+
+### Features
+
+* Add table utility classes ([2fcde37](https://gitlab.com/gitlab-org/gitlab-ui/commit/2fcde37120ae6f69929d4d7724a78e49ab0cd1ab))
+
+# [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)
 
 

package/README.md

@@ -72,19 +72,19 @@ Go to <http://localhost:9001/>
 Components’ unit tests live in the `tests/components`. The tests are organized following the same
 directory structure used to organize components.
 
-`yarn test:unit` runs all unit tests.
+- `yarn test:unit` runs all unit tests.
 
-`yarn test:unit:watch` runs all unit tests in watch mode.
+- `yarn test:unit:watch` runs all unit tests in watch mode.
 
-`yarn test:unit:debug` runs all unit tests and allow to attach a debugger to the test runner process.
+- `yarn test:unit:debug` runs all unit tests and allow to attach a debugger to the test runner process.
 
-`yarn jest [name_pattern]` runs spec files that match the specified name pattern.
+- `yarn jest [name_pattern]` runs spec files that match the specified name pattern.
 
 #### Examples
 
-`yarn jest datepicker` will match all spec files with a name that contains the word _datepicker_.
+- `yarn jest datepicker` will match all spec files with a name that contains the word _datepicker_.
 
-`yarn jest datepicker -t "when draw event is emitted"` goes a step further and only runs the test
+- `yarn jest datepicker -t "when draw event is emitted"` goes a step further and only runs the test
 with a description that matches the argument passed to the `t` flag.
 
 ### SCSS tests

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