@gitlab/ui 64.11.0 → 64.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.11.0",
+  "version": "64.12.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,13 +30,13 @@
     "cy:edge": "cypress run --browser edge",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && storybook dev --ci --host localhost --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host localhost --port 9001 -c .storybook",
+    "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook-prep": "run-s generate-utilities build-scss-variables copy-fonts",
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
     "pretest:unit": "yarn build-scss-variables",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://localhost:9001/iframe.html cy:run",
+    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html cy:run",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -46,7 +46,7 @@
     "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
-    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001/iframe.html",
+    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
@@ -94,18 +94,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.20",
-    "@storybook/addon-docs": "7.0.20",
-    "@storybook/addon-essentials": "7.0.20",
-    "@storybook/addon-storyshots": "7.0.20",
-    "@storybook/addon-storyshots-puppeteer": "7.0.20",
-    "@storybook/addon-viewport": "7.0.20",
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/vue": "7.0.20",
-    "@storybook/vue-webpack5": "7.0.20",
-    "@storybook/vue3": "7.0.20",
-    "@storybook/vue3-webpack5": "7.0.20",
+    "@storybook/addon-a11y": "7.0.21",
+    "@storybook/addon-docs": "7.0.21",
+    "@storybook/addon-essentials": "7.0.21",
+    "@storybook/addon-storyshots": "7.0.21",
+    "@storybook/addon-storyshots-puppeteer": "7.0.21",
+    "@storybook/addon-viewport": "7.0.21",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/vue": "7.0.21",
+    "@storybook/vue-webpack5": "7.0.21",
+    "@storybook/vue3": "7.0.21",
+    "@storybook/vue3-webpack5": "7.0.21",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -153,7 +153,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.20",
+    "storybook": "7.0.21",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "^9.0.5",

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, mockOptionsValues, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
+import { mockOptions, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
 
 jest.mock('@floating-ui/dom');
 autoUpdate.mockImplementation(() => {
@@ -485,16 +485,16 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it.each`
-      title      | multiple | selected
-      ${'shows'} | ${true}  | ${mockOptionsValues}
-      ${'hides'} | ${false} | ${mockOptions[1].value}
+      multiple
+      ${true}
+      ${false}
     `(
-      '$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 reset button if the label is provided and the selection is not empty and mode if multiple mode is $multiple',
+      ({ multiple }) => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
-          selected,
+          selected: mockOptions[1].value,
           items: mockOptions,
           multiple,
         });
@@ -503,7 +503,7 @@ describe('GlCollapsibleListbox', () => {
       }
     );
 
-    it('hides reset button if the label is provided and the selection is not complete', () => {
+    it('shows the reset button if the label is provided and the selection is not empty', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
@@ -512,7 +512,7 @@ describe('GlCollapsibleListbox', () => {
         multiple: true,
       });
 
-      expect(findResetButton().exists()).toBe(false);
+      expect(findResetButton().text()).toBe('Unassign');
     });
 
     it('hides reset button if dropdown has no items', () => {
@@ -546,7 +546,7 @@ describe('GlCollapsibleListbox', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        selected: mockOptionsValues,
+        selected: mockOptions[1].value,
         items: mockOptions,
         multiple: true,
       });
@@ -605,32 +605,6 @@ 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 === this.items.length;
+        return this.selected.length > 0;
       }
       return Boolean(this.selected);
     },
@@ -432,7 +432,7 @@ export default {
         return false;
       }
 
-      return this.selected.length !== this.items.length;
+      return this.selected.length === 0;
     },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;

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

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

package/src/config.js

@@ -7,6 +7,8 @@ const bFormTextGlobalConfig = {
 };
 
 const tooltipGlobalConfig = {
+  // Work around for https://github.com/bootstrap-vue/bootstrap-vue/issues/6507
+  boundaryPadding: 5,
   customClass: 'gl-tooltip',
   delay: tooltipDelay,
 };

package/src/scss/utilities.scss

@@ -5164,6 +5164,54 @@
   min-width: 0 !important;
 }
 
+.gl-min-w-1 {
+  min-width: $gl-spacing-scale-1;
+}
+
+.gl-min-w-1\! {
+  min-width: $gl-spacing-scale-1 !important;
+}
+
+.gl-min-w-2 {
+  min-width: $gl-spacing-scale-2;
+}
+
+.gl-min-w-2\! {
+  min-width: $gl-spacing-scale-2 !important;
+}
+
+.gl-min-w-3 {
+  min-width: $gl-spacing-scale-3;
+}
+
+.gl-min-w-3\! {
+  min-width: $gl-spacing-scale-3 !important;
+}
+
+.gl-min-w-4 {
+  min-width: $gl-spacing-scale-4;
+}
+
+.gl-min-w-4\! {
+  min-width: $gl-spacing-scale-4 !important;
+}
+
+.gl-min-w-5 {
+  min-width: $gl-spacing-scale-5;
+}
+
+.gl-min-w-5\! {
+  min-width: $gl-spacing-scale-5 !important;
+}
+
+.gl-min-w-6 {
+  min-width: $gl-spacing-scale-6;
+}
+
+.gl-min-w-6\! {
+  min-width: $gl-spacing-scale-6 !important;
+}
+
 .gl-min-w-7 {
   min-width: $gl-spacing-scale-7;
 }

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

@@ -344,6 +344,30 @@
   min-width: 0;
 }
 
+@mixin gl-min-w-1 {
+  min-width: $gl-spacing-scale-1;
+}
+
+@mixin gl-min-w-2 {
+  min-width: $gl-spacing-scale-2;
+}
+
+@mixin gl-min-w-3 {
+  min-width: $gl-spacing-scale-3;
+}
+
+@mixin gl-min-w-4 {
+  min-width: $gl-spacing-scale-4;
+}
+
+@mixin gl-min-w-5 {
+  min-width: $gl-spacing-scale-5;
+}
+
+@mixin gl-min-w-6 {
+  min-width: $gl-spacing-scale-6;
+}
+
 @mixin gl-min-w-7 {
   min-width: $gl-spacing-scale-7;
 }