@gitlab/ui 111.7.1 → 111.8.1

package/dist/index.js

@@ -13,6 +13,9 @@ export { default as GlIntersectionObserver } from './components/utilities/inters
 export { default as GlDeprecatedLink, default as GlLink } from './components/base/link/link';
 export { default as GlIcon } from './components/base/icon/icon';
 export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon';
+export { default as GlAnimatedChevronLgRightDownIcon } from './components/base/animated_icon/animated_chevron_lg_right_down_icon';
+export { default as GlAnimatedChevronDownUpIcon } from './components/base/animated_icon/animated_chevron_down_up_icon';
+export { default as GlAnimatedChevronLgDownUpIcon } from './components/base/animated_icon/animated_chevron_lg_down_up_icon';
 export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon';
 export { default as GlAnimatedLoaderIcon } from './components/base/animated_icon/animated_loader_icon';
 export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon';

package/dist/utils/charts/config.js

@@ -37,6 +37,10 @@ const grid = {
   left: 64,
   right: 32
 };
+
+/**
+ * Options for charts where the y-axis is the metrics axis.
+ */
 const defaultChartOptions = {
   grid,
   xAxis,

package/package.json

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

package/src/components/base/animated_icon/animated_chevron_down_up_icon.vue

@@ -0,0 +1,36 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedChevronDownUpIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="[iconStateClass, iconVariantClass]"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="gl-animated-chevron-down-up-arrow-left-line"
+      d="M0 0L0 4.6"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      class="gl-animated-chevron-down-up-arrow-right-line"
+      d="M0 0L0 4.6"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue

@@ -0,0 +1,36 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedChevronLgDownUpIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="[iconStateClass, iconVariantClass]"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="gl-animated-chevron-lg-down-up-arrow-left-line"
+      d="M0 0L0 7.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      class="gl-animated-chevron-lg-down-up-arrow-right-line"
+      d="M0 0L0 7.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue

@@ -0,0 +1,28 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedChevronLgRightDownIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="[iconStateClass, iconVariantClass]"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="gl-animated-chevron-lg-right-down-arrow"
+      d="M5.75 13.2537L11.0018 8.00183L5.75 2.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_icon.scss

@@ -53,6 +53,28 @@
   color: var(--gl-icon-color-success);
 }
 
+/* * * * * * * * * * * * * * * * *
+ * animated_chevron_lg_right_down_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-chevron-lg-right-down-arrow {
+  transform-origin: center center;
+}
+
+/* on state */
+.gl-animated-icon-on {
+  .gl-animated-chevron-lg-right-down-arrow {
+    rotate: 90deg;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off {
+  .gl-animated-chevron-lg-right-down-arrow {
+    rotate: 0deg;
+  }
+}
+
 /* * * * * * * * * * * * * * * * *
  * animated_chevron_right_down_icon.vue
  * * * * * * * * * * * * * * * * */
@@ -75,6 +97,90 @@
   }
 }
 
