@gitlab/ui 59.3.2 → 59.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.3.2",
+  "version": "59.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -23,12 +23,13 @@ describe('area component', () => {
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createShallowWrapper = (props = {}) => {
+  const createShallowWrapper = ({ props = {}, slots = {} } = {}) => {
     wrapper = shallowMount(AreaChart, {
       propsData: { option: { series: [] }, data: [], ...props },
       stubs: {
         'chart-tooltip': ChartTooltipStub,
       },
+      slots,
     });
     emitChartCreated();
   };
@@ -57,12 +58,14 @@ describe('area component', () => {
 
     it('are displayed if passed via annotations props', async () => {
       createShallowWrapper({
-        annotations: [
-          {
-            min: '',
-            max: '',
-          },
-        ],
+        props: {
+          annotations: [
+            {
+              min: '',
+              max: '',
+            },
+          ],
+        },
       });
 
       await wrapper.vm.$nextTick();
@@ -72,20 +75,22 @@ describe('area 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: [],
-            },
-          ],
+            ],
+          },
         },
       });
 
@@ -111,12 +116,14 @@ describe('area component', () => {
       };
 
       createShallowWrapper({
-        annotations: [
-          {
-            min: '',
-            max: '',
-          },
-        ],
+        props: {
+          annotations: [
+            {
+              min: '',
+              max: '',
+            },
+          ],
+        },
       });
 
       wrapper.vm.onChartDataPointMouseOver(params);
@@ -166,7 +173,9 @@ describe('area component', () => {
 
     it('is inline if correct prop value is set', async () => {
       createShallowWrapper({
-        legendLayout: LEGEND_LAYOUT_INLINE,
+        props: {
+          legendLayout: LEGEND_LAYOUT_INLINE,
+        },
       });
 
       await wrapper.vm.$nextTick();
@@ -176,18 +185,41 @@ describe('area component', () => {
 
     it('is tabular if correct prop value is set', async () => {
       createShallowWrapper({
-        legendLayout: LEGEND_LAYOUT_TABLE,
+        props: {
+          legendLayout: LEGEND_LAYOUT_TABLE,
+        },
       });
 
       await wrapper.vm.$nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
+
+    it('displays custom series info when prop is set', async () => {
+      const legendSeriesInfo = [
+        {
+          name: 'Custom Legend Item',
+          type: 'solid',
+          color: '#000',
+          data: [10, 20, 30],
+        },
+      ];
+
+      createShallowWrapper({
+        props: {
+          legendSeriesInfo,
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findLegend().props('seriesInfo')).toEqual(expect.arrayContaining(legendSeriesInfo));
+    });
   });
 
   describe('height', () => {
     expectHeightAutoClasses({
-      createComponent: createShallowWrapper,
+      createComponent: (props) => createShallowWrapper({ props: { ...props } }),
       findContainer: () => wrapper,
       findChart,
     });

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

@@ -2,6 +2,7 @@ import times from 'lodash/times';
 import { GlAreaChart } from '../../../charts';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
+import { dataVizAqua500, dataVizOrange600 } from '../../../../scss_to_js/scss_variables';
 import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
 import { disableControls } from '../../../utils/stories_utils';
@@ -35,6 +36,7 @@ const template = `<gl-area-chart
   :annotations="annotations"
   :includeLegendAvgMax="includeLegendAvgMax"
   :height="height"
+  :legendSeriesInfo="legendSeriesInfo"
 />`;
 
 const generateProps = ({
@@ -44,6 +46,7 @@ const generateProps = ({
   annotations = [],
   includeLegendAvgMax = true,
   height = null,
+  legendSeriesInfo = [],
 } = {}) => ({
   data,
   option,
@@ -51,6 +54,7 @@ const generateProps = ({
   annotations,
   includeLegendAvgMax,
   height,
+  legendSeriesInfo,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -153,6 +157,24 @@ MultSeries.args = generateProps({
   })),
 });
 
+export const WithCustomLegendItems = Template.bind({});
+WithCustomLegendItems.args = generateProps({
+  legendSeriesInfo: [
+    {
+      name: 'Custom Legend Item 1',
+      type: 'solid',
+      color: dataVizOrange600,
+      data: [10, 20],
+    },
+    {
+      name: 'Custom Legend Item 2',
+      type: 'solid',
+      color: dataVizAqua500,
+      data: [30, 50],
+    },
+  ],
+});
+
 export default {
   title: 'charts/area-chart',
   component: GlAreaChart,

package/src/components/charts/area/area.vue

@@ -127,6 +127,11 @@ export default {
       required: false,
       default: null,
     },
+    legendSeriesInfo: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     // Part of the tooltip related data can be
@@ -244,6 +249,8 @@ export default {
       return { paddingLeft: `${grid.left}px` };
     },
     seriesInfo() {
+      if (this.legendSeriesInfo.length > 0) return this.legendSeriesInfo;
+
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
           acc.push({

package/src/scss/utilities.scss

@@ -3343,6 +3343,34 @@
   }
 }
 
+.gl-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.gl-flex-wrap-reverse\! {
+  flex-wrap: wrap-reverse !important;
+}
+
+.gl-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.gl-flex-nowrap\! {
+  flex-wrap: nowrap !important;
+}
+
+.gl-sm-flex-nowrap {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: nowrap;
+  }
+}
+
+.gl-sm-flex-nowrap\! {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: nowrap !important;
+  }
+}
+
 .gl-flex-wrap-wrap {
   flex-wrap: wrap;
 }
@@ -3415,14 +3443,6 @@
   }
 }
 
-.gl-flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-.gl-flex-nowrap\! {
-  flex-wrap: nowrap !important;
-}
-
 .gl-flex-direction-column {
   flex-direction: column;
 }

package/src/scss/utility-mixins/flex.scss

@@ -65,11 +65,6 @@
   }
 }
 
-/**
-* `gl-*flex-wrap` is deprecated; use `gl-*flex-wrap-wrap` instead.
-* TODO: delete `gl-*flex-wrap` utilities classes, see
-* https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1951
-*/
 @mixin gl-flex-wrap {
   flex-wrap: wrap;
 }
@@ -92,6 +87,25 @@
   }
 }
 
+@mixin gl-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+@mixin gl-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@mixin gl-sm-flex-nowrap {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-flex-nowrap;
+  }
+}
+
+/**
+* `gl-*flex-wrap-wrap` is deprecated; use `gl-*flex-wrap` instead.
+* TODO: delete `gl-*flex-wrap-wrap` utilities classes, see
+* https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2204
+*/
 @mixin gl-flex-wrap-wrap {
   flex-wrap: wrap;
 }
@@ -128,15 +142,6 @@
   }
 }
 
-/**
-* `gl-flex-nowrap` is deprecated; use `gl-flex-wrap-nowrap` instead.
-* TODO: delete `gl-flex-wrap-nowrap` utility class, see
-* https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1951
-*/
-@mixin gl-flex-nowrap {
-  flex-wrap: nowrap;
-}
-
 @mixin gl-flex-direction-column {
   flex-direction: column;
 }