@gitlab/ui 64.10.1 → 64.10.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [64.10.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.10.1...v64.10.2) (2023-06-16)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox:** reverse clear all logic ([270777b](https://gitlab.com/gitlab-org/gitlab-ui/commit/270777bd74cfa2e76eff594ec1612ea408b4372f))
+
 ## [64.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.10.0...v64.10.1) (2023-06-14)
 
 

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

@@ -399,7 +399,7 @@ var script = {
         return false;
       }
       if (this.multiple) {
-        return this.selected.length > 0;
+        return this.selected.length === this.items.length;
       }
       return Boolean(this.selected);
     },
@@ -418,7 +418,7 @@ var script = {
       if (!this.hasItems) {
         return false;
       }
-      return this.selected.length === 0;
+      return this.selected.length !== this.items.length;
     },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;

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

@@ -35,6 +35,12 @@ const mockOptions = [{
   value: 'sup',
   text: 'Support'
 }];
+const mockOptionsValues = mockOptions.map(_ref => {
+  let {
+    value
+  } = _ref;
+  return value;
+});
 const mockGroups = [{
   text: 'Branches',
   options: [{
@@ -103,4 +109,4 @@ const mockUsers = [{
   icon: 'bin'
 }];
 
-export { mockGroups, mockGroupsWithTextSrOnly, mockOptions, mockUsers };
+export { mockGroups, mockGroupsWithTextSrOnly, mockOptions, mockOptionsValues, mockUsers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.10.1",
+  "version": "64.10.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -156,8 +156,8 @@
     "storybook": "7.0.20",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
-    "stylelint-config-prettier": "9.0.4",
-    "stylelint-prettier": "2.0.0",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-prettier": "3.0.0",
     "vue": "2.7.14",
     "vue-loader": "^15.8.3",
     "vue-loader-vue3": "npm:vue-loader@17",

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

@@ -18,7 +18,7 @@ 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, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
+import { mockOptions, mockOptionsValues, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
 
 jest.mock('@floating-ui/dom');
 autoUpdate.mockImplementation(() => {
@@ -485,16 +485,16 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it.each`
-      multiple
-      ${true}
-      ${false}
+      title      | multiple | selected
+      ${'shows'} | ${true}  | ${mockOptionsValues}
+      ${'hides'} | ${false} | ${mockOptions[1].value}
     `(
-      'shows the reset button if the label is provided and the selection is not empty and mode if multiple mode is $multiple',
-      ({ multiple }) => {
+      '$title the reset button if the label is provided and the selection is complete and mode if multiple mode is $multiple',
+      ({ multiple, selected }) => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
-          selected: mockOptions[1].value,
+          selected,
           items: mockOptions,
           multiple,
         });
@@ -503,7 +503,7 @@ describe('GlCollapsibleListbox', () => {
       }
     );
 
-    it('shows the reset button if the label is provided and the selection is not empty', () => {
+    it('hides reset button if the label is provided and the selection is not complete', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
@@ -512,7 +512,7 @@ describe('GlCollapsibleListbox', () => {
         multiple: true,
       });
 
-      expect(findResetButton().text()).toBe('Unassign');
+      expect(findResetButton().exists()).toBe(false);
     });
 
     it('hides reset button if dropdown has no items', () => {
@@ -546,7 +546,7 @@ describe('GlCollapsibleListbox', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        selected: mockOptions[1].value,
+        selected: mockOptionsValues,
         items: mockOptions,
         multiple: true,
       });
@@ -605,6 +605,32 @@ describe('GlCollapsibleListbox', () => {
       expect(findSelectAllButton().exists()).toBe(false);
     });
 
+    it('hides select all button if all items are selected', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        showSelectAllButtonLabel: 'Select All',
+        selected: mockOptionsValues,
+        items: mockOptions,
+        multiple: true,
+      });
+
+      expect(findSelectAllButton().exists()).toBe(false);
+    });
+
+    it('has the label text "Select All" if the label is provided and some items are selected', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        showSelectAllButtonLabel: 'Select All',
+        selected: [mockOptions[1].value],
+        items: mockOptions,
+        multiple: true,
+      });
+
+      expect(findSelectAllButton().text()).toBe('Select All');
+    });
+
     it('has the label text "Select All" if the label is provided and the selection is empty', () => {
       buildWrapper({
         headerText: 'Select assignee',

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

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

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

@@ -49,6 +49,8 @@ export const mockOptions = [
   },
 ];
 
+export const mockOptionsValues = mockOptions.map(({ value }) => value);
+
 export const mockGroups = [
   {
     text: 'Branches',