@gitlab/ui 52.4.0 → 52.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.4.0",
+  "version": "52.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -115,10 +115,10 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.28.0",
+    "eslint": "8.29.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.7",
+    "eslint-plugin-storybook": "0.6.8",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

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

@@ -8,6 +8,9 @@ let mockChartInstance;
 
 jest.mock('echarts', () => ({
   getInstanceByDom: () => mockChartInstance,
+  graphic: {
+    LinearGradient: jest.fn(),
+  },
 }));
 
 let triggerResize = () => {};
@@ -176,4 +179,12 @@ describe('sparkline chart component', () => {
     await wrapper.vm.$nextTick();
     expect(getLastYValue().exists()).toBe(false);
   });
+
+  it('gradient will set the series itemStyle color', async () => {
+    wrapper.setProps({ gradient: ['red', 'green'] });
+
+    await wrapper.vm.$nextTick();
+
+    expect(getChartOptions().series[0].itemStyle.color).toBeDefined();
+  });
 });

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

@@ -1,4 +1,5 @@
 import { GlSparklineChart } from '../../../charts';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import readme from './sparkline.md';
 
 const chartData = [
@@ -11,16 +12,24 @@ const chartData = [
   ['Sun', 18],
 ];
 
+const customGradient = [
+  colorFromDefaultPalette(0),
+  colorFromDefaultPalette(1),
+  colorFromDefaultPalette(2),
+];
+
 const generateProps = ({
   data = chartData,
   height = 50,
   tooltipLabel = 'tooltipLabel',
   showLastYValue = true,
+  gradient,
 } = {}) => ({
   data,
   height,
   tooltipLabel,
   showLastYValue,
+  gradient,
 });
 
 const Template = (args) => ({
@@ -33,6 +42,7 @@ const Template = (args) => ({
         :height="height"
         :tooltip-label="tooltipLabel"
         :show-last-y-value="showLastYValue"
+        :gradient="gradient"
       />
     </div>`,
 });
@@ -40,6 +50,9 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithChartColorGradient = Template.bind({});
+WithChartColorGradient.args = generateProps({ gradient: customGradient });
+
 export default {
   title: 'charts/sparkline-chart',
   component: GlSparklineChart,

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

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
+import { graphic } from 'echarts';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import {
   defaultChartOptions,
@@ -13,6 +14,19 @@ import ChartTooltip from '../tooltip/tooltip.vue';
 // the padding is needed so the mark points don't overflow when visible
 const gridPadding = symbolSize / 2;
 
+const generateGradient = (colors) => {
+  return new graphic.LinearGradient(
+    0,
+    0,
+    0,
+    1,
+    colors.map((color, index) => {
+      const offset = index / (colors.length - 1);
+      return { offset, color };
+    })
+  );
+};
+
 export default {
   components: { Chart, ChartTooltip },
   directives: {
@@ -50,6 +64,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Sets a colour gradient for the sparkline
+     */
+    gradient: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -119,8 +141,15 @@ export default {
           ],
         },
         data,
+        itemStyle: this.itemStyle,
       };
     },
+    itemStyle() {
+      if (this.gradient.length) {
+        return { color: generateGradient(this.gradient) };
+      }
+      return {};
+    },
     lastYValue() {
       const latestEntry = this.data.slice(-1)[0];
 

package/src/scss/utilities.scss

@@ -1165,6 +1165,30 @@
   border-color: $gray-500 !important;
 }
 
+.gl-border-red-500 {
+  border-color: $red-500;
+}
+
+.gl-border-red-500\! {
+  border-color: $red-500 !important;
+}
+
+.gl-border-orange-500 {
+  border-color: $orange-500;
+}
+
+.gl-border-orange-500\! {
+  border-color: $orange-500 !important;
+}
+
+.gl-border-green-500 {
+  border-color: $green-500;
+}
+
+.gl-border-green-500\! {
+  border-color: $green-500 !important;
+}
+
 .gl-border-blue-200 {
   border-color: $blue-200;
 }
@@ -1405,6 +1429,22 @@
   border-width: $gl-border-size-1 !important;
 }
 
+.gl-border-2 {
+  border-width: $gl-border-size-2;
+}
+
+.gl-border-2\! {
+  border-width: $gl-border-size-2 !important;
+}
+
+.gl-border-3 {
+  border-width: $gl-border-size-3;
+}
+
+.gl-border-3\! {
+  border-width: $gl-border-size-3 !important;
+}
+
 .gl-border-4 {
   border-width: $gl-border-size-4;
 }
@@ -6390,6 +6430,16 @@
   margin-left: $gl-spacing-scale-3 !important;
   }
 }
+.gl-sm-ml-5 {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: $gl-spacing-scale-5;
+  }
+}
+.gl-sm-ml-5\! {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: $gl-spacing-scale-5 !important;
+  }
+}
 .gl-sm-ml-7 {
   @include gl-media-breakpoint-up(sm) {
   margin-left: $gl-spacing-scale-7;

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

@@ -127,6 +127,18 @@
   border-color: $gray-500;
 }
 
+@mixin gl-border-red-500 {
+  border-color: $red-500;
+}
+
+@mixin gl-border-orange-500 {
+  border-color: $orange-500;
+}
+
+@mixin gl-border-green-500 {
+  border-color: $green-500;
+}
+
 @mixin gl-border-blue-200($hover: true) {
   border-color: $blue-200;
 }
@@ -250,6 +262,14 @@
   border-width: $gl-border-size-1;
 }
 
+@mixin gl-border-2 {
+  border-width: $gl-border-size-2;
+}
+
+@mixin gl-border-3 {
+  border-width: $gl-border-size-3;
+}
+
 @mixin gl-border-4 {
   border-width: $gl-border-size-4;
 }

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

@@ -877,6 +877,12 @@
   }
 }
 
+@mixin gl-sm-ml-5 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-5;
+  }
+}
+
 @mixin gl-sm-ml-7 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-ml-7;