@gitlab/ui 64.18.0 → 64.18.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [64.18.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.18.0...v64.18.1) (2023-07-04)
+
+
+### Bug Fixes
+
+* **listbox:** Allow use of reset button on single select ([cff7777](https://gitlab.com/gitlab-org/gitlab-ui/commit/cff7777e5eff36de54d4f628f818fc44284d1de1))
+
 # [64.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.17.0...v64.18.0) (2023-07-04)
 
 

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

@@ -387,9 +387,6 @@ var script = {
       if (!this.resetButtonLabel) {
         return false;
       }
-      if (!this.multiple) {
-        return false;
-      }
 
       /**
        * if dropdown has no items
@@ -398,6 +395,13 @@ var script = {
       if (!this.hasItems) {
         return false;
       }
+
+      /**
+       * hide if no selection
+       */
+      if (this.selected.length === 0) {
+        return false;
+      }
       if (this.multiple) {
         return this.selected.length === this.items.length;
       }

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Tue, 04 Jul 2023 13:02:13 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Tue, 04 Jul 2023 13:02:13 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Tue, 04 Jul 2023 13:02:13 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Tue, 04 Jul 2023 13:02:13 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 04 Jul 2023 11:29:36 GMT
+// Generated on Tue, 04 Jul 2023 13:02:13 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 04 Jul 2023 11:29:36 GMT
+// Generated on Tue, 04 Jul 2023 13:02:13 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/package.json

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

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

@@ -485,31 +485,33 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it.each`
-      title      | multiple | selected
-      ${'shows'} | ${true}  | ${mockOptionsValues}
-      ${'hides'} | ${false} | ${mockOptions[1].value}
+      description        | props
+      ${'multi-select'}  | ${{ multiple: true, selected: mockOptionsValues }}
+      ${'single-select'} | ${{ multiple: false, selected: 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 }) => {
+      'shows the button if the label is provided and the selection is complete in $description mode',
+      ({ props }) => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
-          selected,
           items: mockOptions,
-          multiple,
+          ...props,
         });
 
-        expect(findResetButton().exists()).toBe(multiple);
+        expect(findResetButton().exists()).toBe(true);
       }
     );
 
-    it('hides reset button if the label is provided and the selection is not complete', () => {
+    it.each`
+      description        | props
+      ${'multi-select'}  | ${{ multiple: true, selected: [] }}
+      ${'single-select'} | ${{ multiple: false, selected: [] }}
+    `('hides the button if the selection is empty in $description mode', ({ props }) => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        selected: mockOptions[1].value,
         items: mockOptions,
-        multiple: true,
+        ...props,
       });
 
       expect(findResetButton().exists()).toBe(false);
@@ -527,22 +529,7 @@ describe('GlCollapsibleListbox', () => {
       expect(findResetButton().exists()).toBe(false);
     });
 
-    it.each`
-      description        | props
-      ${'multi-select'}  | ${{ multiple: true, selected: [] }}
-      ${'single-select'} | ${{ multiple: false, selected: null }}
-    `('hides the button if the selection is empty in $description mode', ({ props }) => {
-      buildWrapper({
-        headerText: 'Select assignee',
-        resetButtonLabel: 'Unassign',
-        items: mockOptions,
-        ...props,
-      });
-
-      expect(findResetButton().exists()).toBe(false);
-    });
-
-    it('on click, emits the reset event does not and call closeAndFocus() for multiple mode', () => {
+    it('on click, emits the `reset` event but does not call `closeAndFocus`', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
@@ -572,24 +559,31 @@ describe('GlCollapsibleListbox', () => {
       expect(wrapper).toHaveLoggedVueErrors();
     });
 
-    it.each`
-      multiple | resetVisible | selectAllVisible
-      ${false} | ${false}     | ${false}
-      ${true}  | ${false}     | ${true}
+    describe.each`
+      multiple | resetVisible | selectAllVisible | selected
+      ${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, resetVisible, selectAllVisible }) => {
-        buildWrapper({
-          headerText: 'Select assignee',
-          resetButtonLabel: 'Unassign',
-          showSelectAllButtonLabel: 'Select All',
-          selected: [],
-          items: mockOptions,
-          multiple,
+      'when label is provided, selection is empty and multiple option is $multiple',
+      ({ multiple, resetVisible, selectAllVisible, selected }) => {
+        beforeEach(() => {
+          buildWrapper({
+            headerText: 'Select assignee',
+            resetButtonLabel: 'Unassign',
+            showSelectAllButtonLabel: 'Select All',
+            items: mockOptions,
+            selected,
+            multiple,
+          });
+        });
+
+        it(`${selectAllVisible ? 'shows' : 'does not show'} the Select all button`, () => {
+          expect(findSelectAllButton().exists()).toBe(selectAllVisible);
         });
 
-        expect(findResetButton().exists()).toBe(resetVisible);
-        expect(findSelectAllButton().exists()).toBe(selectAllVisible);
+        it(`${resetVisible ? 'shows' : 'does not show'} the Reset button`, () => {
+          expect(findResetButton().exists()).toBe(resetVisible);
+        });
       }
     );
 
@@ -644,7 +638,7 @@ describe('GlCollapsibleListbox', () => {
       expect(findSelectAllButton().text()).toBe('Select All');
     });
 
-    it('on click, emits the select-all event and calls closeAndFocus()', () => {
+    it('on click, emits the `select-all` event and calls `closeAndFocus`', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',

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

@@ -398,10 +398,6 @@ export default {
         return false;
       }
 
-      if (!this.multiple) {
-        return false;
-      }
-
       /**
        * if dropdown has no items
        * reset all should be hidden
@@ -410,6 +406,13 @@ export default {
         return false;
       }
 
+      /**
+       * hide if no selection
+       */
+      if (this.selected.length === 0) {
+        return false;
+      }
+
       if (this.multiple) {
         return this.selected.length === this.items.length;
       }