@gitlab/ui 86.13.0 → 86.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.13.0",
+  "version": "86.14.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -111,7 +111,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "19.5.0",
+    "@gitlab/eslint-plugin": "19.6.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
     "@gitlab/svgs": "3.105.0",

package/src/components/base/badge/badge.scss

@@ -85,6 +85,14 @@ $badge-min-width: $gl-spacing-scale-3;
   width: 100%;
   // Mitigate the effect of width: 100%
   max-width: max-content;
+  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
+              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+              border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+              box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+
+  @media (prefers-reduced-motion) {
+    transition-duration: .01ms !important;
+  }
 
   @media (forced-colors: active) {
     border: 1px solid;

package/src/components/charts/sparkline/sparkline.vue

@@ -139,9 +139,12 @@ export default {
       const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    willShowLastYValue() {
+      return this.showLastYValue && this.data.length;
+    },
     series() {
-      const { data, smooth, itemStyle, showLastYValue, connectNulls } = this;
-      const markPoint = showLastYValue
+      const { data, smooth, itemStyle, willShowLastYValue, connectNulls } = this;
+      const markPoint = willShowLastYValue
         ? {
             symbol: 'circle',
             cursor: 'auto',
@@ -171,12 +174,29 @@ export default {
       };
     },
     itemStyle() {
-      if (this.gradient.length) {
+      if (this.applyGradient) {
         return { color: generateGradient(this.gradient) };
       }
+      if (this.gradient.length) {
+        // If the gradient cannot be used, then apply
+        // the first colour to the entire line.
+        return { color: this.gradient[0] };
+      }
       return {};
     },
+    applyGradient() {
+      if (this.gradient.length && this.data.length) {
+        // Applying a gradient a constant line will cause it to not render,
+        // so skip the gradient if all values are equal.
+        const [, firstValue] = this.data[0];
+        return this.data.some(([, value]) => firstValue !== value);
+      }
+
+      return false;
+    },
     lastYValue() {
+      if (!this.willShowLastYValue) return undefined;
+
       const latestEntry = this.data.slice(-1)[0];
 
       return latestEntry[1];