@gitlab/ui 59.3.1 → 59.4.0

package/dist/utils/utils.js

@@ -119,11 +119,13 @@ function isDev() {
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
+ * @param {HTMLElement} element component that triggered the warning
  */
 function logWarning() {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   if (message.length && isDev()) {
-    console.warn(message); // eslint-disable-line no-console
+    console.warn(message, element); // eslint-disable-line no-console
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.3.1",
+  "version": "59.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -119,9 +119,9 @@
     "bootstrap": "4.6.2",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.36.0",
+    "eslint": "8.37.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-cypress": "2.13.2",
     "eslint-plugin-storybook": "0.6.11",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",

package/src/components/base/button/button.vue

@@ -121,7 +121,10 @@ export default {
   mounted() {
     // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
     if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
-      logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.');
+      logWarning(
+        '[gl-button]: Accessible name missing. Please add inner text or aria-label.',
+        this.$el
+      );
     }
   },
 };

package/src/components/base/modal/modal.vue

@@ -113,7 +113,8 @@ export default {
   mounted() {
     if (!this.ariaLabel && !this.title) {
       logWarning(
-        '[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.'
+        '[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.',
+        this.$el
       );
     }
   },

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -221,7 +221,8 @@ export default {
       if (!isElementFocusable(this.toggleElement) && !isElementTabbable(this.toggleElement)) {
         logWarning(
           `GlDisclosureDropdown/GlCollapsibleListbox: Toggle is missing a 'tabindex' and cannot be focused.
-          Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`
+          Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`,
+          this.$el
         );
       }
     },

package/src/components/base/skeleton_loader/skeleton_loader.spec.js

@@ -7,8 +7,15 @@ describe('GlSkeletonLoader', () => {
   const findDefaultLines = () => wrapper.findAll('clipPath rect');
   const findSvg = () => wrapper.find('svg');
 
-  const createComponent = (options = {}) => {
-    wrapper = shallowMount(GlSkeletonLoader, options);
+  const createComponent = ({ propsData, slots, reducedMotion } = {}) => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: reducedMotion,
+      })),
+    });
+
+    wrapper = shallowMount(GlSkeletonLoader, { propsData, slots });
   };
 
   describe('when default skeleton is used', () => {
@@ -126,4 +133,19 @@ describe('GlSkeletonLoader', () => {
       });
     });
   });
+
+  it.each`
+    reducedMotion | hasLinearGradient
+    ${false}      | ${'has'}
+    ${true}       | ${'does not have'}
+  `(
+    '$hasLinearGradient linear-gradient when reduced motion is $reducedMotion',
+    ({ reducedMotion }) => {
+      createComponent({ reducedMotion });
+
+      const gradient = wrapper.find('linearGradient');
+
+      expect(gradient.exists()).toBe(!reducedMotion);
+    }
+  );
 });

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -106,6 +106,8 @@ export default {
       return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
     };
 
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
     const svg = createElement(
       'svg',
       {
@@ -122,13 +124,15 @@ export default {
       [
         createElement('title', {}, ['Loading']),
         createElement('rect', {
-          style: { fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)` },
           attrs: {
             'clip-path': `url(${props.baseUrl}#${props.uniqueKey}-idClip)`,
             x: 0,
             y: 0,
             width: width(),
             height: height(),
+            ...(reducedMotion
+              ? { class: 'gl-fill-gray-100' }
+              : { fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)` }),
           },
         }),
         createElement('defs', {}, [
@@ -153,73 +157,74 @@ export default {
                   })
                 )
           ),
-          createElement(
-            'linearGradient',
-            {
-              attrs: {
-                id: `${props.uniqueKey}-idGradient`,
-              },
-            },
-            [
-              createElement(
-                'stop',
-                {
-                  class: 'primary-stop',
-                  attrs: {
-                    offset: '0%',
-                  },
+          !reducedMotion &&
+            createElement(
+              'linearGradient',
+              {
+                attrs: {
+                  id: `${props.uniqueKey}-idGradient`,
                 },
-                [
-                  createElement('animate', {
+              },
+              [
+                createElement(
+                  'stop',
+                  {
+                    class: 'primary-stop',
                     attrs: {
-                      attributeName: 'offset',
-                      values: '-2; 1',
-                      dur: '1s',
-                      repeatCount: 'indefinite',
+                      offset: '0%',
                     },
-                  }),
-                ]
-              ),
-              createElement(
-                'stop',
-                {
-                  class: 'secondary-stop',
-                  attrs: {
-                    offset: '50%',
                   },
-                },
-                [
-                  createElement('animate', {
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-2; 1',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+                createElement(
+                  'stop',
+                  {
+                    class: 'secondary-stop',
                     attrs: {
-                      attributeName: 'offset',
-                      values: '-1.5; 1.5',
-                      dur: '1s',
-                      repeatCount: 'indefinite',
+                      offset: '50%',
                     },
-                  }),
-                ]
-              ),
-              createElement(
-                'stop',
-                {
-                  class: 'primary-stop',
-                  attrs: {
-                    offset: '100%',
                   },
-                },
-                [
-                  createElement('animate', {
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-1.5; 1.5',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+                createElement(
+                  'stop',
+                  {
+                    class: 'primary-stop',
                     attrs: {
-                      attributeName: 'offset',
-                      values: '-1; 2',
-                      dur: '1s',
-                      repeatCount: 'indefinite',
+                      offset: '100%',
                     },
-                  }),
-                ]
-              ),
-            ]
-          ),
+                  },
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-1; 2',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+              ]
+            ),
         ]),
       ]
     );

package/src/components/base/table/table.spec.js

@@ -35,7 +35,7 @@ describe('GlTable', () => {
     factory();
     await waitForAnimationFrame();
 
-    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning);
+    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning, wrapper.element);
   });
 
   it('should not log a warning when given a prop which qualifies for the usage of GlTable', async () => {

package/src/components/base/table/table.vue

@@ -30,7 +30,7 @@ export default {
     // logWarning will call isDev before logging any message
     // this additional call to isDev is being made to exit the condition early when run in production
     if (isDev() && !shouldUseFullTable(this)) {
-      logWarning(glTableLiteWarning);
+      logWarning(glTableLiteWarning, this.$el);
     }
   },
 };

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

@@ -7809,6 +7809,14 @@
   stroke: transparent !important
 }
 
+.gl-fill-gray-100 {
+  fill: $gray-100
+}
+
+.gl-fill-gray-100\! {
+  fill: $gray-100 !important
+}
+
 .gl-fill-gray-200 {
   fill: $gray-200
 }

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

@@ -46,6 +46,10 @@
   stroke: transparent;
 }
 
+@mixin gl-fill-gray-100 {
+  fill: $gray-100;
+}
+
 @mixin gl-fill-gray-200 {
   fill: $gray-200;
 }

package/src/utils/utils.js

@@ -130,10 +130,11 @@ export function isDev() {
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
+ * @param {HTMLElement} element component that triggered the warning
  */
-export function logWarning(message = '') {
+export function logWarning(message = '', element = '') {
   if (message.length && isDev()) {
-    console.warn(message); // eslint-disable-line no-console
+    console.warn(message, element); // eslint-disable-line no-console
   }
 }