@gitlab/ui 64.10.0 → 64.10.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox:** listbox stays open ([a83355d](https://gitlab.com/gitlab-org/gitlab-ui/commit/a83355d527c483ca6bd6587da64f565ef118b8da))
+
 # [64.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.9.0...v64.10.0) (2023-06-14)
 
 

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

@@ -329,7 +329,7 @@ var script = {
   },
   computed: {
     listboxTag() {
-      if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
+      if (!this.hasItems || isOption(this.items[0])) return 'ul';
       return 'div';
     },
     listboxClasses() {
@@ -345,6 +345,9 @@ var script = {
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
+    hasItems() {
+      return this.items.length > 0;
+    },
     listboxToggleText() {
       if (!this.toggleText) {
         if (!this.multiple && this.selectedValues.length) {
@@ -384,8 +387,19 @@ var script = {
       if (!this.resetButtonLabel) {
         return false;
       }
+      if (!this.multiple) {
+        return false;
+      }
+
+      /**
+       * if dropdown has no items
+       * reset all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
       if (this.multiple) {
-        return this.selected.length > 0;
+        return this.selected.length === this.items.length;
       }
       return Boolean(this.selected);
     },
@@ -396,7 +410,15 @@ var script = {
       if (!this.multiple) {
         return false;
       }
-      return this.selected.length === 0;
+
+      /**
+       * if dropdown has no items
+       * select all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
+      return this.selected.length !== this.items.length;
     },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;
@@ -614,7 +636,6 @@ var script = {
        * @event reset
        */
       this.$emit('reset');
-      this.closeAndFocus();
     },
     onSelectAllButtonClicked() {
       /**

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.0",
+  "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(() => {
@@ -179,6 +179,15 @@ describe('GlCollapsibleListbox', () => {
         await nextTick();
         expect(wrapper.emitted('select')[0][0]).toEqual(mockOptions[2].value);
       });
+
+      it('close dropdown for single selection', () => {
+        jest.spyOn(wrapper.vm, 'closeAndFocus');
+        expect(wrapper.vm.closeAndFocus).not.toHaveBeenCalled();
+
+        findListboxItems().at(2).vm.$emit('select', true);
+
+        expect(wrapper.vm.closeAndFocus).toHaveBeenCalled();
+      });
     });
 
     describe('with groups', () => {
@@ -475,17 +484,47 @@ describe('GlCollapsibleListbox', () => {
       expect(wrapper).toHaveLoggedVueErrors();
     });
 
-    it('shows the reset button if the label is provided and the selection is not empty', () => {
+    it.each`
+      title      | multiple | selected
+      ${'shows'} | ${true}  | ${mockOptionsValues}
+      ${'hides'} | ${false} | ${mockOptions[1].value}
+    `(
+      '$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,
+          items: mockOptions,
+          multiple,
+        });
+
+        expect(findResetButton().exists()).toBe(multiple);
+      }
+    );
+
+    it('hides reset button if the label is provided and the selection is not complete', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
         selected: mockOptions[1].value,
         items: mockOptions,
+        multiple: true,
       });
-      const button = findResetButton();
 
-      expect(button.exists()).toBe(true);
-      expect(button.text()).toBe('Unassign');
+      expect(findResetButton().exists()).toBe(false);
+    });
+
+    it('hides reset button if dropdown has no items', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        selected: mockOptions[1].value,
+        items: [],
+        multiple: true,
+      });
+
+      expect(findResetButton().exists()).toBe(false);
     });
 
     it.each`
@@ -503,12 +542,13 @@ describe('GlCollapsibleListbox', () => {
       expect(findResetButton().exists()).toBe(false);
     });
 
-    it('on click, emits the reset event and calls closeAndFocus()', () => {
+    it('on click, emits the reset event does not and call closeAndFocus() for multiple mode', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        selected: mockOptions[1].value,
+        selected: mockOptionsValues,
         items: mockOptions,
+        multiple: true,
       });
       jest.spyOn(wrapper.vm, 'closeAndFocus');
 
@@ -518,7 +558,7 @@ describe('GlCollapsibleListbox', () => {
       findResetButton().trigger('click');
 
       expect(wrapper.emitted('reset')).toHaveLength(1);
-      expect(wrapper.vm.closeAndFocus).toHaveBeenCalled();
+      expect(wrapper.vm.closeAndFocus).not.toHaveBeenCalled();
     });
   });
 
@@ -533,12 +573,12 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it.each`
-      multiple | expectedResult
-      ${false} | ${false}
-      ${true}  | ${true}
+      multiple | resetVisible | selectAllVisible
+      ${false} | ${false}     | ${false}
+      ${true}  | ${false}     | ${true}
     `(
       'shows the select all button if the label is provided and the selection is empty and multiple option is $multiple',
-      ({ multiple, expectedResult }) => {
+      ({ multiple, resetVisible, selectAllVisible }) => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
@@ -548,11 +588,49 @@ describe('GlCollapsibleListbox', () => {
           multiple,
         });
 
-        expect(findResetButton().exists()).toBe(!expectedResult);
-        expect(findSelectAllButton().exists()).toBe(expectedResult);
+        expect(findResetButton().exists()).toBe(resetVisible);
+        expect(findSelectAllButton().exists()).toBe(selectAllVisible);
       }
     );
 
+    it('hides select all button if dropdown has no items', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        showSelectAllButtonLabel: 'Select All',
+        items: [],
+        multiple: true,
+      });
+
+      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

@@ -345,7 +345,7 @@ export default {
   },
   computed: {
     listboxTag() {
-      if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
+      if (!this.hasItems || isOption(this.items[0])) return 'ul';
       return 'div';
     },
     listboxClasses() {
@@ -361,6 +361,9 @@ export default {
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
+    hasItems() {
+      return this.items.length > 0;
+    },
     listboxToggleText() {
       if (!this.toggleText) {
         if (!this.multiple && this.selectedValues.length) {
@@ -394,8 +397,21 @@ export default {
       if (!this.resetButtonLabel) {
         return false;
       }
+
+      if (!this.multiple) {
+        return false;
+      }
+
+      /**
+       * if dropdown has no items
+       * reset all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
+
       if (this.multiple) {
-        return this.selected.length > 0;
+        return this.selected.length === this.items.length;
       }
       return Boolean(this.selected);
     },
@@ -408,7 +424,15 @@ export default {
         return false;
       }
 
-      return this.selected.length === 0;
+      /**
+       * if dropdown has no items
+       * select all should be hidden
+       */
+      if (!this.hasItems) {
+        return false;
+      }
+
+      return this.selected.length !== this.items.length;
     },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;
@@ -636,7 +660,6 @@ export default {
        * @event reset
        */
       this.$emit('reset');
-      this.closeAndFocus();
     },
     onSelectAllButtonClicked() {
       /**

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