@gitlab/ui 59.3.1 → 59.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [59.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v59.3.2...v59.4.0) (2023-04-05)
+
+
+### Features
+
+* **GlAreaChart:** add legend-series-info prop ([6e855cc](https://gitlab.com/gitlab-org/gitlab-ui/commit/6e855cc1260c00a4a5821003b2dd0ec8d082d7bd))
+
+## [59.3.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v59.3.1...v59.3.2) (2023-04-05)
+
+
+### Bug Fixes
+
+* **GlSkeletonLoader:** Disable animation for reduced motion ([a70e810](https://gitlab.com/gitlab-org/gitlab-ui/commit/a70e8104361a4f51f36076d4466989df2de53f94))
+
 ## [59.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v59.3.0...v59.3.1) (2023-04-05)
 
 

package/dist/components/base/button/button.js

@@ -106,7 +106,7 @@ var script = {
   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/dist/components/base/modal/modal.js

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

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -207,7 +207,7 @@ var script = {
     checkToggleFocusable() {
       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);
       }
     },
     async toggle() {

package/dist/components/base/skeleton_loader/skeleton_loader.js

@@ -97,6 +97,7 @@ var script = {
       }
       return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
     };
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     const svg = createElement('svg', {
       class: {
         'gl-skeleton-loader': true,
@@ -108,15 +109,17 @@ var script = {
         preserveAspectRatio: props.preserveAspectRatio
       }
     }, [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()
+        height: height(),
+        ...(reducedMotion ? {
+          class: 'gl-fill-gray-100'
+        } : {
+          fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)`
+        })
       }
     }), createElement('defs', {}, [createElement('clipPath', {
       attrs: {
@@ -130,7 +133,7 @@ var script = {
         height: DEFAULT_LINE_HEIGHT,
         rx: 4
       }
-    }))), createElement('linearGradient', {
+    }))), !reducedMotion && createElement('linearGradient', {
       attrs: {
         id: `${props.uniqueKey}-idGradient`
       }

package/dist/components/base/table/table.js

@@ -31,7 +31,7 @@ var script = {
     // 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/dist/components/charts/area/area.js

@@ -89,6 +89,11 @@ var script = {
       type: [Number, String],
       required: false,
       default: null
+    },
+    legendSeriesInfo: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
   data() {
@@ -194,6 +199,7 @@ var script = {
       };
     },
     seriesInfo() {
+      if (this.legendSeriesInfo.length > 0) return this.legendSeriesInfo;
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
           acc.push({