@gitlab/ui 63.2.1 → 63.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [63.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v63.2.1...v63.3.0) (2023-05-24)
+
+
+### Features
+
+* **GlCollapsibleListbox:** Add select all button in header ([eb74768](https://gitlab.com/gitlab-org/gitlab-ui/commit/eb74768163939bdb1b08a168d58e800b440705c2))
+
 ## [63.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v63.2.0...v63.2.1) (2023-05-23)
 
 

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

@@ -267,6 +267,17 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * The select all button's label, to be rendered in the header. If this is omitted, the button is not
+     * rendered.
+     * The select all button requires a header to be set, so this prop should be used in conjunction with
+     * headerText.
+     */
+    showSelectAllButtonLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
     /**
      * Render the toggle button as a block element
      */
@@ -366,6 +377,15 @@ var script = {
       }
       return Boolean(this.selected);
     },
+    showSelectAllButton() {
+      if (!this.showSelectAllButtonLabel) {
+        return false;
+      }
+      if (!this.multiple) {
+        return false;
+      }
+      return this.selected.length === 0;
+    },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;
     },
@@ -421,6 +441,14 @@ var script = {
           }
         }
       },
+      showSelectAllButtonLabel: {
+        immediate: true,
+        handler(showSelectAllButtonLabel) {
+          if (showSelectAllButtonLabel && !this.headerText) {
+            throw new Error('The select all button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the showSelectAllButtonLabel prop.');
+          }
+        }
+      },
       infiniteScroll: {
         immediate: true,
         handler(newValue) {
@@ -576,6 +604,14 @@ var script = {
       this.$emit('reset');
       this.closeAndFocus();
     },
+    onSelectAllButtonClicked() {
+      /**
+       * Emitted when the select all button is clicked
+       *
+       * @event select-all
+       */
+      this.$emit('select-all');
+    },
     closeAndFocus() {
       this.$refs.baseDropdown.closeAndFocus();
     },
@@ -632,7 +668,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,"block":_vm.block,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"toggle-class":_vm.toggleButtonClasses,"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,"placement":_vm.placement,"popper-options":_vm.popperOptions,"fluid-width":_vm.fluidWidth},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! gl-w-auto! gl-m-0!",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":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();},_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-new-dropdown-contents-with-scrim-overlay",class:_vm.listboxClasses,attrs:{"id":_vm.listboxId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.headerId || _vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_c(_vm.itemTag,{tag:"component",staticClass:"top-scrim-wrapper",attrs:{"aria-hidden":"true","data-testid":"top-scrim"}},[_c('div',{staticClass:"top-scrim",class:{ 'top-scrim-light': !_vm.hasHeader, 'top-scrim-dark': _vm.hasHeader }})]),_vm._v(" "),_c(_vm.itemTag,{ref:"top-boundary",tag:"component",attrs:{"aria-hidden":"true"}}),_vm._v(" "),_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,"text-sr-only":item.textSrOnly},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.itemTag,{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(),_vm._v(" "),_c(_vm.itemTag,{ref:"bottom-boundary",tag:"component",attrs:{"aria-hidden":"true"}}),_vm._v(" "),_c(_vm.itemTag,{tag:"component",staticClass:"bottom-scrim-wrapper",attrs:{"aria-hidden":"true","data-testid":"bottom-scrim"}},[_c('div',{staticClass:"bottom-scrim",class:{ 'gl-rounded-0!': _vm.hasFooter }})])],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-py-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.toggleButtonClasses,"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,"placement":_vm.placement,"popper-options":_vm.popperOptions,"fluid-width":_vm.fluidWidth},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! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis",attrs:{"category":"tertiary","data-testid":"listbox-reset-button"},on:{"click":_vm.onResetButtonClicked}},[_vm._v("\n      "+_vm._s(_vm.resetButtonLabel)+"\n    ")]):_vm._e(),_vm._v(" "),(_vm.showSelectAllButton)?_c('gl-button',{staticClass:"gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis",attrs:{"category":"tertiary","data-testid":"listbox-select-all-button"},on:{"click":_vm.onSelectAllButtonClicked}},[_vm._v("\n      "+_vm._s(_vm.showSelectAllButtonLabel)+"\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":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();},_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-new-dropdown-contents-with-scrim-overlay",class:_vm.listboxClasses,attrs:{"id":_vm.listboxId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.headerId || _vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_c(_vm.itemTag,{tag:"component",staticClass:"top-scrim-wrapper",attrs:{"aria-hidden":"true","data-testid":"top-scrim"}},[_c('div',{staticClass:"top-scrim",class:{ 'top-scrim-light': !_vm.hasHeader, 'top-scrim-dark': _vm.hasHeader }})]),_vm._v(" "),_c(_vm.itemTag,{ref:"top-boundary",tag:"component",attrs:{"aria-hidden":"true"}}),_vm._v(" "),_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,"text-sr-only":item.textSrOnly},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.itemTag,{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(),_vm._v(" "),_c(_vm.itemTag,{ref:"bottom-boundary",tag:"component",attrs:{"aria-hidden":"true"}}),_vm._v(" "),_c(_vm.itemTag,{tag:"component",staticClass:"bottom-scrim-wrapper",attrs:{"aria-hidden":"true","data-testid":"bottom-scrim"}},[_c('div',{staticClass:"bottom-scrim",class:{ 'gl-rounded-0!': _vm.hasFooter }})])],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-py-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/utils/stories_constants.js

@@ -20,4 +20,10 @@ const SERIES_NAME = {
   [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 };
+/**
+ * Reused constants for ListBox
+ */
+
+const LISTBOX_CONTAINER_HEIGHT = '370px';
+
+export { ARG_TYPE_SUBCATEGORY_ACCESSIBILITY, ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL, ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL, ARG_TYPE_SUBCATEGORY_SEARCH, ARG_TYPE_SUBCATEGORY_STATE, LISTBOX_CONTAINER_HEIGHT, SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT };

package/package.json

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

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

@@ -41,6 +41,7 @@ describe('GlCollapsibleListbox', () => {
   const findLoadingIcon = () => wrapper.find("[data-testid='listbox-search-loader']");
   const findSRNumberOfResultsText = () => wrapper.find("[data-testid='listbox-number-of-results']");
   const findResetButton = () => wrapper.find("[data-testid='listbox-reset-button']");
+  const findSelectAllButton = () => wrapper.find("[data-testid='listbox-select-all-button']");
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
 
   it('passes custom popper.js options to the base dropdown', () => {
@@ -514,6 +515,68 @@ describe('GlCollapsibleListbox', () => {
     });
   });
 
+  describe('with select all action', () => {
+    it('throws an error when enabling the select action without a header', () => {
+      expect(() => {
+        buildWrapper({ showSelectAllButtonLabel: 'Select All' });
+      }).toThrow(
+        'The select all button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the showSelectAllButtonLabel prop.'
+      );
+      expect(wrapper).toHaveLoggedVueErrors();
+    });
+
+    it.each`
+      multiple | expectedResult
+      ${false} | ${false}
+      ${true}  | ${true}
+    `(
+      'shows the select all button if the label is provided and the selection is empty and multiple option is $multiple',
+      ({ multiple, expectedResult }) => {
+        buildWrapper({
+          headerText: 'Select assignee',
+          resetButtonLabel: 'Unassign',
+          showSelectAllButtonLabel: 'Select All',
+          selected: [],
+          items: mockOptions,
+          multiple,
+        });
+
+        expect(findResetButton().exists()).toBe(!expectedResult);
+        expect(findSelectAllButton().exists()).toBe(expectedResult);
+      }
+    );
+
+    it('has the label text "Select All" if the label is provided and the selection is empty', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        showSelectAllButtonLabel: 'Select All',
+        selected: [],
+        items: mockOptions,
+        multiple: true,
+      });
+
+      expect(findSelectAllButton().text()).toBe('Select All');
+    });
+
+    it('on click, emits the select-all event and calls closeAndFocus()', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        showSelectAllButtonLabel: 'Select All',
+        selected: [],
+        items: mockOptions,
+        multiple: true,
+      });
+
+      expect(wrapper.emitted('select-all')).toBe(undefined);
+
+      findSelectAllButton().trigger('click');
+
+      expect(wrapper.emitted('select-all')).toHaveLength(1);
+    });
+  });
+
   describe('when `infiniteScroll` prop is `true`', () => {
     it('should throw an error when items are groups', () => {
       expect(() => {

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

@@ -20,6 +20,7 @@ import {
   ARG_TYPE_SUBCATEGORY_SEARCH,
   ARG_TYPE_SUBCATEGORY_ACCESSIBILITY,
   ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL,
+  LISTBOX_CONTAINER_HEIGHT,
 } from '../../../../utils/stories_constants';
 import { POSITION } from '../../../utilities/truncate/constants';
 import readme from './listbox.md';
@@ -55,6 +56,7 @@ const generateProps = ({
   toggleAriaLabelledBy,
   listAriaLabelledBy,
   resetButtonLabel = defaultValue('resetButtonLabel'),
+  showSelectAllButtonLabel = defaultValue('showSelectAllButtonLabel'),
   startOpened = true,
   fluidWidth,
 } = {}) => ({
@@ -83,6 +85,7 @@ const generateProps = ({
   toggleAriaLabelledBy,
   listAriaLabelledBy,
   resetButtonLabel,
+  showSelectAllButtonLabel,
   startOpened,
   fluidWidth,
 });
@@ -114,6 +117,7 @@ const makeBindings = (overrides = {}) =>
     ':toggle-aria-labelled-by': 'toggleAriaLabelledBy',
     ':list-aria-labelled-by': 'listAriaLabelledBy',
     ':reset-button-label': 'resetButtonLabel',
+    ':show-select-all-button-label': 'showSelectAllButtonLabel',
     ':fluid-width': 'fluidWidth',
     ...overrides,
   })
@@ -160,7 +164,7 @@ export const Default = (args, { argTypes }) => ({
   }),
 });
 Default.args = generateProps({ toggleAriaLabelledBy: 'listbox-label' });
-Default.decorators = [makeContainer({ height: '370px' })];
+Default.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
 
 export const HeaderAndFooter = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -181,7 +185,7 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
     }
   },
   methods: {
-    selectAll() {
+    selectAllItems() {
       const allValues = mockOptions.map(({ value }) => value);
       this.selected = [...allValues];
     },
@@ -193,7 +197,7 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
     `
     <template #footer>
        <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
-        <gl-button  @click="selectAll" category="tertiary" block class="gl-justify-content-start! gl-mt-2!"">
+        <gl-button  @click="selectAllItems" category="tertiary" block class="gl-justify-content-start! gl-mt-2!"">
           Select all
         </gl-button>
         <gl-button category="tertiary" block class="gl-justify-content-start! gl-mt-2!">
@@ -216,7 +220,56 @@ HeaderAndFooter.args = generateProps({
   multiple: true,
   block: true,
 });
-HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
+HeaderAndFooter.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
+
+export const HeaderActions = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlCollapsibleListbox,
+    GlSearchBoxByType,
+    GlButtonGroup,
+    GlButton,
+  },
+  data() {
+    return {
+      selected: [],
+    };
+  },
+  computed: {
+    allValues() {
+      return mockOptions.map(({ value }) => value);
+    },
+  },
+  mounted() {
+    if (this.startOpened) {
+      openListbox(this);
+    }
+  },
+  methods: {
+    selectAllItems() {
+      this.selected = [...this.allValues];
+    },
+    onReset() {
+      this.selected = [];
+    },
+  },
+  template: template('', {
+    bindingOverrides: {
+      '@reset': 'onReset',
+      '@select-all': 'selectAllItems',
+    },
+  }),
+});
+
+HeaderActions.args = generateProps({
+  toggleText: 'Header actions',
+  headerText: 'Assign to department',
+  resetButtonLabel: 'Unassign',
+  showSelectAllButtonLabel: 'Select All',
+  multiple: true,
+  block: true,
+});
+HeaderActions.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
 
 export const CustomListItem = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -624,7 +677,7 @@ Searchable.args = generateProps({
   searchable: true,
   searchPlaceholder: 'Find department',
 });
-Searchable.decorators = [makeContainer({ height: '370px' })];
+Searchable.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
 
 export const SearchableGroups = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -712,7 +765,7 @@ SearchableGroups.args = generateProps({
   searchable: true,
   items: mockGroups,
 });
-SearchableGroups.decorators = [makeContainer({ height: '370px' })];
+SearchableGroups.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
 
 export const InfiniteScroll = (
   args,
@@ -764,7 +817,7 @@ InfiniteScroll.parameters = {
   storyshots: { disable: true },
 };
 InfiniteScroll.args = generateProps();
-InfiniteScroll.decorators = [makeContainer({ height: '370px' })];
+InfiniteScroll.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
 
 export const WithLongContent = (args, { argTypes: { items, ...argTypes } }) => ({
   props: Object.keys(argTypes),

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

@@ -280,6 +280,17 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * The select all button's label, to be rendered in the header. If this is omitted, the button is not
+     * rendered.
+     * The select all button requires a header to be set, so this prop should be used in conjunction with
+     * headerText.
+     */
+    showSelectAllButtonLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
     /**
      * Render the toggle button as a block element
      */
@@ -373,6 +384,17 @@ export default {
       }
       return Boolean(this.selected);
     },
+    showSelectAllButton() {
+      if (!this.showSelectAllButtonLabel) {
+        return false;
+      }
+
+      if (!this.multiple) {
+        return false;
+      }
+
+      return this.selected.length === 0;
+    },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;
     },
@@ -432,6 +454,16 @@ export default {
               }
             },
           },
+          showSelectAllButtonLabel: {
+            immediate: true,
+            handler(showSelectAllButtonLabel) {
+              if (showSelectAllButtonLabel && !this.headerText) {
+                throw new Error(
+                  'The select all button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the showSelectAllButtonLabel prop.'
+                );
+              }
+            },
+          },
           infiniteScroll: {
             immediate: true,
             handler(newValue) {
@@ -591,6 +623,14 @@ export default {
       this.$emit('reset');
       this.closeAndFocus();
     },
+    onSelectAllButtonClicked() {
+      /**
+       * Emitted when the select all button is clicked
+       *
+       * @event select-all
+       */
+      this.$emit('select-all');
+    },
     closeAndFocus() {
       this.$refs.baseDropdown.closeAndFocus();
     },
@@ -690,12 +730,21 @@ export default {
       <gl-button
         v-if="showResetButton"
         category="tertiary"
-        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0!"
+        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis"
         data-testid="listbox-reset-button"
         @click="onResetButtonClicked"
       >
         {{ resetButtonLabel }}
       </gl-button>
+      <gl-button
+        v-if="showSelectAllButton"
+        category="tertiary"
+        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis"
+        data-testid="listbox-select-all-button"
+        @click="onSelectAllButtonClicked"
+      >
+        {{ showSelectAllButtonLabel }}
+      </gl-button>
     </div>
 
     <div v-if="searchable" :class="$options.HEADER_ITEMS_BORDER_CLASSES">

package/src/utils/stories_constants.js

@@ -22,3 +22,9 @@ export const SERIES_NAME = {
   [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',
 };
+
+/**
+ * Reused constants for ListBox
+ */
+
+export const LISTBOX_CONTAINER_HEIGHT = '370px';