@gitlab/ui 63.2.1 → 63.4.0

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.4.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/scss/utilities.scss

@@ -6745,18 +6745,90 @@
 .gl-gap-7\! {
   gap: $gl-spacing-scale-7 !important;
 }
+.gl-column-gap-1 {
+  column-gap: $gl-spacing-scale-1;
+}
+.gl-column-gap-1\! {
+  column-gap: $gl-spacing-scale-1 !important;
+}
+.gl-column-gap-2 {
+  column-gap: $gl-spacing-scale-2;
+}
+.gl-column-gap-2\! {
+  column-gap: $gl-spacing-scale-2 !important;
+}
+.gl-column-gap-3 {
+  column-gap: $gl-spacing-scale-3;
+}
+.gl-column-gap-3\! {
+  column-gap: $gl-spacing-scale-3 !important;
+}
+.gl-column-gap-4 {
+  column-gap: $gl-spacing-scale-4;
+}
+.gl-column-gap-4\! {
+  column-gap: $gl-spacing-scale-4 !important;
+}
+.gl-column-gap-5 {
+  column-gap: $gl-spacing-scale-5;
+}
+.gl-column-gap-5\! {
+  column-gap: $gl-spacing-scale-5 !important;
+}
 .gl-column-gap-6 {
   column-gap: $gl-spacing-scale-6;
 }
 .gl-column-gap-6\! {
   column-gap: $gl-spacing-scale-6 !important;
 }
+.gl-column-gap-7 {
+  column-gap: $gl-spacing-scale-7;
+}
+.gl-column-gap-7\! {
+  column-gap: $gl-spacing-scale-7 !important;
+}
+.gl-row-gap-1 {
+  row-gap: $gl-spacing-scale-1;
+}
+.gl-row-gap-1\! {
+  row-gap: $gl-spacing-scale-1 !important;
+}
+.gl-row-gap-2 {
+  row-gap: $gl-spacing-scale-2;
+}
+.gl-row-gap-2\! {
+  row-gap: $gl-spacing-scale-2 !important;
+}
+.gl-row-gap-3 {
+  row-gap: $gl-spacing-scale-3;
+}
+.gl-row-gap-3\! {
+  row-gap: $gl-spacing-scale-3 !important;
+}
+.gl-row-gap-4 {
+  row-gap: $gl-spacing-scale-4;
+}
+.gl-row-gap-4\! {
+  row-gap: $gl-spacing-scale-4 !important;
+}
+.gl-row-gap-5 {
+  row-gap: $gl-spacing-scale-5;
+}
+.gl-row-gap-5\! {
+  row-gap: $gl-spacing-scale-5 !important;
+}
 .gl-row-gap-6 {
   row-gap: $gl-spacing-scale-6;
 }
 .gl-row-gap-6\! {
   row-gap: $gl-spacing-scale-6 !important;
 }
+.gl-row-gap-7 {
+  row-gap: $gl-spacing-scale-7;
+}
+.gl-row-gap-7\! {
+  row-gap: $gl-spacing-scale-7 !important;
+}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;

package/src/scss/utility-mixins/spacing.scss

@@ -886,10 +886,34 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
+@mixin gl-column-gap-1 {
+  column-gap: $gl-spacing-scale-1;
+}
+
+@mixin gl-column-gap-2 {
+  column-gap: $gl-spacing-scale-2;
+}
+
+@mixin gl-column-gap-3 {
+  column-gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-column-gap-4 {
+  column-gap: $gl-spacing-scale-4;
+}
+
+@mixin gl-column-gap-5 {
+  column-gap: $gl-spacing-scale-5;
+}
+
 @mixin gl-column-gap-6 {
   column-gap: $gl-spacing-scale-6;
 }
 
+@mixin gl-column-gap-7 {
+  column-gap: $gl-spacing-scale-7;
+}
+
 /**
 * Row gap utilities
 *
@@ -898,10 +922,34 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
+@mixin gl-row-gap-1 {
+  row-gap: $gl-spacing-scale-1;
+}
+
+@mixin gl-row-gap-2 {
+  row-gap: $gl-spacing-scale-2;
+}
+
+@mixin gl-row-gap-3 {
+  row-gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-row-gap-4 {
+  row-gap: $gl-spacing-scale-4;
+}
+
+@mixin gl-row-gap-5 {
+  row-gap: $gl-spacing-scale-5;
+}
+
 @mixin gl-row-gap-6 {
   row-gap: $gl-spacing-scale-6;
 }
 
+@mixin gl-row-gap-7 {
+  row-gap: $gl-spacing-scale-7;
+}
+
 /**
 * Responsive margin utilities.
 *

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';