@gitlab/ui 79.1.1 → 79.3.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [79.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.2.0...v79.3.0) (2024-04-25)
+
+
+### Features
+
+* **DesignTokens:** add new text colors and deprecate pilot text colors ([818f109](https://gitlab.com/gitlab-org/gitlab-ui/commit/818f109b4151319a7d51025a8eae9bcf2a6e37e4))
+
+# [79.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.1.1...v79.2.0) (2024-04-24)
+
+
+### Bug Fixes
+
+* **dropdowns:** ignore vertical boundaries ([3fec816](https://gitlab.com/gitlab-org/gitlab-ui/commit/3fec81641a0f625810a89a05129737767792df13))
+
+
+### Features
+
+* **GlDuoChatMessage:** output errors ([f4c804a](https://gitlab.com/gitlab-org/gitlab-ui/commit/f4c804abc033a7b23823366d2b1fa1e065abf056))
+
 ## [79.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.1.0...v79.1.1) (2024-04-24)
 
 

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

@@ -1,8 +1,8 @@
 import uniqueId from 'lodash/uniqueId';
 import { offset, autoPlacement, shift, size, autoUpdate, computePosition } from '@floating-ui/dom';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
-import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
-import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { logWarning, getHorizontalBoundingClientRect, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
 import { OutsideDirective } from '../../../../directives/outside/outside';
@@ -250,10 +250,13 @@ var script = {
       return {
         placement,
         strategy: this.positioningStrategy,
-        middleware: [offset(this.offset), autoPlacement({
-          alignment,
-          boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
-          allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
+        middleware: [offset(this.offset), autoPlacement(() => {
+          const autoHorizontalBoundary = getHorizontalBoundingClientRect(this.$el.closest(GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR));
+          return {
+            alignment,
+            boundary: autoHorizontalBoundary || 'clippingAncestors',
+            allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
+          };
         }), shift(), size({
           apply: _ref => {
             var _this$nonScrollableCo;

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

@@ -1,5 +1,5 @@
 // base dropdown events
-const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
+const GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR = 'main';
 const GL_DROPDOWN_SHOWN = 'shown';
 const GL_DROPDOWN_HIDDEN = 'hidden';
 const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
@@ -19,4 +19,4 @@ const POSITION_ABSOLUTE = 'absolute';
 const POSITION_FIXED = 'fixed';
 const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };

package/dist/components/base/pagination/pagination.js

@@ -358,13 +358,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination text-nowrap",attrs:{"aria-label":"Pagination"}},[_c('ul',{staticClass:"pagination",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
         disabled: _vm.prevPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
-      },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+      },attrs:{"data-testid":"page-item","aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"data-testid":"page-link","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
         disabled: item.disabled,
         'flex-fill': _vm.isFillAlign,
-      }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
+      },attrs:{"data-testid":"page-item"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"data-testid":"page-link","size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
         disabled: _vm.nextPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
-      },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
+      },attrs:{"data-testid":"page-item","aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"data-testid":"page-link","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,3 +1,5 @@
+import GlIcon from '../../../../../base/icon/icon';
+import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 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';
@@ -16,11 +18,13 @@ const i18n = {
     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.'
+    BETTER_RESPONSE: 'How the response might better meet your needs.',
+    MESSAGE_ERROR: 'Error sending the message'
   }
 };
 var script = {
   name: 'GlDuoChatMessage',
+  i18n,
   safeHtmlConfigExtension: {
     ADD_TAGS: ['copy-code']
   },
@@ -28,10 +32,12 @@ var script = {
     DocumentationSources,
     GlDuoUserFeedback,
     GlFormGroup,
-    GlFormTextarea
+    GlFormTextarea,
+    GlIcon
   },
   directives: {
-    SafeHtml: SafeHtmlDirective
+    SafeHtml: SafeHtmlDirective,
+    GlTooltip: GlTooltipDirective
   },
   provide() {
     return {
@@ -92,7 +98,6 @@ var script = {
       return (_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback;
     },
     defaultContent() {
-      if (this.message.errors.length > 0) return this.renderMarkdown(this.message.errors.join('; '));
       if (this.message.contentHtml) {
         return this.message.contentHtml;
       }
@@ -103,6 +108,10 @@ var script = {
         return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
       }
       return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
+    },
+    error() {
+      var _this$message, _this$message$errors;
+      return Boolean((_this$message = this.message) === null || _this$message === void 0 ? void 0 : (_this$message$errors = _this$message.errors) === null || _this$message$errors === void 0 ? void 0 : _this$message$errors.length) && this.message.errors.join('; ');
     }
   },
   beforeCreate() {
@@ -142,7 +151,7 @@ var script = {
       }
     },
     hydrateContentWithGFM() {
-      if (!this.isChunk) {
+      if (!this.isChunk && this.$refs.content) {
         this.$nextTick(this.renderGFM(this.$refs.content));
       }
     },
@@ -160,8 +169,7 @@ var script = {
         this.stopWatchingMessage();
       }
     }
-  },
-  i18n
+  }
 };
 
 /* script */
@@ -172,7 +180,8 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': _vm.isUserMessage,
     'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
       _vm.isAssistantMessage,
-  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)})],1)]:_vm._e()],2)};
+    'gl-bg-red-50 gl-border-none!': _vm.error,
+  }},[(_vm.error)?_c('gl-icon',{staticClass:"gl-text-red-600 gl-border gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.error)?_c('div',{ref:"error-message",staticClass:"error-message"},[_vm._v(_vm._s(_vm.error))]):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)})],1)]:_vm._e()],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */