@gitlab/ui 85.11.0 → 85.12.1

package/dist/utils/i18n.js

@@ -1,5 +1,11 @@
+import escape from 'lodash/escape';
 import { i18n } from '../config';
 
+const defaultPluralHandler = (n, singleValue, pluralValue) => {
+  const value = n === 1 ? singleValue : pluralValue;
+  return value.replace(/%d/g, n);
+};
+
 /**
  * Mark a label as translatable.
  *
@@ -12,4 +18,46 @@ const translate = (key, defaultValue) => {
   return (_i18n$key = i18n[key]) !== null && _i18n$key !== void 0 ? _i18n$key : defaultValue;
 };
 
-export { translate };
+/**
+ * Marks a label as translatable and pluralized.
+ *
+ * @param {*} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
+ * @param {*} singularValue The singular value to be relied on if the consumer doesn't have translation capabilities.
+ * @param {*} pluralValue The plural value to be relied on if the consumer doesn't have translation capabilities.
+ * @returns {function} A function that takes a number and returns the pluralized translated label.
+ */
+const translatePlural = (key, singularValue, pluralValue) => {
+  if (i18n[key]) {
+    return i18n[key];
+  }
+  return x => defaultPluralHandler(x, singularValue, pluralValue);
+};
+
+/**
+ * Very limited implementation of sprintf supporting only named parameters.
+ * Copied from the GitLab repo: https://gitlab.com/gitlab-org/gitlab/-/blob/0dff8b02accb3dccbf6cd31236834c37013aad59/app/assets/javascripts/locale/sprintf.js.
+ * @param {string} input - (translated) text with parameters (e.g. '%{num_users} users use us')
+ * @param {Object.<string, string|number>} [parameters] - object mapping parameter names to values (e.g. { num_users: 5 })
+ * @param {boolean} [escapeParameters=true] - whether parameter values should be escaped (see https://lodash.com/docs/4.17.15#escape)
+ * @returns {string} the text with parameters replaces (e.g. '5 users use us')
+ * @see https://ruby-doc.org/core-2.3.3/Kernel.html#method-i-sprintf
+ * @see https://gitlab.com/gitlab-org/gitlab-foss/issues/37992
+ */
+function sprintf(input, parameters) {
+  let escapeParameters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let output = input;
+  output = output.replace(/%+/g, '%');
+  if (parameters) {
+    const mappedParameters = new Map(Object.entries(parameters));
+    mappedParameters.forEach((key, parameterName) => {
+      const parameterValue = mappedParameters.get(parameterName);
+      const escapedParameterValue = escapeParameters ? escape(parameterValue) : parameterValue;
+      // Pass the param value as a function to ignore special replacement patterns like $` and $'.
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#syntax
+      output = output.replace(new RegExp(`%{${parameterName}}`, 'g'), () => escapedParameterValue);
+    });
+  }
+  return output;
+}
+
+export { sprintf, translate, translatePlural };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "85.11.0",
+  "version": "85.12.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -167,8 +167,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.44.1",
-    "playwright-core": "^1.44.1",
+    "playwright": "^1.45.0",
+    "playwright-core": "^1.45.0",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/base/badge/badge.scss

@@ -1,5 +1,5 @@
 $badge-padding-horizontal: 0.75 * $grid-size;
-$badge-min-width: 2.5 * $grid-size;
+$badge-min-width: $gl-spacing-scale-3;
 
 @mixin gl-badge-variant(
   $variant,
@@ -74,7 +74,6 @@ $badge-min-width: 2.5 * $grid-size;
   @include gl-line-height-normal;
   gap: $gl-spacing-scale-2;
   padding: $gl-spacing-scale-1 $badge-padding-horizontal;
-  min-width: $badge-min-width;
 
   @media (forced-colors: active) {
     border: 1px solid;
@@ -86,6 +85,10 @@ $badge-min-width: 2.5 * $grid-size;
     @include gl-flex-shrink-0;
     top: auto;
   }
+
+  .gl-badge-content {
+    min-width: $badge-min-width;
+  }
 }
 
 /* Variants */

package/src/components/base/badge/badge.vue

