@gitlab/ui 71.9.1 → 71.11.0

package/src/components/charts/line/line.spec.js

@@ -2,7 +2,11 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import {
+  createMockChartInstance,
+  ChartTooltipStub,
+  chartTooltipStubData,
+} from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 
 import Chart from '../chart/chart.vue';
@@ -27,10 +31,13 @@ describe('line component', () => {
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createShallowWrapper = (props = {}, mountOptions = {}) => {
+  const createShallowWrapper = ({ props = {}, ...options } = {}) => {
     wrapper = shallowMount(LineChart, {
       propsData: { option, data: [], ...props },
-      ...mountOptions,
+      stubs: {
+        'chart-tooltip': ChartTooltipStub,
+      },
+      ...options,
     });
     emitChartCreated();
   };
@@ -59,12 +66,14 @@ describe('line component', () => {
 
     it('are displayed if passed via annotations props', async () => {
       createShallowWrapper({
-        annotations: [
-          {
-            min: '',
-            max: '',
-          },
-        ],
+        props: {
+          annotations: [
+            {
+              min: '',
+              max: '',
+            },
+          ],
+        },
       });
 
       await nextTick();
@@ -74,20 +83,22 @@ describe('line component', () => {
 
     it('are displayed if passed via option props', async () => {
       createShallowWrapper({
-        option: {
-          series: [
-            {
-              name: 'annotations',
-              markPoint: {
-                data: [
-                  {
-                    xAxis: 10,
-                  },
-                ],
+        props: {
+          option: {
+            series: [
+              {
+                name: 'annotations',
+                markPoint: {
+                  data: [
+                    {
+                      xAxis: 10,
+                    },
+                  ],
+                },
+                data: [],
               },
-              data: [],
-            },
-          ],
+            ],
+          },
         },
       });
 
@@ -112,8 +123,8 @@ describe('line component', () => {
         },
       };
 
-      createShallowWrapper(
-        {
+      createShallowWrapper({
+        props: {
           annotations: [
             {
               min: '',
@@ -121,12 +132,7 @@ describe('line component', () => {
             },
           ],
         },
-        {
-          stubs: {
-            'chart-tooltip': ChartTooltipStub,
-          },
-        }
-      );
+      });
 
       wrapper.vm.onChartDataPointMouseOver(params);
 
@@ -137,13 +143,83 @@ describe('line component', () => {
     });
   });
 
-  describe('data tooltip is set', () => {
-    beforeEach(() => {
+  describe('data tooltip', () => {
+    it('is initialized', async () => {
       createShallowWrapper();
+
+      await nextTick();
+
+      expect(findDataTooltip().props()).toMatchObject({
+        useDefaultTooltipFormatter: true,
+        chart: mockChartInstance,
+      });
+    });
+
+    describe('is customized via slots', () => {
+      const { params, title, content } = chartTooltipStubData;
+
+      it('customizes tooltip value', async () => {
+        const tooltipValueSlot = jest.fn().mockReturnValue('Value');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-value': tooltipValueSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipValueSlot).toHaveBeenCalledWith({ value: 9 });
+        expect(findDataTooltip().text()).toBe('Value');
+      });
+
+      it('customizes title', async () => {
+        const tooltipTitleSlot = jest.fn().mockReturnValue('Title');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-title': tooltipTitleSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipTitleSlot).toHaveBeenCalledWith({
+          params,
+          title,
+        });
+        expect(findDataTooltip().text()).toBe('Title');
+      });
+
+      it('customizes content', async () => {
+        const tooltipContentSlot = jest.fn().mockReturnValue('Title');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-content': tooltipContentSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipContentSlot).toHaveBeenCalledWith({
+          params,
+          content,
+        });
+        expect(findDataTooltip().text()).toBe('Title');
+      });
     });
 
-    it('is initialized', () => {
-      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
+    it('is customized via formatting function', async () => {
+      createShallowWrapper({
+        props: {
+          formatTooltipText: jest.fn(),
+        },
+      });
+
+      await nextTick();
+
+      expect(findDataTooltip().props()).toMatchObject({
+        useDefaultTooltipFormatter: false,
+        chart: mockChartInstance,
+      });
     });
   });
 
@@ -158,7 +234,9 @@ describe('line component', () => {
 
     it('is inline if correct prop value is set', async () => {
       createShallowWrapper({
-        legendLayout: LEGEND_LAYOUT_INLINE,
+        props: {
+          legendLayout: LEGEND_LAYOUT_INLINE,
+        },
       });
 
       await nextTick();
@@ -168,7 +246,9 @@ describe('line component', () => {
 
     it('is tabular if correct prop value is set', async () => {
       createShallowWrapper({
-        legendLayout: LEGEND_LAYOUT_TABLE,
+        props: {
+          legendLayout: LEGEND_LAYOUT_TABLE,
+        },
       });
 
       await nextTick();
@@ -177,7 +257,9 @@ describe('line component', () => {
     });
     it('can be hidden', async () => {
       createShallowWrapper({
-        showLegend: false,
+        props: {
+          showLegend: false,
+        },
       });
 
       await nextTick();
@@ -188,7 +270,7 @@ describe('line component', () => {
 
   describe('height', () => {
     expectHeightAutoClasses({
-      createComponent: createShallowWrapper,
+      createComponent: (props) => createShallowWrapper({ props }),
       findContainer: () => wrapper,
       findChart,
     });

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

@@ -56,7 +56,7 @@ const defaultOptions = {
   },
 };
 
-const template = `<gl-line-chart
+const template = (content = '') => `<gl-line-chart
   :data="data"
   :option="option"
   :thresholds="thresholds"
@@ -64,7 +64,9 @@ const template = `<gl-line-chart
   :includeLegendAvgMax="includeLegendAvgMax"
   :showLegend="showLegend"
   :height="height"
-/>`;
+  >
+    ${content}
+  </gl-line-chart>`;
 
 const generateProps = ({
   data = defaultData,
@@ -87,7 +89,7 @@ const generateProps = ({
 const Template = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components,
-  template,
+  template: template(),
 });
 
 export const Default = Template.bind({});
@@ -99,7 +101,7 @@ WithThreshold.args = generateProps({
 });
 
 export const WithAnnotationsAsProps = Template.bind({});
-WithAnnotationsAsProps.storyNane = 'with annotations as props (recommended)';
+WithAnnotationsAsProps.storyName = 'with annotations as props (recommended)';
 WithAnnotationsAsProps.args = generateProps({
   ...mockAnnotationsConfigs,
   data: [
@@ -200,6 +202,21 @@ NoLegend.args = generateProps({
   showLegend: false,
 });
 
+export const WithCustomTooltip = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: template(`
+    <template #tooltip-title="{ params }">{{params && params.value}}</template>
+    <template #tooltip-content="{ params }">
+      <div v-for="p in params && params.seriesData">{{p.seriesName}}: {{p.value[1]}}</div>
+    </template>
+  `),
+});
+WithCustomTooltip.args = generateProps();
+WithCustomTooltip.parameters = {
+  storyshots: { disable: true },
+};
+
 export default {
   title: 'charts/line-chart',
   component: GlLineChart,

package/src/components/charts/line/line.vue

@@ -30,8 +30,6 @@ import {
   mergeSeriesToOptions,
   mergeAnnotationAxisToOptions,
   lineStyle,
-  // eslint-disable-next-line import/no-deprecated
-  getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
   LEGEND_LAYOUT_INLINE,
@@ -44,7 +42,6 @@ import {
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -55,7 +52,6 @@ export default {
     Chart,
     ChartLegend,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -83,6 +79,12 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Callback called when showing or refreshing a tooltip.
+     * **Deprecated:** Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     *
+     * @deprecated Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
@@ -137,8 +139,6 @@ export default {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      dataTooltipTitle: '',
-      dataTooltipContent: {},
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
@@ -146,7 +146,6 @@ export default {
         left: '0',
         top: '0',
       },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
   computed: {
@@ -187,7 +186,7 @@ export default {
           axisPointer: {
             show: true,
             label: {
-              formatter: this.onLabelChange,
+              formatter: this.formatTooltipText,
             },
           },
           axisTick: {
@@ -260,13 +259,6 @@ export default {
     this.chart.off('mouseover', this.onChartDataPointMouseOver);
   },
   methods: {
-    defaultFormatTooltipText(params) {
-      // eslint-disable-next-line import/no-deprecated
-      const { xLabels, tooltipContent } = getDefaultTooltipContent(params, this.options.yAxis.name);
-
-      this.$set(this, 'dataTooltipContent', tooltipContent);
-      this.dataTooltipTitle = xLabels.join(', ');
-    },
     defaultAnnotationTooltipText(params) {
       return {
         title: params.data.xAxis,
@@ -314,9 +306,6 @@ export default {
         };
       }
     },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
-    },
   },
   HEIGHT_AUTO_CLASSES,
 };
@@ -347,21 +336,21 @@ export default {
       </template>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
-    <chart-tooltip v-if="chart" ref="dataTooltip" :chart="chart">
-      <template #title>
-        <slot v-if="formatTooltipText" name="tooltip-title"></slot>
-        <div v-else>
-          {{ dataTooltipTitle }}
-          <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
-        </div>
+    <chart-tooltip
+      v-if="chart"
+      ref="dataTooltip"
+      :chart="chart"
+      :use-default-tooltip-formatter="!formatTooltipText"
+    >
+      <template v-if="$scopedSlots['tooltip-title']" #title="scope">
+        <slot name="tooltip-title" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-content']" #default="scope">
+        <slot name="tooltip-content" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+        <slot name="tooltip-value" v-bind="scope"></slot>
       </template>
-      <slot v-if="formatTooltipText" name="tooltip-content"></slot>
-      <tooltip-default-format v-else :tooltip-content="dataTooltipContent">
-        <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
-          <!-- @slot Tooltip value formatter -->
-          <slot name="tooltip-value" v-bind="scope"></slot>
-        </template>
-      </tooltip-default-format>
     </chart-tooltip>
     <chart-legend
       v-if="hasLegend"

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -444,6 +444,15 @@ describe('GlDuoChat', () => {
           await nextTick();
           expect(findSlashCommandsCard().exists()).toBe(false);
         });
+
+        it('shows default placeholder in the chat input', () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: false,
+            },
+          });
+          expect(findChatInput().attributes('placeholder')).toBe('GitLab Duo Chat');
+        });
       });
 
       describe('with the `withSlashCommands` enabled', () => {
@@ -478,6 +487,15 @@ describe('GlDuoChat', () => {
           });
         });
 
+        it('shows the correct placeholder in the chat input', () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+            },
+          });
+          expect(findChatInput().attributes('placeholder')).toBe('Type "/" for slash commands');
+        });
+
         describe('when the prompt includes the "/" character or no characters', () => {
           it.each(['', '//', '\\', 'foo', '/foo'])(
             'does not render the slash commands if prompt is "$prompt"',

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

@@ -24,7 +24,8 @@ export const i18n = {
   CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
   CHAT_EMPTY_STATE_TITLE: 'Ask a question',
   CHAT_EMPTY_STATE_DESC: 'AI generated explanations will appear here.',
-  CHAT_PROMPT_PLACEHOLDER: 'GitLab Duo Chat',
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
   CHAT_SUBMIT_LABEL: 'Send chat message.',
   CHAT_LEGAL_DISCLAIMER:
     "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
@@ -45,17 +46,17 @@ export const slashCommands = [
   {
     name: '/tests',
     shouldSubmit: false,
-    description: 'Write tests for the code snippet.',
+    description: 'Write tests for the selected snippet.',
   },
   {
     name: '/refactor',
     shouldSubmit: false,
-    description: 'Refactor the code snippet.',
+    description: 'Refactor the selected snippet.',
   },
   {
     name: '/explain',
     shouldSubmit: false,
-    description: 'Explain the code snippet.',
+    description: 'Explain the selected snippet.',
   },
 ];
 
@@ -215,6 +216,11 @@ export default {
       );
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
+    inputPlaceholder() {
+      return this.withSlashCommands
+        ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS
+        : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
+    },
   },
   watch: {
     isLoading() {
@@ -471,7 +477,7 @@ export default {
               data-testid="chat-prompt-input"
               class="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': !prompt }"
-              :placeholder="$options.i18n.CHAT_PROMPT_PLACEHOLDER"
+              :placeholder="inputPlaceholder"
               :disabled="isLoading"
               autofocus
               @keydown.enter.exact.native.prevent

package/src/scss/variables.scss

@@ -58,13 +58,6 @@ $white-dark: #eaeaea !default;
 $white-transparent: rgba(255, 255, 255, 0.8) !default;
 $transparent-rgba: rgba($white, 0);
 
-$t-gray-a-02: rgba($gray-950, 0.02) !default;
-$t-gray-a-04: rgba($gray-950, 0.04) !default;
-$t-gray-a-06: rgba($gray-950, 0.06) !default;
-$t-gray-a-08: rgba($gray-950, 0.08) !default;
-$t-gray-a-16: rgba($gray-950, 0.16) !default;
-$t-gray-a-24: rgba($gray-950, 0.24) !default;
-
 // Text
 $gl-text-color: $gray-900 !default;
 $gl-text-color-secondary: $gray-500 !default;

package/src/tokens/color.transparency.tokens.json

@@ -0,0 +1,84 @@
+{
+  "t-gray-a": {
+    "02": {
+      "$value": "rgba(31, 30, 36, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "04": {
+      "$value": "rgba(31, 30, 36, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "06": {
+      "$value": "rgba(31, 30, 36, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "08": {
+      "$value": "rgba(31, 30, 36, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "16": {
+      "$value": "rgba(31, 30, 36, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "24": {
+      "$value": "rgba(31, 30, 36, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    }
+  },
+  "t-white-a": {
+    "02": {
+      "$value": "rgba(255, 255, 255, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "04": {
+      "$value": "rgba(255, 255, 255, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "06": {
+      "$value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "08": {
+      "$value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "16": {
+      "$value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "24": {
+      "$value": "rgba(255, 255, 255, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "36": {
+      "$value": "rgba(255, 255, 255, 0.36)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    }
+  }
+}

package/src/tokens/color.transparency.tokens.stories.js

@@ -0,0 +1,26 @@
+import { methods, template } from './common_story_options';
+import colorTokens from './color.transparency.tokens.json';
+
+const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
+  name,
+  tokens,
+});
+
+export const Gray = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template,
+});
+Gray.args = generateProps({ name: 't-gray-a', tokens: colorTokens['t-gray-a'] });
+
+export const White = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template: `<div class="gl-bg-gray-900 gl-text-white">${template}</div>`,
+});
+White.args = generateProps({ name: 't-white-a', tokens: colorTokens['t-white-a'] });
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/color/transparency',
+};

package/src/tokens/common_story_options.js

@@ -5,6 +5,7 @@ export const methods = {
     return [name, key].filter(Boolean).join('.');
   },
   getTextColorClass(value) {
+    if (value.startsWith('rgba(')) return '';
     const textColorVariant = colorFromBackground(value, 4.5);
     return {
       'gl-text-gray-950': textColorVariant === 'dark',