@gitlab/ui 66.2.0 → 66.3.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [66.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.3.0...v66.3.1) (2023-09-01)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox:** show/hide select all and reset buttons for groups ([867e9c5](https://gitlab.com/gitlab-org/gitlab-ui/commit/867e9c5948f21a1bfb94502ac56f6248c6ab0b4a))
+
+# [66.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.2.0...v66.3.0) (2023-08-30)
+
+
+### Features
+
+* accept generic translations at configuration time ([c3e04c7](https://gitlab.com/gitlab-org/gitlab-ui/commit/c3e04c7b72db211bcf3b34c9c47dc42214d1b3db))
+
 # [66.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.1.0...v66.2.0) (2023-08-30)
 
 

package/dist/charts.js

@@ -1,4 +1,3 @@
-import setConfigs from './config';
 export { default as GlChart } from './components/charts/chart/chart';
 export { default as GlAreaChart } from './components/charts/area/area';
 export { default as GlBarChart } from './components/charts/bar/bar';
@@ -13,6 +12,3 @@ export { default as GlStackedColumnChart } from './components/charts/stacked_col
 export { default as GlDiscreteScatterChart } from './components/charts/discrete_scatter/discrete_scatter';
 export { default as GlSingleStat } from './components/charts/single_stat/single_stat';
 export { default as GlSparklineChart } from './components/charts/sparkline/sparkline';
-
-// Add config files
-setConfigs();

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

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

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

@@ -63,6 +63,12 @@ const mockGroups = [{
     value: 'v2.1'
   }]
 }];
+const mockGroupOptionsValues = mockGroups.map(group => group.options).flat().map(_ref2 => {
+  let {
+    value
+  } = _ref2;
+  return value;
+});
 const mockGroupsWithTextSrOnly = [{
   text: 'Default',
   options: [{
@@ -109,4 +115,4 @@ const mockUsers = [{
   icon: 'bin'
 }];
 
-export { mockGroups, mockGroupsWithTextSrOnly, mockOptions, mockOptionsValues, mockUsers };
+export { mockGroupOptionsValues, mockGroups, mockGroupsWithTextSrOnly, mockOptions, mockOptionsValues, mockUsers };

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -2,6 +2,7 @@ import GlClearIconButton from '../../shared_components/clear_icon_button/clear_i
 import GlFormInput from '../form/form_input/form_input';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
+import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -34,7 +35,7 @@ var script = {
     clearButtonTitle: {
       type: String,
       required: false,
-      default: 'Clear'
+      default: () => translate('GlSearchBoxByType.clearButtonTitle', 'Clear')
     },
     /**
      * If provided and true, disables the input and controls
@@ -65,7 +66,7 @@ var script = {
     inputAttributes() {
       const attributes = {
         type: 'search',
-        placeholder: 'Search',
+        placeholder: translate('GlSearchBoxByType.input.placeholder', 'Search'),
         ...this.$attrs
       };
       if (!attributes['aria-label']) {

package/dist/components/shared_components/clear_icon_button/clear_icon_button.js

@@ -1,5 +1,6 @@
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../../base/button/button';
+import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -14,7 +15,7 @@ var script = {
     title: {
       type: String,
       required: false,
-      default: 'Clear'
+      default: () => translate('ClearIconButton.title', 'Clear')
     },
     tooltipContainer: {
       required: false,

package/dist/config.js

@@ -1,5 +1,6 @@
 import { BVConfigPlugin } from 'bootstrap-vue/esm/index.js';
 import Vue from 'vue';
+import translationKeys from '../translations.json';
 import { tooltipDelay } from './utils/constants';
 
 const bFormTextGlobalConfig = {
@@ -28,11 +29,51 @@ try {
 } catch (e) {
   // localStorage doesn't exist (or the value is not properly formatted)
 }
-const setConfigs = () => {
+const i18n = translationKeys;
+let configured = false;
+
+/**
+ * Set GitLab UI configuration.
+ *
+ * @typedef {object} GitLabUIConfiguration
+ * @template TValue=string
+ * @property {undefined | Object} translations Generic translations for component labels to fall back to.
+ * @property {boolean} disableTranslations Whether translation capabilities should be disabled. Suppresses the warning about missing translations.
+ */
+const setConfigs = function () {
+  let {
+    translations
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (configured) {
+    if (process.env.NODE_ENV === 'development') {
+      throw new Error('GitLab UI can only be configured once!');
+    }
+    return;
+  }
+  configured = true;
   Vue.use(BVConfigPlugin, {
     BFormText: bFormTextGlobalConfig,
     BTooltip: tooltipGlobalConfig
   });
+  if (typeof translations === 'object') {
+    if (process.env.NODE_ENV === 'development') {
+      const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {
+        if (!(current in translations)) {
+          acc.push(current);
+        }
+        return acc;
+      }, []);
+      if (undefinedTranslationKeys.length) {
+        /* eslint-disable no-console */
+        console.warn('[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:');
+        console.table(undefinedTranslationKeys);
+        /* eslint-enable no-console */
+      }
+    }
+
+    Object.assign(i18n, translations);
+  }
 };
 
 export default setConfigs;
+export { i18n };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 30 Aug 2023 05:58:01 GMT
+ * Generated on Fri, 01 Sep 2023 14:28:31 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 30 Aug 2023 05:58:01 GMT
+ * Generated on Fri, 01 Sep 2023 14:28:31 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 30 Aug 2023 05:58:01 GMT
+ * Generated on Fri, 01 Sep 2023 14:28:31 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 30 Aug 2023 05:58:01 GMT
+ * Generated on Fri, 01 Sep 2023 14:28:31 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 30 Aug 2023 05:58:01 GMT
+// Generated on Fri, 01 Sep 2023 14:28:31 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 30 Aug 2023 05:58:01 GMT
+// Generated on Fri, 01 Sep 2023 14:28:31 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/dist/utils/i18n.js

@@ -0,0 +1,15 @@
+import { i18n } from '../config';
+
+/**
+ * Mark a label as translatable.
+ *
+ * @param {string} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
+ * @param {string} defaultValue A fallback value to be relied on if the consumer doesn't have translation capabilities.
+ * @returns {string} The translated label.
+ */
+const translate = (key, defaultValue) => {
+  var _i18n$key;
+  return (_i18n$key = i18n[key]) !== null && _i18n$key !== void 0 ? _i18n$key : defaultValue;
+};
+
+export { translate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.2.0",
+  "version": "66.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,7 +17,8 @@
   "files": [
     "src",
     "dist",
-    "scss_to_js"
+    "scss_to_js",
+    "translations.json"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -60,7 +61,8 @@
     "markdownlint:fix": "yarn markdownlint --fix",
     "lint": "run-p prettier eslint stylelint markdownlint",
     "lint:fix": "run-s prettier:fix eslint:fix stylelint:fix markdownlint:fix",
-    "generate:component": "plop"
+    "generate:component": "plop",
+    "translations:collect": "make translations.json"
   },
   "dependencies": {
     "@floating-ui/dom": "1.2.9",
@@ -92,22 +94,22 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.60.0",
+    "@gitlab/svgs": "3.61.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.3.2",
-    "@storybook/addon-docs": "7.3.2",
-    "@storybook/addon-essentials": "7.3.2",
-    "@storybook/addon-storyshots": "7.3.2",
-    "@storybook/addon-storyshots-puppeteer": "7.3.2",
-    "@storybook/addon-viewport": "7.3.2",
-    "@storybook/builder-webpack5": "7.3.2",
-    "@storybook/theming": "7.3.2",
-    "@storybook/vue": "7.3.2",
-    "@storybook/vue-webpack5": "7.3.2",
-    "@storybook/vue3": "7.3.2",
-    "@storybook/vue3-webpack5": "7.3.2",
+    "@storybook/addon-a11y": "7.4.0",
+    "@storybook/addon-docs": "7.4.0",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/addon-storyshots": "7.4.0",
+    "@storybook/addon-storyshots-puppeteer": "7.4.0",
+    "@storybook/addon-viewport": "7.4.0",
+    "@storybook/builder-webpack5": "7.4.0",
+    "@storybook/theming": "7.4.0",
+    "@storybook/vue": "7.4.0",
+    "@storybook/vue-webpack5": "7.4.0",
+    "@storybook/vue3": "7.4.0",
+    "@storybook/vue3-webpack5": "7.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -126,7 +128,7 @@
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.14.0",
     "eslint-plugin-storybook": "0.6.13",
-    "glob": "^7.2.0",
+    "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
     "jest": "^29.6.4",
@@ -156,7 +158,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.3.2",
+    "storybook": "7.4.0",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/charts.js

@@ -1,8 +1,3 @@
-// Add config files
-import setConfigs from './config';
-
-setConfigs();
-
 export { default as GlChart } from './components/charts/chart/chart.vue';
 export { default as GlAreaChart } from './components/charts/area/area.vue';
 export { default as GlBarChart } from './components/charts/bar/bar.vue';

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

@@ -18,7 +18,13 @@ 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,
+  mockOptionsValues,
+  mockGroups,
+  mockGroupOptionsValues,
+  mockGroupsWithTextSrOnly,
+} from './mock_data';
 
 jest.mock('@floating-ui/dom');
 autoUpdate.mockImplementation(() => {
@@ -556,6 +562,26 @@ describe('GlCollapsibleListbox', () => {
       expect(wrapper.emitted('reset')).toHaveLength(1);
       expect(wrapper.vm.closeAndFocus).not.toHaveBeenCalled();
     });
+
+    describe('with groups', () => {
+      it.each`
+        description        | props
+        ${'multi-select'}  | ${{ multiple: true, selected: mockGroupOptionsValues }}
+        ${'single-select'} | ${{ multiple: false, selected: mockGroups[0].options[0].value }}
+      `(
+        'shows the button if the label is provided and the selection is complete in $description mode',
+        ({ props }) => {
+          buildWrapper({
+            headerText: 'Select assignee',
+            resetButtonLabel: 'Unassign',
+            items: mockGroups,
+            ...props,
+          });
+
+          expect(findResetButton().exists()).toBe(true);
+        }
+      );
+    });
   });
 
   describe('with select all action', () => {
@@ -663,6 +689,21 @@ describe('GlCollapsibleListbox', () => {
 
       expect(wrapper.emitted('select-all')).toHaveLength(1);
     });
+
+    describe('with groups', () => {
+      it('hides select all button if all items are selected', () => {
+        buildWrapper({
+          headerText: 'Select assignee',
+          resetButtonLabel: 'Unassign',
+          showSelectAllButtonLabel: 'Select All',
+          selected: mockGroupOptionsValues,
+          items: mockGroups,
+          multiple: true,
+        });
+
+        expect(findSelectAllButton().exists()).toBe(false);
+      });
+    });
   });
 
   describe('when `infiniteScroll` prop is `true`', () => {

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

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

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

@@ -69,6 +69,11 @@ export const mockGroups = [
   },
 ];
 
+export const mockGroupOptionsValues = mockGroups
+  .map((group) => group.options)
+  .flat()
+  .map(({ value }) => value);
+
 export const mockGroupsWithTextSrOnly = [
   {
     text: 'Default',

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -3,6 +3,7 @@ import GlClearIconButton from '../../shared_components/clear_icon_button/clear_i
 import GlFormInput from '../form/form_input/form_input.vue';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+import { translate } from '../../../utils/i18n';
 
 export default {
   name: 'GlSearchboxByType',
@@ -34,7 +35,7 @@ export default {
     clearButtonTitle: {
       type: String,
       required: false,
-      default: 'Clear',
+      default: () => translate('GlSearchBoxByType.clearButtonTitle', 'Clear'),
     },
     /**
      * If provided and true, disables the input and controls
@@ -66,7 +67,7 @@ export default {
     inputAttributes() {
       const attributes = {
         type: 'search',
-        placeholder: 'Search',
+        placeholder: translate('GlSearchBoxByType.input.placeholder', 'Search'),
         ...this.$attrs,
       };
 

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -1,6 +1,7 @@
 <script>
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../../base/button/button.vue';
+import { translate } from '../../../utils/i18n';
 
 export default {
   name: 'ClearIconButton',
@@ -14,7 +15,7 @@ export default {
     title: {
       type: String,
       required: false,
-      default: 'Clear',
+      default: () => translate('ClearIconButton.title', 'Clear'),
     },
     tooltipContainer: {
       required: false,

package/src/config.js

@@ -1,5 +1,6 @@
 import { BVConfigPlugin } from 'bootstrap-vue';
 import Vue from 'vue';
+import translationKeys from '../translations.json';
 import { tooltipDelay } from './utils/constants';
 
 const bFormTextGlobalConfig = {
@@ -31,11 +32,53 @@ try {
   // localStorage doesn't exist (or the value is not properly formatted)
 }
 
-const setConfigs = () => {
+export const i18n = translationKeys;
+
+let configured = false;
+
+/**
+ * Set GitLab UI configuration.
+ *
+ * @typedef {object} GitLabUIConfiguration
+ * @template TValue=string
+ * @property {undefined | Object} translations Generic translations for component labels to fall back to.
+ * @property {boolean} disableTranslations Whether translation capabilities should be disabled. Suppresses the warning about missing translations.
+ */
+const setConfigs = ({ translations } = {}) => {
+  if (configured) {
+    if (process.env.NODE_ENV === 'development') {
+      throw new Error('GitLab UI can only be configured once!');
+    }
+
+    return;
+  }
+  configured = true;
+
   Vue.use(BVConfigPlugin, {
     BFormText: bFormTextGlobalConfig,
     BTooltip: tooltipGlobalConfig,
   });
+
+  if (typeof translations === 'object') {
+    if (process.env.NODE_ENV === 'development') {
+      const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {
+        if (!(current in translations)) {
+          acc.push(current);
+        }
+        return acc;
+      }, []);
+      if (undefinedTranslationKeys.length) {
+        /* eslint-disable no-console */
+        console.warn(
+          '[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:'
+        );
+        console.table(undefinedTranslationKeys);
+        /* eslint-enable no-console */
+      }
+    }
+
+    Object.assign(i18n, translations);
+  }
 };
 
 export default setConfigs;

package/src/utils/i18n.js

@@ -0,0 +1,10 @@
+import { i18n } from '../config';
+
+/**
+ * Mark a label as translatable.
+ *
+ * @param {string} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
+ * @param {string} defaultValue A fallback value to be relied on if the consumer doesn't have translation capabilities.
+ * @returns {string} The translated label.
+ */
+export const translate = (key, defaultValue) => i18n[key] ?? defaultValue;

package/translations.json

@@ -0,0 +1,5 @@
+{
+  "ClearIconButton.title": "Clear",
+  "GlSearchBoxByType.clearButtonTitle": "Clear",
+  "GlSearchBoxByType.input.placeholder": "Search"
+}