@@ -83,7 +83,10 @@ export default {
       :class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
       :name="icon"
     />
-    <!-- @slot The badge content to display. -->
-    <slot></slot>
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
+    <span v-if="$slots.default" class="gl-badge-content">
+      <!-- @slot The badge content to display. -->
+      <slot></slot>
+    </span>
   </b-badge>
 </template>

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

@@ -26,7 +26,7 @@ import GlLoadingIcon from '../../loading_icon/loading_icon.vue';
 import GlIntersectionObserver from '../../../utilities/intersection_observer/intersection_observer.vue';
 import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type.vue';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
-import { translate } from '../../../../utils/i18n';
+import { translatePlural } from '../../../../utils/i18n';
 import GlListboxItem from './listbox_item.vue';
 import GlListboxSearchInput from './listbox_search_input.vue';
 import GlListboxGroup from './listbox_group.vue';
@@ -343,13 +343,11 @@ export default {
     srOnlyResultsLabel: {
       type: Function,
       required: false,
-      default: (count) => {
-        const fn = translate('GlCollapsibleListbox.srOnlyResultsLabel', 'Results count');
-        if (typeof fn === 'function') {
-          return fn(count);
-        }
-        return `${count} result${count > 1 ? 's' : ''}`;
-      },
+      default: translatePlural(
+        'GlCollapsibleListbox.srOnlyResultsLabel',
+        '%d result',
+        '%d results'
+      ),
     },
   },
   data() {

package/src/components/base/pagination/pagination.vue

@@ -5,6 +5,7 @@ import isFunction from 'lodash/isFunction';
 import range from 'lodash/range';
 import { GlBreakpointInstance, breakpoints } from '../../../utils/breakpoints';
 import { alignOptions, resizeDebounceTime } from '../../../utils/constants';
+import { sprintf, translate } from '../../../utils/i18n';
 import GlIcon from '../icon/icon.vue';
 import GlLink from '../link/link.vue';
 
@@ -145,9 +146,10 @@ export default {
      * aria-label getter for numbered page items, defaults to "Go to page <page_number>"
      */
     labelPage: {
-      type: Function,
+      // note: `Function` support is for legacy reasons
+      type: [Function, String],
       required: false,
-      default: (page) => `Go to page ${page}`,
+      default: translate('GlPagination.labelPage', 'Go to page %{page}'),
     },
     /**
      * Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"
@@ -263,10 +265,14 @@ export default {
       return this.pageIsDisabled(this.value + 1);
     },
     prevPageAriaLabel() {
-      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
+      return this.prevPageIsDisabled
+        ? false
+        : this.labelPrevPage || this.labelForPage(this.value - 1);
     },
     nextPageAriaLabel() {
-      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
+      return this.nextPageIsDisabled
+        ? false
+        : this.labelNextPage || this.labelForPage(this.value + 1);
     },
     prevPageHref() {
       if (this.prevPageIsDisabled) return false;
@@ -286,6 +292,13 @@ export default {
     window.removeEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
   },
   methods: {
+    labelForPage(page) {
+      if (isFunction(this.labelPage)) {
+        return this.labelPage(page);
+      }
+
+      return sprintf(this.labelPage, { page });
+    },
     setBreakpoint() {
       this.breakpoint = GlBreakpointInstance.getBreakpointSize();
     },
@@ -299,7 +312,7 @@ export default {
     },
     getPageItem(page, label = null) {
       const commonAttrs = {
-        'aria-label': label || this.labelPage(page),
+        'aria-label': label || this.labelForPage(page),
         href: '#',
         class: [],
       };

package/src/utils/i18n.js

@@ -1,5 +1,12 @@
+import escape from 'lodash/escape';
 import { i18n } from '../config';
 
+const defaultPluralHandler = (n, singleValue, pluralValue) => {
+  const value = n === 1 ? singleValue : pluralValue;
+
+  return value.replace(/%d/g, n);
+};
+
 /**
  * Mark a label as translatable.
  *
@@ -8,3 +15,48 @@ import { i18n } from '../config';
  * @returns {string} The translated label.
  */
 export const translate = (key, defaultValue) => i18n[key] ?? defaultValue;
+
+/**
+ * Marks a label as translatable and pluralized.
+ *
+ * @param {*} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
+ * @param {*} singularValue The singular value to be relied on if the consumer doesn't have translation capabilities.
+ * @param {*} pluralValue The plural value to be relied on if the consumer doesn't have translation capabilities.
+ * @returns {function} A function that takes a number and returns the pluralized translated label.
+ */
+export const translatePlural = (key, singularValue, pluralValue) => {
+  if (i18n[key]) {
+    return i18n[key];
+  }
+  return (x) => defaultPluralHandler(x, singularValue, pluralValue);
+};
+
+/**
+ * Very limited implementation of sprintf supporting only named parameters.
+ * Copied from the GitLab repo: https://gitlab.com/gitlab-org/gitlab/-/blob/0dff8b02accb3dccbf6cd31236834c37013aad59/app/assets/javascripts/locale/sprintf.js.
+ * @param {string} input - (translated) text with parameters (e.g. '%{num_users} users use us')
+ * @param {Object.<string, string|number>} [parameters] - object mapping parameter names to values (e.g. { num_users: 5 })
+ * @param {boolean} [escapeParameters=true] - whether parameter values should be escaped (see https://lodash.com/docs/4.17.15#escape)
+ * @returns {string} the text with parameters replaces (e.g. '5 users use us')
+ * @see https://ruby-doc.org/core-2.3.3/Kernel.html#method-i-sprintf
+ * @see https://gitlab.com/gitlab-org/gitlab-foss/issues/37992
+ */
+export function sprintf(input, parameters, escapeParameters = true) {
+  let output = input;
+
+  output = output.replace(/%+/g, '%');
+
+  if (parameters) {
+    const mappedParameters = new Map(Object.entries(parameters));
+
+    mappedParameters.forEach((key, parameterName) => {
+      const parameterValue = mappedParameters.get(parameterName);
+      const escapedParameterValue = escapeParameters ? escape(parameterValue) : parameterValue;
+      // Pass the param value as a function to ignore special replacement patterns like $` and $'.
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#syntax
+      output = output.replace(new RegExp(`%{${parameterName}}`, 'g'), () => escapedParameterValue);
+    });
+  }
+
+  return output;
+}

package/translations.js

@@ -2,10 +2,11 @@
 export default {
   'ClearIconButton.title': 'Clear',
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
-  'GlCollapsibleListbox.srOnlyResultsLabel': 'Results count',
+  'GlCollapsibleListbox.srOnlyResultsLabel': null,
   'GlKeysetPagination.navigationLabel': 'Pagination',
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',
+  'GlPagination.labelPage': 'Go to page %{page}',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',
   'GlSorting.sortAscending': 'Sort direction: ascending',