@gitlab/ui 66.24.0 → 66.25.1

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:12:46 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:25 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:12:46 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:12:46 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:26 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:12:46 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:25 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:12:46 GMT
+// Generated on Mon, 09 Oct 2023 19:55:26 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:12:46 GMT
+// Generated on Mon, 09 Oct 2023 19:55:26 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.24.0",
+  "version": "66.25.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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/user_feedback/user_feedback.md

@@ -5,7 +5,7 @@ the form data on submission.
 
 ## Custom button text
 
-The component allows to customize the button text, presented to the user.
+The component allows to customize the button text presented to the user.
 
 ```html
 <gl-duo-user-feedback feedback-link-text="Leave your custom feedback" />
@@ -13,9 +13,9 @@ The component allows to customize the button text, presented to the user.
 
 ## Linking to a separate feedback form
 
-The main goal of this component is to provide the advanced feedback form. However, it might not
-be necessary for all consumers. In such a case, the component allows to bypass the default
-form and link to an external feedback page/form.
+The main goal of this component is to provide an advanced feedback form. However, it might only
+be necessary for some consumers. In such a case, the component bypasses the default
+form and links to an external feedback page/form.
 
 ```html
 <gl-duo-user-feedback feedback-link-url="https://gitlab.com" />
@@ -29,8 +29,8 @@ This component emits the `feedback` event with all the options selected in the f
 <gl-duo-user-feedback @feedback="myEventTracker" />
 ```
 
-The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) coming from
-the underlying `FeedbackModal` component. Here's the example of a possible event:
+The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) from
+the underlying `FeedbackModal` component. Here's an example of a possible event:
 
 ```json
 {
@@ -38,3 +38,49 @@ the underlying `FeedbackModal` component. Here's the example of a possible event
   "extendedTextFeedback": "The answer was too long to understand"
 }
 ```
+
+## Using the `feedback-extra-fields` slot
+
+By default, the component renders one extra textarea field to gather additional feedback
+information from users. However, it may not be enough sometimes, and different use cases of
+this component might need to fine-tune the form to gather information most suitable for that
+or another use case. For this purpose, the component provides the `feedback-extra-fields`
+slot, which can override the default textarea with different fields/information.
+
+Note, however, that the content put into this slot will override the default textarea. So,
+if you want to append additional fields, instead of completely overriding the default textarea,
+you must copy the textarea field from the `DuoChatFeedbackModal` component into the slot.
+
+```html
+<gl-duo-user-feedback
+  :feedback-link-text="feedbackLinkText"
+  :feedback-link-url="feedbackLinkUrl"
+  @feedback="logEvent"
+>
+  <template #feedback-extra-fields>
+    <div class="gl-mb-5">
+      <gl-alert variant="info" :dismissible="false">
+        GitLab team members can not see your conversation. Please be as descriptive as possible.
+      </gl-alert>
+    </div>
+    <gl-form-group label="What were you doing?" optional>
+      <gl-form-textarea
+        placeholder="The situation in which you interacted with GitLab Duo Chat."
+        v-model="didWhat"
+      />
+    </gl-form-group>
+    <gl-form-group label="What were you expecting from the response?" optional>
+      <gl-form-textarea
+        placeholder="What kind of information or assistance were you hoping to receive?"
+        v-model="expectedWhat"
+      />
+    </gl-form-group>
+    <gl-form-group label="How could the response be improved?" optional>
+      <gl-form-textarea
+        placeholder="How the response might better meet your needs."
+        v-model="improveWhat"
+      />
+    </gl-form-group>
+  </template>
+</gl-duo-user-feedback>
+```

package/src/components/experimental/duo/user_feedback/user_feedback.spec.js

@@ -1,14 +1,18 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '../../../../index';
-import DuoChatFeedbackModal from './user_feedback_modal.vue';
+import FeedbackModal from './user_feedback_modal.vue';
 import UserFeedback, { i18n } from './user_feedback.vue';
 
+const DummyComponent = {
+  template: '<p>dummy</p>',
+};
+
 describe('UserFeedback', () => {
   let wrapper;
   const eventName = 'test_event_name';
 
-  const createComponent = ({ props, data = {} } = {}) => {
+  const createComponent = ({ props, data = {}, slots = {} } = {}) => {
     wrapper = shallowMount(UserFeedback, {
       data() {
         return data;
@@ -17,11 +21,15 @@ describe('UserFeedback', () => {
         eventName,
         ...props,
       },
+      stubs: {
+        FeedbackModal,
+      },
+      slots,
     });
   };
 
   const findButton = () => wrapper.findComponent(GlButton);
-  const findModal = () => wrapper.findComponent(DuoChatFeedbackModal);
+  const findModal = () => wrapper.findComponent(FeedbackModal);
 
   beforeEach(() => {
     createComponent();
@@ -77,4 +85,13 @@ describe('UserFeedback', () => {
       expect(findModal().exists()).toBe(false);
     });
   });
+
+  describe('slots', () => {
+    it('renders the `feedback-extra-fields` slot', () => {
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
+      wrapper.destroy();
+      createComponent({ slots: { 'feedback-extra-fields': DummyComponent } });
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(true);
+    });
+  });
 });

package/src/components/experimental/duo/user_feedback/user_feedback.stories.js

@@ -1,4 +1,5 @@
-import GlUserFeedback from './user_feedback.vue';
+import { GlAlert, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlDuoUserFeedback from './user_feedback.vue';
 import readme from './user_feedback.md';
 
 const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
@@ -6,8 +7,13 @@ const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
   feedbackLinkUrl,
 });
 
-const Template = (args, { argTypes }) => ({
-  components: { GlUserFeedback },
+export const Default = (args, { argTypes }) => ({
+  components: {
+    GlDuoUserFeedback,
+    GlAlert,
+    GlFormGroup,
+    GlFormTextarea,
+  },
   props: Object.keys(argTypes),
   data() {
     return {
@@ -21,7 +27,7 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
     <div>
-      <gl-user-feedback
+      <gl-duo-user-feedback
         :feedback-link-text="feedbackLinkText"
         :feedback-link-url="feedbackLinkUrl"
         @feedback="logEvent"/>
@@ -29,13 +35,67 @@ const Template = (args, { argTypes }) => ({
     </div>
     `,
 });
