@gitlab/ui 67.3.2 → 67.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [67.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.3.3...v67.4.0) (2023-11-02)
+
+
+### Features
+
+* **GlColumnChart:** allow setting `stack` series property ([1ec54d9](https://gitlab.com/gitlab-org/gitlab-ui/commit/1ec54d9285bdda447575f31689ccc417389a6a96))
+
+## [67.3.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.3.2...v67.3.3) (2023-11-01)
+
+
+### Bug Fixes
+
+* **GlDuoChat:** 100% height for chat ([bfad98d](https://gitlab.com/gitlab-org/gitlab-ui/commit/bfad98d392b1db6dea00705178dbb3cb6b2d10fe))
+
 ## [67.3.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.3.1...v67.3.2) (2023-11-01)
 
 

package/README.md

@@ -168,8 +168,8 @@ You have two options to include those stylesheets:
 
 ## Releases
 
-Please see [Updating Gitlab UI Packages](doc/updating-gitlab-ui-packages.md) for information on how
-updated packages are included in Gitlab and Pajamas.
+See [Updating GitLab UI Packages](doc/updating-gitlab-ui-packages.md) for information on how the
+`@gitlab/ui` package is kept up to date in various projects.
 
 ## Contributing guide
 

package/dist/components/charts/column/column.js

@@ -94,12 +94,14 @@ var script = {
       return this.bars.map((_ref, index) => {
         let {
           name,
-          data
+          data,
+          stack
         } = _ref;
         const color = colorFromDefaultPalette(index);
         return generateBarSeries({
           name,
           data,
+          stack,
           color
         });
       });

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

@@ -215,11 +215,11 @@ 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 (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat gl-h-auto",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"experiment-help-page-url":_vm.experimentHelpPageUrl,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e(),_vm._v(" "),_c('section',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"experiment-help-page-url":_vm.experimentHelpPageUrl,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e(),_vm._v(" "),_c('section',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
           {
             'gl-h-full': !_vm.hasMessages,
             'gl-h-auto': _vm.hasMessages,
-          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[_c('gl-form-textarea',{staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.$options.i18n.CHAT_PROMPT_PLACEHOLDER,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
+          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[_c('gl-form-textarea',{staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.$options.i18n.CHAT_PROMPT_PLACEHOLDER,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 01:30:41 GMT
+ * Generated on Thu, 02 Nov 2023 13:13:04 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 01:30:41 GMT
+ * Generated on Thu, 02 Nov 2023 13:13:04 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 01:30:41 GMT
+ * Generated on Thu, 02 Nov 2023 13:13:04 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 01:30:41 GMT
+ * Generated on Thu, 02 Nov 2023 13:13:04 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 01 Nov 2023 01:30:41 GMT
+// Generated on Thu, 02 Nov 2023 13:13:04 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 01 Nov 2023 01:30:41 GMT
+// Generated on Thu, 02 Nov 2023 13:13:04 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "67.3.2",
+  "version": "67.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,22 +94,22 @@
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.68.0",
+    "@gitlab/svgs": "3.69.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.5.1",
-    "@storybook/addon-docs": "7.5.1",
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addon-storyshots": "7.5.1",
-    "@storybook/addon-storyshots-puppeteer": "7.5.1",
-    "@storybook/addon-viewport": "7.5.1",
-    "@storybook/builder-webpack5": "7.5.1",
-    "@storybook/theming": "7.5.1",
-    "@storybook/vue": "7.5.1",
-    "@storybook/vue-webpack5": "7.5.1",
-    "@storybook/vue3": "7.5.1",
-    "@storybook/vue3-webpack5": "7.5.1",
+    "@storybook/addon-a11y": "7.5.2",
+    "@storybook/addon-docs": "7.5.2",
+    "@storybook/addon-essentials": "7.5.2",
+    "@storybook/addon-storyshots": "7.5.2",
+    "@storybook/addon-storyshots-puppeteer": "7.5.2",
+    "@storybook/addon-viewport": "7.5.2",
+    "@storybook/builder-webpack5": "7.5.2",
+    "@storybook/theming": "7.5.2",
+    "@storybook/vue": "7.5.2",
+    "@storybook/vue-webpack5": "7.5.2",
+    "@storybook/vue3": "7.5.2",
+    "@storybook/vue3-webpack5": "7.5.2",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.5.1",
+    "storybook": "7.5.2",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/charts/column/column.vue

@@ -106,9 +106,9 @@ export default {
       return Boolean(this.secondaryData.length);
     },
     barSeries() {
-      return this.bars.map(({ name, data }, index) => {
+      return this.bars.map(({ name, data, stack }, index) => {
         const color = colorFromDefaultPalette(index);
-        return generateBarSeries({ name, data, color });
+        return generateBarSeries({ name, data, stack, color });
       });
     },
     lineSeries() {

package/src/components/charts/column/column_chart.spec.js

@@ -5,6 +5,7 @@ import {
   mockDefaultLineData,
   mockDefaultBarData,
   mockSecondaryData,
+  mockDefaultStackedBarData,
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
 import ColumnChart from './column.vue';
@@ -106,6 +107,24 @@ describe('column chart component', () => {
     });
   });
 
+  describe('with multiple series data provided', () => {
+    it('should pass through custom stack series property', () => {
+      factory({
+        ...defaultChartProps,
+        bars: mockDefaultStackedBarData.map((series) => ({
+          ...series,
+          stack: 'some-custom-stack',
+        })),
+      });
+
+      const hasExpectedStackProperty = findChart()
+        .props('options')
+        .series.every((series) => series.stack === 'some-custom-stack');
+
+      expect(hasExpectedStackProperty).toBe(true);
+    });
+  });
+
   describe('tooltip', () => {
     it('displays the generic tooltip content', async () => {
       const params = {

package/src/components/charts/line/line.md

@@ -2,6 +2,6 @@ This is a basic line chart.
 
 ### Implementation Details
 
-This component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.
+This component wraps the GitLab UI `chart` component, which in turn wraps the ECharts component.
 
 See the [chart](./?path=/story/charts-chart--default) component for more info.

package/src/components/charts/sparkline/sparkline.md

@@ -3,6 +3,6 @@ This is a basic sparkline chart.
 
 ### Implementation Details
 
-This component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.
+This component wraps the GitLab UI `chart` component, which in turn wraps the ECharts component.
 
 See the [chart](./?path=/story/charts-chart--default) component for more info.

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -225,7 +225,7 @@ export default {
     v-if="!isHidden"
     id="chat-component"
     ref="drawer"
-    class="markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat gl-h-auto"
+    class="markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
     role="complementary"
     data-testid="chat-component"
     @scroll="handleScrollingTrottled"
@@ -322,7 +322,7 @@ export default {
           </template>
         </transition-group>
         <transition name="loader">
-          <gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" />
+          <gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" class="gl-px-0!" />
         </transition>
       </section>
     </div>