@gitlab/ui 64.17.0 → 64.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.17.0",
+  "version": "64.18.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -118,7 +118,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.14.0",
+    "cypress": "12.16.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.42.0",
     "eslint-import-resolver-jest": "3.0.2",

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

package/src/scss/utilities.scss

@@ -1149,6 +1149,14 @@
   border-left-color: transparent !important;
 }
 
+.gl-border-gray-10 {
+  border-color: $gray-10;
+}
+
+.gl-border-gray-10\! {
+  border-color: $gray-10 !important;
+}
+
 .gl-border-gray-50 {
   border-color: $gray-50;
 }

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

@@ -119,6 +119,10 @@
   border-left-color: transparent;
 }
 
+@mixin gl-border-gray-10 {
+  border-color: $gray-10;
+}
+
 @mixin gl-border-gray-50 {
   border-color: $gray-50;
 }