-
-export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const Slots = (args, { argTypes }) => ({
+  components: {
+    GlDuoUserFeedback,
+    GlAlert,
+    GlFormGroup,
+    GlFormTextarea,
+  },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      eventOutput: '',
+      didWhat: '',
+      expectedWhat: '',
+      improveWhat: '',
+    };
+  },
+  methods: {
+    logEvent(event) {
+      const { feedbackChoices } = event;
+      this.eventOutput = JSON.stringify({
+        feedbackChoices,
+        didWhat: this.didWhat,
+        expectedWhat: this.expectedWhat,
+        improveWhat: this.improveWhat,
+      });
+    },
+  },
+  template: `
+    <div>
+      <gl-duo-user-feedback
+        :feedback-link-text="feedbackLinkText"
+        :feedback-link-url="feedbackLinkUrl"
+        @feedback="logEvent">
+        <template #feedback-extra-fields>
+          <div class="gl-mb-5">
+            <gl-alert variant="info" :dismissible="false">
+              GitLab team members can not see your conversation. Please be as descriptive as possible.
+            </gl-alert>
+          </div>
+          <gl-form-group label="What were you doing?" optional>
+            <gl-form-textarea placeholder="The situation in which you interacted with GitLab Duo Chat." v-model="didWhat" />
+          </gl-form-group>
+          <gl-form-group label="What were you expecting from the response?" optional>
+            <gl-form-textarea placeholder="What kind of information or assistance were you hoping to receive?" v-model="expectedWhat" />
+          </gl-form-group>
+          <gl-form-group label="How could the response be improved?" optional>
+            <gl-form-textarea placeholder="How the response might better meet your needs."v-model="improveWhat" />
+          </gl-form-group>
+        </template>
+      </gl-duo-user-feedback>
+      <p v-if="eventOutput"><code>{{ eventOutput }}</code></p>
+    </div>
+    `,
+});
+Slots.parameters = { controls: { disable: true } };
+
 export default {
-  title: 'experimental/duo/user-feedback',
-  component: GlUserFeedback,
+  title: 'experimental/duo/duo-user-feedback',
+  component: GlDuoUserFeedback,
   parameters: {
     storyshots: { disable: true },
     docs: {

package/src/components/experimental/duo/user_feedback/user_feedback.vue

@@ -72,6 +72,11 @@ export default {
         {{ $options.i18n.FEEDBACK_THANKS }}
       </span>
     </div>
-    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify" />
+    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify">
+      <template #feedback-extra-fields>
+        <!-- @slot The addition Feedback form fields. -->
+        <slot name="feedback-extra-fields"></slot>
+      </template>
+    </feedback-modal>
   </div>
 </template>

package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js

@@ -2,6 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 import { GlModal, GlFormCheckboxGroup, GlFormCheckbox, GlFormTextarea } from '../../../../index';
 import FeedbackModal, { feedbackOptions } from './user_feedback_modal.vue';
 
+const DummyComponent = {
+  template: '<p>dummy</p>',
+};
+
 describe('FeedbackModal', () => {
   let wrapper;
 
@@ -15,8 +19,9 @@ describe('FeedbackModal', () => {
       .at(index)
       .vm.$emit('input', [feedbackOptions[index].value]);
   };
-  const createComponent = () => {
+  const createComponent = (options = {}) => {
     wrapper = shallowMount(FeedbackModal, {
+      ...options,
       stubs: {
         GlModal,
         GlFormCheckboxGroup,
@@ -58,4 +63,16 @@ describe('FeedbackModal', () => {
       expect(wrapper.emitted('feedback-submitted')).toBeUndefined();
     });
   });
+
+  describe('slots', () => {
+    it('renders the `feedback-extra-fields` slot with default content', () => {
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
+      expect(findTextarea().exists()).toBe(true);
+      wrapper.destroy();
+
+      createComponent({ slots: { 'feedback-extra-fields': DummyComponent } });
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(true);
+      expect(findTextarea().exists()).toBe(false);
+    });
+  });
 });

package/src/components/experimental/duo/user_feedback/user_feedback_modal.vue

@@ -114,11 +114,15 @@ export default {
         :options="$options.feedbackOptions"
       />
     </gl-form-group>
-    <gl-form-group :label="$options.i18n.MODAL_MORE_LABEL" optional>
-      <gl-form-textarea
-        v-model="extendedFeedback"
-        :placeholder="$options.i18n.MODAL_MORE_PLACEHOLDER"
-      />
-    </gl-form-group>
+
+    <!-- @slot The addition Feedback form fields. -->
+    <slot name="feedback-extra-fields">
+      <gl-form-group :label="$options.i18n.MODAL_MORE_LABEL" optional>
+        <gl-form-textarea
+          v-model="extendedFeedback"
+          :placeholder="$options.i18n.MODAL_MORE_PLACEHOLDER"
+        />
+      </gl-form-group>
+    </slot>
   </gl-modal>
 </template>

package/src/utils/charts/constants.js

@@ -65,5 +65,6 @@ export const CHART_TYPE_BAR = 'bar';
 export const CHART_TYPE_LINE = 'line';
 
 // Constants for height "auto"
-export const HEIGHT_AUTO_CLASSES = 'gl-display-flex gl-flex-direction-column gl-h-full';
+export const HEIGHT_AUTO_CLASSES =
+  'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
 export const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';