@gitlab/ui 93.0.0 → 93.2.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [93.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v93.1.0...v93.2.0) (2024-09-19)
+
+
+### Features
+
+* **DesignTokens:** add text warning design tokens ([e00b998](https://gitlab.com/gitlab-org/gitlab-ui/commit/e00b998524c1b974f49994059256dd340748ab20))
+
+# [93.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v93.0.0...v93.1.0) (2024-09-18)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** Add spacing after loading icon ([82eef91](https://gitlab.com/gitlab-org/gitlab-ui/commit/82eef91560f54092dfbc4fcd67e22324c59603fa))
+
+
+### Features
+
+* **i18n:** Setup translation for Duo Chat component and all sub-components ([0b766ef](https://gitlab.com/gitlab-org/gitlab-ui/commit/0b766ef6ec405ca2c13f9d3ead8d546a16e99f5d))
+
 # [93.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.5.0...v93.0.0) (2024-09-18)
 
 

package/dist/components/base/alert/alert.js

@@ -144,6 +144,7 @@ var script = {
       }, []);
     },
     variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return `gl-alert-${this.variant}`;
     }
   },

package/dist/components/base/avatar/avatar.js

@@ -67,13 +67,18 @@ var script = {
   computed: {
     sizeClasses() {
       if (isNumber(this.size)) {
+        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
         return `gl-avatar-s${this.size}`;
       }
       const {
         default: defaultSize,
         ...nonDefaultSizes
       } = this.size;
-      return [`gl-avatar-s${defaultSize || avatarSizeOptions[1]}`, ...Object.entries(nonDefaultSizes).map(_ref => {
+      return [
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`, ...Object.entries(nonDefaultSizes).map(
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      _ref => {
         let [breakpoint, size] = _ref;
         return `gl-${breakpoint}-avatar-s${size}`;
       })];
@@ -87,6 +92,7 @@ var script = {
        * Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
        */
       const type = this.entityId % IDENTICON_BG_COUNT + 1;
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return `gl-avatar-identicon-bg${type}`;
     },
     identiconText() {

package/dist/components/base/datepicker/datepicker.js

@@ -219,7 +219,9 @@ var script = {
       return null;
     },
     datepickerClasses() {
-      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.computedWidth}`];
+      return ['gl-datepicker', 'd-inline-block', 'gl-w-full',
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      `gl-form-input-${this.computedWidth}`];
     },
     computedWidth() {
       if (this.width) {

package/dist/components/base/drawer/drawer.js

@@ -60,6 +60,7 @@ var script = {
       return Boolean(this.$slots.footer);
     },
     variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return `gl-drawer-${this.variant}`;
     }
   },

package/dist/components/base/form/form_fields/form_fields.js

@@ -3,6 +3,7 @@ import mapValues from 'lodash/mapValues';
 import uniqueId from 'lodash/uniqueId';
 import GlFormGroup from '../form_group/form_group';
 import GlFormInput from '../form_input/form_input';
+import { setObjectProperty } from '../../../../utils/set_utils';
 import GlFormFieldValidator from './form_field_validator';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -138,7 +139,7 @@ var script = {
   },
   methods: {
     setFieldDirty(fieldName) {
-      this.$set(this.fieldDirtyStatuses, fieldName, true);
+      this.fieldDirtyStatuses = setObjectProperty(this.fieldDirtyStatuses, fieldName, true);
     },
     setAllFieldsDirty() {
       this.fieldNames.forEach(fieldName => this.setFieldDirty(fieldName));
@@ -160,7 +161,7 @@ var script = {
       return val;
     },
     onFieldValidationUpdate(fieldName, invalidFeedback) {
-      this.$set(this.fieldValidations, fieldName, invalidFeedback);
+      this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
     },
     onFieldBlur(fieldName) {
       this.setFieldDirty(fieldName);

package/dist/components/base/form/form_input/form_input.js

@@ -39,11 +39,17 @@ var script = {
           default: defaultWidth,
           ...nonDefaultWidths
         } = this.width;
-        return [...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(_ref => {
+        return [
+        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        ...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(
+        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        _ref => {
           let [breakpoint, width] = _ref;
           return `gl-${breakpoint}-form-input-${width}`;
         })];
       }
+
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return [`gl-form-input-${this.width}`];
     },
     listeners() {

package/dist/components/base/form/form_select/form_select.js

@@ -33,11 +33,17 @@ var script = {
           default: defaultWidth,
           ...nonDefaultWidths
         } = this.width;
-        return [...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(_ref => {
+        return [
+        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(
+        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        _ref => {
           let [breakpoint, width] = _ref;
           return `gl-${breakpoint}-form-select-${width}`;
         })];
       }
+
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return [`gl-form-select-${this.width}`];
     }
   }

package/dist/components/base/toast/toast.js

@@ -31,6 +31,7 @@ function renderTitle(h, toast, options) {
 }
 function showToast(message) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
   const id = `gl-toast-${toastsCount}`;
   toastsCount += 1;
   const hide = () => {

package/dist/components/base/token/token.js

@@ -35,6 +35,7 @@ var script = {
   },
   computed: {
     variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return `gl-token-${this.variant}-variant`;
     },
     viewOnlyClass() {

package/dist/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -1,8 +1,9 @@
 import GlDuoChatMessage from '../duo_chat_message/duo_chat_message';
+import { translate } from '../../../../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
-  CONVERSATION_NEW_CHAT: 'New chat'
+  CONVERSATION_NEW_CHAT: translate('GlDuoChatConversation.newChat', 'New chat')
 };
 const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
 

package/dist/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.js

@@ -1,11 +1,12 @@
+import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
-  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
-  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
-  GITLAB_DUO: 'GitLab Duo'
+  LOADER_LOADING_MESSAGE: translate('GlDuoChatLoader.loaderLoadingMessage', '%{tool} is %{transition} an answer'),
+  LOADER_LOADING_TRANSITIONS: [translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'), translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'), translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'), translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing')],
+  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', 'GitLab Duo')
 };
 var script = {
   name: 'GlDuoChatLoader',

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -6,8 +6,8 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import GlFormGroup from '../../../../../base/form/form_group/form_group';
 import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
-import { translatePlural, sprintf } from '../../../../../../utils/i18n';
 import { SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED, MESSAGE_MODEL_ROLES } from '../../constants';
+import { translate, translatePlural, sprintf } from '../../../../../../utils/i18n';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
@@ -17,13 +17,13 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
   MODAL: {
-    TITLE: 'Give feedback on GitLab Duo Chat',
-    ALERT_TEXT: 'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
-    DID_WHAT: 'What were you doing?',
-    INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
-    IMPROVE_WHAT: 'How could the response be improved?',
-    BETTER_RESPONSE: 'How the response might better meet your needs.',
-    MESSAGE_ERROR: 'Error sending the message'
+    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+    ALERT_TEXT: translate('GlDuoChatMessage.modalAlertText', 'GitLab team members cannot view your conversation. Please be as descriptive as possible.'),
+    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
+    INTERACTION: translate('GlDuoChatMessage.modalInteraction', 'The situation in which you interacted with GitLab Duo Chat.'),
+    IMPROVE_WHAT: translate('GlDuoChatMessage.modalImproveWhat', 'How could the response be improved?'),
+    BETTER_RESPONSE: translate('GlDuoChatMessage.modalBetterResponse', 'How the response might better meet your needs.'),
+    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message')
   }
 };
 var script = {

package/dist/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.js

@@ -1,11 +1,14 @@
+import { translatePlural } from '../../../../../../utils/i18n';
 import GlIcon from '../../../../../base/icon/icon';
 import GlLink from '../../../../../base/link/link';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
-  MESSAGE_SOURCE: 'Source',
-  MESSAGE_SOURCES: 'Sources'
+  MESSAGE_SOURCE: function () {
+    let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count);
+  }
 };
 var script = {
   name: 'GlDuoChatMessageSources',
@@ -24,7 +27,7 @@ var script = {
   },
   computed: {
     sourceLabel() {
-      return this.sources.length > 1 ? i18n.MESSAGE_SOURCES : i18n.MESSAGE_SOURCES;
+      return i18n.MESSAGE_SOURCE(this.sources.length);
     }
   },
   methods: {
@@ -59,7 +62,7 @@ var script = {
           return `${date} / ${author}`;
         }
       }
-      return i18n.MESSAGE_SOURCE;
+      return this.sourceLabel;
     }
   }
 };

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -11,6 +11,7 @@ import GlForm from '../../../base/form/form';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge';
 import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
+import { translate } from '../../../../utils/i18n';
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation';
@@ -19,18 +20,18 @@ import { INCLUDE_SLASH_COMMAND } from './mock_data';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
-  CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
-  CHAT_CLOSE_LABEL: 'Close the Code Explanation',
-  CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
-  CHAT_EMPTY_STATE_TITLE: 'Ask a question',
-  CHAT_EMPTY_STATE_DESC: 'GitLab Duo Chat is your AI-powered assistant.',
-  CHAT_EMPTY_STATE_SECONDARY_DESC: 'Responses may be inaccurate. Verify before use.',
-  CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
-  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
-  CHAT_SUBMIT_LABEL: 'Send chat message.',
-  CHAT_CANCEL_LABEL: 'Cancel',
-  CHAT_LEGAL_DISCLAIMER: "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
-  CHAT_DEFAULT_PREDEFINED_PROMPTS: ['How do I change my password in GitLab?', 'How do I fork a project?', 'How do I clone a repository?', 'How do I create a template?']
+  CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
+  CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
+  CHAT_LEGAL_GENERATED_BY_AI: translate('GlDuoChat.chatLegalGeneratedByAI', 'Responses generated by AI'),
+  CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
+  CHAT_EMPTY_STATE_DESC: translate('GlDuoChat.chatEmptyStateDesc', 'GitLab Duo Chat is your AI-powered assistant.'),
+  CHAT_EMPTY_STATE_SECONDARY_DESC: translate('GlDuoChat.chatEmptyStateSecondaryDesc', 'Responses may be inaccurate. Verify before use.'),
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate('GlDuoChat.chatPromptPlaceholderDefault', 'GitLab Duo Chat'),
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate('GlDuoChat.chatPromptPlaceholderWithCommands', 'Type "/" for slash commands'),
+  CHAT_SUBMIT_LABEL: translate('GlDuoChat.chatSubmitLabel', 'Send chat message.'),
+  CHAT_CANCEL_LABEL: translate('GlDuoChat.chatCancelLabel', 'Cancel'),
+  CHAT_LEGAL_DISCLAIMER: translate('GlDuoChat.chatLegalDisclaimer', "May provide inappropriate responses not representative of GitLab's views. Do not input personal data."),
+  CHAT_DEFAULT_PREDEFINED_PROMPTS: [translate('GlDuoChat.chatDefaultPredefinedPromptsChangePassword', 'How do I change my password in GitLab?'), translate('GlDuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'), translate('GlDuoChat.chatDefaultPredefinedPromptsCloneRepository', 'How do I clone a repository?'), translate('GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate', 'How do I create a template?')]
 };
 const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
 const isSlashCommand = command => Boolean(command) && (command === null || command === void 0 ? void 0 : command.name) && command.description;