@gitlab/ui 92.5.0 → 93.1.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [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)
+
+
+### Features
+
+* **CloseButton:** Replace close btn class with util class ([0cf9a37](https://gitlab.com/gitlab-org/gitlab-ui/commit/0cf9a373c7caa1ff2d517f2eac5b7c1fbc711322))
+
+
+### BREAKING CHANGES
+
+* **CloseButton:** Remove CSS Class .gl-close-btn-color-inherit
+
+This CSS Class was applying mix-blend styles. This style was creating
+an unwanted design on some background colors. Also, it makes it harder
+to use with design tokens. This CSS class is now replaced by using
+the Util CSS class !text-color-inherit.
+
 # [92.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.4.0...v92.5.0) (2024-09-17)
 
 

package/dist/components/base/broadcast_message/broadcast_message.js

@@ -78,7 +78,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-broadcast-message",class:(_vm.theme + " " + _vm.type)},[_c('div',{staticClass:"gl-broadcast-message-content"},[_c('div',{staticClass:"gl-broadcast-message-icon"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-broadcast-message-text"},[_c('h2',{staticClass:"gl-sr-only"},[_vm._v("Admin message")]),_vm._v(" "),_vm._t("default")],2)]),_vm._v(" "),(_vm.showDismissButton)?_c('close-button',{ref:"dismiss",staticClass:"gl-close-btn-color-inherit gl-broadcast-message-dismiss",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-broadcast-message",class:(_vm.theme + " " + _vm.type)},[_c('div',{staticClass:"gl-broadcast-message-content"},[_c('div',{staticClass:"gl-broadcast-message-icon"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-broadcast-message-text"},[_c('h2',{staticClass:"gl-sr-only"},[_vm._v("Admin message")]),_vm._v(" "),_vm._t("default")],2)]),_vm._v(" "),(_vm.showDismissButton)?_c('close-button',{ref:"dismiss",staticClass:"gl-broadcast-message-dismiss",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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/toast/toast.js

@@ -13,7 +13,7 @@ const DEFAULT_OPTIONS = {
 let toastsCount = 0;
 function renderTitle(h, toast, options) {
   const nodes = [h(CloseButton, {
-    class: ['gl-toast-close-button', 'gl-close-btn-color-inherit'],
+    class: ['gl-toast-close-button'],
     on: {
       click: toast.hide
     }

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

@@ -59,7 +59,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._g({class:['gl-token', _vm.variantClass, _vm.viewOnlyClass]},_vm.$listeners),[_c('span',{staticClass:"gl-token-content"},[_vm._t("default"),_vm._v(" "),(!_vm.viewOnly)?_c('close-button',{staticClass:"gl-token-close gl-close-btn-color-inherit",attrs:{"label":_vm.removeLabel},on:{"click":_vm.close}}):_vm._e()],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._g({class:['gl-token', _vm.variantClass, _vm.viewOnlyClass]},_vm.$listeners),[_c('span',{staticClass:"gl-token-content"},[_vm._t("default"),_vm._v(" "),(!_vm.viewOnly)?_c('close-button',{staticClass:"gl-token-close",attrs:{"label":_vm.removeLabel},on:{"click":_vm.close}}):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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;