+/* * * * * * * * * * * * * * * * *
+ * animated_chevron_lg_down_up_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+ /* on state */
+ .gl-animated-icon-on {
+  .gl-animated-chevron-lg-down-up-arrow-left-line,
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    translate: 50% 31.2%;
+    scale: 1 1.01;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, -29 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-left-line {
+    rotate: 45deg;
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    rotate: -45deg;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off {
+  .gl-animated-chevron-lg-down-up-arrow-left-line,
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    translate: 50% 68.8%;
+    scale: 1 1;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, 29 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-left-line {
+    rotate: 135deg;
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    rotate: -135deg;
+  }
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_chevron_down_up_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+ /* on state */
+ .gl-animated-icon-on {
+  .gl-animated-chevron-down-up-arrow-left-line,
+  .gl-animated-chevron-down-up-arrow-right-line {
+    translate: 50% 37.6%;
+    scale: 1 1.01;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, -27 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-down-up-arrow-left-line {
+    rotate: 45deg;
+  }
+
+  .gl-animated-chevron-down-up-arrow-right-line {
+    rotate: -45deg;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off {
+  .gl-animated-chevron-down-up-arrow-left-line,
+  .gl-animated-chevron-down-up-arrow-right-line {
+    translate: 50% 62.6%;
+    scale: 1 1;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, 27 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-down-up-arrow-left-line {
+    rotate: 135deg;
+  }
+
+  .gl-animated-chevron-down-up-arrow-right-line {
+    rotate: -135deg;
+  }
+}
+
 /* * * * * * * * * * * * * * * * *
  * animated_duo_chat_icon.vue
  * * * * * * * * * * * * * * * * */

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

@@ -186,18 +186,7 @@ export default {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultAreaChartOptions = {
-        xAxis: {
-          axisPointer: {
-            show: true,
-            lineStyle: {
-              type: 'solid',
-            },
-            label: {
-              formatter: this.formatTooltipText,
-            },
-          },
-        },
+      const areaChartOptions = {
         yAxis: {
           axisTick: {
             show: false,
@@ -207,10 +196,25 @@ export default {
           show: false,
         },
       };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
+        },
+      };
+
       const mergedOptions = merge(
         {},
         defaultChartOptions,
-        defaultAreaChartOptions,
+        areaChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

package/src/components/charts/line/line.vue

@@ -180,14 +180,8 @@ export default {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultLineChartOptions = {
+      const lineChartOptions = {
         xAxis: {
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: this.formatTooltipText,
-            },
-          },
           axisTick: {
             alignWithLabel: true,
             show: true,
@@ -200,10 +194,25 @@ export default {
           show: false,
         },
       };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
+        },
+      };
+
       const mergedOptions = merge(
         {},
         defaultChartOptions,
-        defaultLineChartOptions,
+        lineChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

package/src/components/charts/stacked_column/stacked_column.vue

@@ -192,46 +192,58 @@ export default {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
     options() {
-      const mergedOptions = merge(
-        {},
-        defaultChartOptions,
-        {
-          grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
-          xAxis: {
-            boundaryGap: true,
-            axisLabel: {
-              margin: 20,
-              verticalAlign: 'bottom',
-            },
-            axisLine: {
-              show: false,
-            },
-            axisPointer: {
-              show: true,
-              type: 'none',
-              label: {
-                formatter: this.formatTooltipText,
-              },
-            },
-            data: this.groupBy,
-            name: this.xAxisTitle,
-            type: this.xAxisType,
+      const stackedColumnChartOptions = {
+        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
+        xAxis: {
+          boundaryGap: true,
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom',
           },
-          yAxis: [
-            {
-              ...yAxisDefaults,
-              name: this.yAxisTitle,
-            },
-            {
-              ...yAxisDefaults,
-              name: this.secondaryDataTitle,
-              show: this.hasSecondaryAxis,
-            },
-          ],
-          legend: {
+          axisLine: {
             show: false,
           },
+          axisPointer: {
+            type: 'none',
+          },
+          data: this.groupBy,
+          name: this.xAxisTitle,
+          type: this.xAxisType,
+        },
+        yAxis: [
+          {
+            ...yAxisDefaults,
+            name: this.yAxisTitle,
+          },
+          {
+            ...yAxisDefaults,
+            name: this.secondaryDataTitle,
+            show: this.hasSecondaryAxis,
+          },
+        ],
+        legend: {
+          show: false,
+        },
+      };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
         },
+      };
+
+      const mergedOptions = merge(
+        {},
+        defaultChartOptions,
+        stackedColumnChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

package/src/index.js

@@ -19,6 +19,9 @@ export { default as GlIntersectionObserver } from './components/utilities/inters
 export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
 export { default as GlIcon } from './components/base/icon/icon.vue';
 export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon.vue';
+export { default as GlAnimatedChevronLgRightDownIcon } from './components/base/animated_icon/animated_chevron_lg_right_down_icon.vue';
+export { default as GlAnimatedChevronDownUpIcon } from './components/base/animated_icon/animated_chevron_down_up_icon.vue';
+export { default as GlAnimatedChevronLgDownUpIcon } from './components/base/animated_icon/animated_chevron_lg_down_up_icon.vue';
 export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon.vue';
 export { default as GlAnimatedLoaderIcon } from './components/base/animated_icon/animated_loader_icon.vue';
 export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon.vue';

package/src/utils/charts/config.js

@@ -42,6 +42,9 @@ export const grid = {
   right: 32,
 };
 
+/**
+ * Options for charts where the y-axis is the metrics axis.
+ */
 export const defaultChartOptions = {
   grid,
   xAxis,