@gitlab/ui 66.25.0 → 66.26.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Tue, 10 Oct 2023 19:49:13 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Tue, 10 Oct 2023 19:49:14 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Tue, 10 Oct 2023 19:49:14 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Tue, 10 Oct 2023 19:49:13 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Oct 2023 10:55:11 GMT
+// Generated on Tue, 10 Oct 2023 19:49:14 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Oct 2023 10:55:11 GMT
+// Generated on Tue, 10 Oct 2023 19:49:14 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/charts/constants.js

@@ -65,7 +65,7 @@ const CHART_TYPE_BAR = 'bar';
 const CHART_TYPE_LINE = 'line';
 
 // Constants for height "auto"
-const HEIGHT_AUTO_CLASSES = 'gl-display-flex gl-flex-direction-column gl-h-full';
+const HEIGHT_AUTO_CLASSES = 'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
 const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';
 
 export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, ANNOTATION_TOOLTIP_TOP_OFFSET, CHART_TYPE_BAR, CHART_TYPE_LINE, DATA_TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES, HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, arrowSymbol };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.25.0",
+  "version": "66.26.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -98,18 +98,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.4.5",
-    "@storybook/addon-docs": "7.4.5",
-    "@storybook/addon-essentials": "7.4.5",
-    "@storybook/addon-storyshots": "7.4.5",
-    "@storybook/addon-storyshots-puppeteer": "7.4.5",
-    "@storybook/addon-viewport": "7.4.5",
-    "@storybook/builder-webpack5": "7.4.5",
-    "@storybook/theming": "7.4.5",
-    "@storybook/vue": "7.4.5",
-    "@storybook/vue-webpack5": "7.4.5",
-    "@storybook/vue3": "7.4.5",
-    "@storybook/vue3-webpack5": "7.4.5",
+    "@storybook/addon-a11y": "7.4.6",
+    "@storybook/addon-docs": "7.4.6",
+    "@storybook/addon-essentials": "7.4.6",
+    "@storybook/addon-storyshots": "7.4.6",
+    "@storybook/addon-storyshots-puppeteer": "7.4.6",
+    "@storybook/addon-viewport": "7.4.6",
+    "@storybook/builder-webpack5": "7.4.6",
+    "@storybook/theming": "7.4.6",
+    "@storybook/vue": "7.4.6",
+    "@storybook/vue-webpack5": "7.4.6",
+    "@storybook/vue3": "7.4.6",
+    "@storybook/vue3-webpack5": "7.4.6",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -126,7 +126,7 @@
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.50.0",
+    "eslint": "8.51.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.14",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.4.5",
+    "storybook": "7.4.6",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/charts/legend/legend.scss

