@gitlab/ui 66.3.0 → 66.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.3.0",
+  "version": "66.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,22 +94,22 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.60.0",
+    "@gitlab/svgs": "3.61.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.3.2",
-    "@storybook/addon-docs": "7.3.2",
-    "@storybook/addon-essentials": "7.3.2",
-    "@storybook/addon-storyshots": "7.3.2",
-    "@storybook/addon-storyshots-puppeteer": "7.3.2",
-    "@storybook/addon-viewport": "7.3.2",
-    "@storybook/builder-webpack5": "7.3.2",
-    "@storybook/theming": "7.3.2",
-    "@storybook/vue": "7.3.2",
-    "@storybook/vue-webpack5": "7.3.2",
-    "@storybook/vue3": "7.3.2",
-    "@storybook/vue3-webpack5": "7.3.2",
+    "@storybook/addon-a11y": "7.4.0",
+    "@storybook/addon-docs": "7.4.0",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/addon-storyshots": "7.4.0",
+    "@storybook/addon-storyshots-puppeteer": "7.4.0",
+    "@storybook/addon-viewport": "7.4.0",
+    "@storybook/builder-webpack5": "7.4.0",
+    "@storybook/theming": "7.4.0",
+    "@storybook/vue": "7.4.0",
+    "@storybook/vue-webpack5": "7.4.0",
+    "@storybook/vue3": "7.4.0",
+    "@storybook/vue3-webpack5": "7.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -121,7 +121,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.17.4",
+    "cypress": "13.1.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.48.0",
@@ -158,7 +158,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.3.2",
+    "storybook": "7.4.0",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

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

@@ -18,7 +18,13 @@ import GlIntersectionObserver from '../../../utilities/intersection_observer/int
 import GlCollapsibleListbox, { ITEM_SELECTOR } from './listbox.vue';
 import GlListboxItem from './listbox_item.vue';
 import GlListboxGroup from './listbox_group.vue';
-import { mockOptions, mockOptionsValues, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
+import {
+  mockOptions,
+  mockOptionsValues,
+  mockGroups,
+  mockGroupOptionsValues,
+  mockGroupsWithTextSrOnly,
+} from './mock_data';
 
 jest.mock('@floating-ui/dom');
 autoUpdate.mockImplementation(() => {
@@ -556,6 +562,26 @@ describe('GlCollapsibleListbox', () => {
       expect(wrapper.emitted('reset')).toHaveLength(1);
       expect(wrapper.vm.closeAndFocus).not.toHaveBeenCalled();
     });
+
+    describe('with groups', () => {
+      it.each`
+        description        | props
+        ${'multi-select'}  | ${{ multiple: true, selected: mockGroupOptionsValues }}
+        ${'single-select'} | ${{ multiple: false, selected: mockGroups[0].options[0].value }}
+      `(
+        'shows the button if the label is provided and the selection is complete in $description mode',
+        ({ props }) => {
+          buildWrapper({
+            headerText: 'Select assignee',
+            resetButtonLabel: 'Unassign',
+            items: mockGroups,
+            ...props,
+          });
+
+          expect(findResetButton().exists()).toBe(true);
+        }
+      );
+    });
   });
 
   describe('with select all action', () => {
@@ -663,6 +689,21 @@ describe('GlCollapsibleListbox', () => {
 
       expect(wrapper.emitted('select-all')).toHaveLength(1);
     });
+
+    describe('with groups', () => {
+      it('hides select all button if all items are selected', () => {
+        buildWrapper({
+          headerText: 'Select assignee',
+          resetButtonLabel: 'Unassign',
+          showSelectAllButtonLabel: 'Select All',
+          selected: mockGroupOptionsValues,
+          items: mockGroups,
+          multiple: true,
+        });
+
+        expect(findSelectAllButton().exists()).toBe(false);
+      });
+    });
   });
 
   describe('when `infiniteScroll` prop is `true`', () => {

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

@@ -412,7 +412,7 @@ export default {
       }
 
       if (this.multiple) {
-        return this.selected.length === this.items.length;
+        return this.selected.length === this.flattenedOptions.length;
       }
       return Boolean(this.selected);
     },
@@ -433,7 +433,7 @@ export default {
         return false;
       }
 
-      return this.selected.length !== this.items.length;
+      return this.selected.length !== this.flattenedOptions.length;
     },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;

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

@@ -69,6 +69,11 @@ export const mockGroups = [
   },
 ];
 
+export const mockGroupOptionsValues = mockGroups
+  .map((group) => group.options)
+  .flat()
+  .map(({ value }) => value);
+
 export const mockGroupsWithTextSrOnly = [
   {
     text: 'Default',

package/src/scss/utilities.scss

@@ -6847,6 +6847,12 @@
     margin-top: #{$gl-spacing-scale-3} !important;
   }
 }
+.gl-gap-1 {
+  gap: $gl-spacing-scale-1;
+}
+.gl-gap-1\! {
+  gap: $gl-spacing-scale-1 !important;
+}
 .gl-gap-2 {
   gap: $gl-spacing-scale-2;
 }

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

@@ -868,6 +868,10 @@
   }
 }
 
+@mixin gl-gap-1 {
+  gap: $gl-spacing-scale-1;
+}
+
 @mixin gl-gap-2 {
   gap: $gl-spacing-scale-2;
 }