@gitlab/ui 66.25.0 → 66.25.1

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:25 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:26 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:26 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 10:55:11 GMT
+ * Generated on Mon, 09 Oct 2023 19:55:25 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Oct 2023 10:55:11 GMT
+// Generated on Mon, 09 Oct 2023 19:55:26 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Oct 2023 10:55:11 GMT
+// Generated on Mon, 09 Oct 2023 19:55:26 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/charts/constants.js

@@ -65,7 +65,7 @@ const CHART_TYPE_BAR = 'bar';
 const CHART_TYPE_LINE = 'line';
 
 // Constants for height "auto"
-const HEIGHT_AUTO_CLASSES = 'gl-display-flex gl-flex-direction-column gl-h-full';
+const HEIGHT_AUTO_CLASSES = 'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
 const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';
 
 export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, ANNOTATION_TOOLTIP_TOP_OFFSET, CHART_TYPE_BAR, CHART_TYPE_LINE, DATA_TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES, HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, arrowSymbol };

package/package.json

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

package/src/components/charts/legend/legend.scss

@@ -1,8 +1,37 @@
+// shorter height by half a line, so table body is cut off,
+// suggesting there's more to scroll
+$legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
+
+.gl-legend {
+  @include gl-relative;
+}
+
+.gl-chart-h-auto {
+  .gl-legend-inline {
+      // match the height of gl-legend-tabular (header + body)
+      max-height: $gl-line-height-24 + $legend-body-h;
+      @include gl-overflow-auto;
+  }
+}
+
+.gl-legend-tabular,
+.gl-chart-h-auto .gl-legend-inline {
+  &::after {
+    background-image: linear-gradient(to bottom, $transparent-rgba, $white);
+    @include gl-bottom-0;
+    @include gl-content-empty;
+    @include gl-display-block;
+    @include gl-h-4;
+    @include gl-absolute;
+    @include gl-w-full;
+  }
+}
+
 .gl-legend-inline {
-  @include gl-display-flex;
-  @include gl-flex-wrap;
-  @include gl-flex-shrink-0;
-  @include gl-text-gray-900;
+    @include gl-display-flex;
+    @include gl-flex-wrap;
+    @include gl-flex-shrink-0;
+    @include gl-text-gray-900;
 
   .gl-legend-inline-series {
     @include gl-display-flex;
@@ -23,18 +52,6 @@
 }
 
 .gl-legend-tabular {
-  @include gl-relative;
-
-  &::after {
-    background-image: linear-gradient(to bottom, $transparent-rgba, $white);
-    @include gl-bottom-0;
-    @include gl-content-empty;
-    @include gl-display-block;
-    @include gl-h-4;
-    @include gl-absolute;
-    @include gl-w-full;
-  }
-
   .gl-legend-tabular-header {
     @include gl-display-flex;
     @include gl-justify-content-end;
@@ -56,9 +73,7 @@
   }
 
   .gl-legend-tabular-body {
-    // shorter height by half a line, so table body is cut off,
-    // suggesting there's more to scroll
-    height: $gl-spacing-scale-13 - $gl-spacing-scale-4;
+    height: $legend-body-h;
     @include gl-overflow-y-auto;
 
     > *:nth-child(odd) {

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

@@ -1,5 +1,5 @@
 import { GlChart, GlChartLegend } from '../../../charts';
-import { LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
+import { HEIGHT_AUTO_CLASSES, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { generateSeriesData } from '../../../utils/charts/story_config';
 import {
   SERIES_NAME_SHORT,
@@ -43,13 +43,14 @@ const generateSeriesInfo = (amount, nameType) => {
   }));
 };
 
-const generateTemplate = (type) => {
+const generateTemplate = (type, wrapperAttrs = {}, chartAttrs = {}) => {
   const layoutTypeAttribute =
     type === LEGEND_LAYOUT_TABLE ? `:layout="'${LEGEND_LAYOUT_TABLE}'"` : '';
 
-  return `<div>
+  return `<div v-bind='${JSON.stringify(wrapperAttrs)}'>
     <gl-chart
       :options="$options.options"
+      v-bind='${JSON.stringify(chartAttrs)}'
       @created="onCreated"
     />
     <gl-chart-legend
@@ -93,7 +94,7 @@ const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
     ...baseStoryOptions,
     options: generateOptions(seriesLength, seriesNameType),
     seriesInfo: generateSeriesInfo(seriesLength, seriesNameType),
-    template: legendLayoutType ? generateTemplate(legendLayoutType) : generateTemplate(),
+    template: generateTemplate(legendLayoutType),
   };
 };
 
@@ -110,6 +111,24 @@ export const DefaultWithLongSeriesNames = () => getStoryOptions(10, SERIES_NAME_
 export const DefaultWithLongSeriesNamesAndNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES);
 
+export const DefaultWithOverflowingFixedContainerHeight = () => {
+  const storyOptions = getStoryOptions(50, SERIES_NAME_LONG_WITHOUT_SPACES, null);
+
+  storyOptions.template = generateTemplate(
+    null,
+    {
+      class: HEIGHT_AUTO_CLASSES, // line, area, heatmap etc charts all have these classes on the wrapper element in auto height mode
+      style: 'height: 400px; overflow: hidden; outline: 1px solid red;', // Simulate being inside a dashboard panel with fixed height and no overflow
+    },
+    {
+      height: 'auto',
+      class: 'gl-flex-grow-1', // line, area, heatmap etc charts all have gl-flex-grow-1 on the <gl-chart> element in auto height mode
+    }
+  );
+
+  return storyOptions;
+};
+
 export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
 export const WithTabularLayoutAndDisabledLegendItem = () => {
   const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
@@ -123,6 +142,24 @@ export const WithTabularLayoutAndLongSeriesNames = () =>
 export const WithTabularLayoutAndLongSeriesNamesWithNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
 
+export const WithTabularOverflowingFixedContainerHeight = () => {
+  const storyOptions = getStoryOptions(50, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
+
+  storyOptions.template = generateTemplate(
+    LEGEND_LAYOUT_TABLE,
+    {
+      class: HEIGHT_AUTO_CLASSES, // line, area, heatmap etc charts all have these classes on the wrapper element in auto height mode
+      style: 'height: 400px; overflow: hidden; outline: 1px solid red;', // Simulate being inside a dashboard panel with fixed height and no overflow
+    },
+    {
+      height: 'auto',
+      class: 'gl-flex-grow-1', // line, area, heatmap etc charts all have gl-flex-grow-1 on the <gl-chart> element in auto height mode
+    }
+  );
+
+  return storyOptions;
+};
+
 export default {
   title: 'charts/chart-legend',
   component: GlChartLegend,

package/src/components/charts/legend/legend.vue

@@ -172,7 +172,7 @@ export default {
 </script>
 
 <template>
-  <div data-testid="gl-chart-legend">
+  <div class="gl-legend" data-testid="gl-chart-legend">
     <template v-if="layout === $options.legendLayoutTypes.LEGEND_LAYOUT_INLINE">
       <div class="gl-legend-inline">
         <div

package/src/utils/charts/constants.js

@@ -65,5 +65,6 @@ export const CHART_TYPE_BAR = 'bar';
 export const CHART_TYPE_LINE = 'line';
 
 // Constants for height "auto"
-export const HEIGHT_AUTO_CLASSES = 'gl-display-flex gl-flex-direction-column gl-h-full';
+export const HEIGHT_AUTO_CLASSES =
+  'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
 export const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';