@gitlab/ui 85.10.0 → 85.12.0

package/src/tokens/build/scss/_tokens.dark.scss

@@ -532,6 +532,7 @@ $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
+$gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.

package/src/tokens/build/scss/_tokens.scss

@@ -532,6 +532,7 @@ $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
+$gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -74,6 +74,7 @@ $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-background-color-overlay: var(--gl-background-color-overlay);
 $gl-border-color-default: var(--gl-border-color-default);
 $gl-border-color-subtle: var(--gl-border-color-subtle);
 $gl-border-color-strong: var(--gl-border-color-strong);

package/src/tokens/build/tailwind/tokens.cjs

@@ -223,6 +223,8 @@ const backgroundColors = {
     'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+  overlay:
+    'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24)))',
 };
 const borderColors = {
   default:

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',