@@ -1,8 +1,37 @@
+// shorter height by half a line, so table body is cut off,
+// suggesting there's more to scroll
+$legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
+
+.gl-legend {
+  @include gl-relative;
+}
+
+.gl-chart-h-auto {
+  .gl-legend-inline {
+      // match the height of gl-legend-tabular (header + body)
+      max-height: $gl-line-height-24 + $legend-body-h;
+      @include gl-overflow-auto;
+  }
+}
+
+.gl-legend-tabular,
+.gl-chart-h-auto .gl-legend-inline {
+  &::after {
+    background-image: linear-gradient(to bottom, $transparent-rgba, $white);
+    @include gl-bottom-0;
+    @include gl-content-empty;
+    @include gl-display-block;
+    @include gl-h-4;
+    @include gl-absolute;
+    @include gl-w-full;
+  }
+}
+
 .gl-legend-inline {
-  @include gl-display-flex;
-  @include gl-flex-wrap;
-  @include gl-flex-shrink-0;
-  @include gl-text-gray-900;
+    @include gl-display-flex;
+    @include gl-flex-wrap;
+    @include gl-flex-shrink-0;
+    @include gl-text-gray-900;
 
   .gl-legend-inline-series {
     @include gl-display-flex;
@@ -23,18 +52,6 @@
 }
 
 .gl-legend-tabular {
-  @include gl-relative;
-
-  &::after {
-    background-image: linear-gradient(to bottom, $transparent-rgba, $white);
-    @include gl-bottom-0;
-    @include gl-content-empty;
-    @include gl-display-block;
-    @include gl-h-4;
-    @include gl-absolute;
-    @include gl-w-full;
-  }
-
   .gl-legend-tabular-header {
     @include gl-display-flex;
     @include gl-justify-content-end;
@@ -56,9 +73,7 @@
   }
 
   .gl-legend-tabular-body {
-    // shorter height by half a line, so table body is cut off,
-    // suggesting there's more to scroll
-    height: $gl-spacing-scale-13 - $gl-spacing-scale-4;
+    height: $legend-body-h;
     @include gl-overflow-y-auto;
 
     > *:nth-child(odd) {

package/src/components/charts/legend/legend.stories.js

@@ -1,5 +1,5 @@
 import { GlChart, GlChartLegend } from '../../../charts';
-import { LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
+import { HEIGHT_AUTO_CLASSES, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { generateSeriesData } from '../../../utils/charts/story_config';
 import {
   SERIES_NAME_SHORT,
@@ -43,13 +43,14 @@ const generateSeriesInfo = (amount, nameType) => {
   }));
 };
 
-const generateTemplate = (type) => {
+const generateTemplate = (type, wrapperAttrs = {}, chartAttrs = {}) => {
   const layoutTypeAttribute =
     type === LEGEND_LAYOUT_TABLE ? `:layout="'${LEGEND_LAYOUT_TABLE}'"` : '';
 
-  return `<div>
+  return `<div v-bind='${JSON.stringify(wrapperAttrs)}'>
     <gl-chart
       :options="$options.options"
+      v-bind='${JSON.stringify(chartAttrs)}'
       @created="onCreated"
     />
     <gl-chart-legend
@@ -93,7 +94,7 @@ const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
     ...baseStoryOptions,
     options: generateOptions(seriesLength, seriesNameType),
     seriesInfo: generateSeriesInfo(seriesLength, seriesNameType),
-    template: legendLayoutType ? generateTemplate(legendLayoutType) : generateTemplate(),
+    template: generateTemplate(legendLayoutType),
   };
 };
 
@@ -110,6 +111,24 @@ export const DefaultWithLongSeriesNames = () => getStoryOptions(10, SERIES_NAME_
 export const DefaultWithLongSeriesNamesAndNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES);
 
+export const DefaultWithOverflowingFixedContainerHeight = () => {
+  const storyOptions = getStoryOptions(50, SERIES_NAME_LONG_WITHOUT_SPACES, null);
+
+  storyOptions.template = generateTemplate(
+    null,
+    {
+      class: HEIGHT_AUTO_CLASSES, // line, area, heatmap etc charts all have these classes on the wrapper element in auto height mode
+      style: 'height: 400px; overflow: hidden; outline: 1px solid red;', // Simulate being inside a dashboard panel with fixed height and no overflow
+    },
+    {
+      height: 'auto',
+      class: 'gl-flex-grow-1', // line, area, heatmap etc charts all have gl-flex-grow-1 on the <gl-chart> element in auto height mode
+    }
+  );
+
+  return storyOptions;
+};
+
 export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
 export const WithTabularLayoutAndDisabledLegendItem = () => {
   const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
@@ -123,6 +142,24 @@ export const WithTabularLayoutAndLongSeriesNames = () =>
 export const WithTabularLayoutAndLongSeriesNamesWithNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
 
+export const WithTabularOverflowingFixedContainerHeight = () => {
+  const storyOptions = getStoryOptions(50, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
+
+  storyOptions.template = generateTemplate(
+    LEGEND_LAYOUT_TABLE,
+    {
+      class: HEIGHT_AUTO_CLASSES, // line, area, heatmap etc charts all have these classes on the wrapper element in auto height mode
+      style: 'height: 400px; overflow: hidden; outline: 1px solid red;', // Simulate being inside a dashboard panel with fixed height and no overflow
+    },
+    {
+      height: 'auto',
+      class: 'gl-flex-grow-1', // line, area, heatmap etc charts all have gl-flex-grow-1 on the <gl-chart> element in auto height mode
+    }
+  );
+
+  return storyOptions;
+};
+
 export default {
   title: 'charts/chart-legend',
   component: GlChartLegend,

package/src/components/charts/legend/legend.vue

@@ -172,7 +172,7 @@ export default {
 </script>
 
 <template>
-  <div data-testid="gl-chart-legend">
+  <div class="gl-legend" data-testid="gl-chart-legend">
     <template v-if="layout === $options.legendLayoutTypes.LEGEND_LAYOUT_INLINE">
       <div class="gl-legend-inline">
         <div

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.md

@@ -0,0 +1,60 @@
+The component represents a Duo Chat message.
+
+## Usage
+
+```html
+<gl-duo-chat-message :message="message" />
+```
+
+## Pretty rendering message content
+
+There are two ways of pretty-rendering a message's content in the component:
+
+- dependency injection, providing functions to convert raw markdown into HTML,
+- sending `contentHtml` prop as part of the `message` property,
+
+### Injecting functions
+
+To inject the `renderMarkdown` function, which converts raw markdown into proper HTML,
+the component relies on [dependency injection, using `provide`/`inject` options](https://docs.gitlab.com/ee/development/fe_guide/vue.html#provide-and-inject).
+The component expects a reference to a function, converting raw markdown into HTML
+to be _provided_ by a consumer.
+[The example implementation](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/notes/utils.js#L22-24)
+
+### `contentHtml`
+
+This approach is self-explanatory and is used when raw markdown can be converted to HTML on the server
+before the message is returned to the client. Here's an example of a message's structure where markdown
+has been generated on the server and sent down in the `contentHtml` property:
+
+```javascript
+{
+  content: '_Duo Chat message_ coming from AI',
+  contentHtml: '<p><em>Duo Chat message</em> coming from AI</p>',
+  role: 'assistant',
+  ...
+}
+```
+
+## GitLab Flavored Markdown (GLFM)
+
+In most cases, it's not enough to just convert raw markdown into HTML. Messages also require the
+markup to support [GitLab Flavored Markdown (GLFM)](https://docs.gitlab.com/ee/user/markdown.html).
+For this, the component relies on another dependency injection (in addition to `renderMarkdown`)
+expecting a reference to the `renderGFM` function, decorating an HTML element with GLFM to be
+_provided_ by a consumer.
+[The example implementation](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/behaviors/markdown/render_gfm.js#L19-52)
+
+## The underlying use of the `GlDuoUserFeedback` component
+
+The component integrates the [`GlDuoUserFeedback`](/story/experimental-duo-user-feedback--default)
+component to track user feedback on the AI-generated responses. Note that the `GlDuoChatMessage`
+component renders the default state of `GlDuoUserFeedback` component, not allowing to override
+the slots in that underlying component.
+
+### Tracking User Feedback for a response
+
+The component emits the `track-feedback` event, a proxy of the `feedback` event emitted by
+the `GlDuoUserFeedback` component. Please refer to
+[the documentation on that component](/story/experimental-duo-user-feedback--docs#listening-to-the-feedback-form-submission)
+when processing feedback from users.

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -0,0 +1,18 @@
+.duo-chat-message {
+  max-width: 90%;
+
+  code {
+    @include gl-bg-gray-100;
+  }
+
+  pre code {
+    @include gl-font-sm;
+    @include gl-line-height-1;
+    @include gl-bg-transparent;
+    white-space: inherit;
+  }
+
+  p:last-of-type {
+    @include gl-mb-0;
+  }
+}