@gitlab/ui 47.0.1 → 48.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "47.0.1",
+  "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/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"