fix(legend): width with scroll bar (#1019)

elastic · Feb 11, 2021 · 45bd0d5 · 45bd0d5
1 parent e1da4e5
commit 45bd0d5
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 8 deletions.
diff --git a/...s-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png b/...s-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png
diff --git a/...-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/...-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png
diff --git a/...ries-test-ts-legend-stories-should-adjust-legend-width-for-scrollbar-1-snap.png b/...ries-test-ts-legend-stories-should-adjust-legend-width-for-scrollbar-1-snap.png
diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts
@@ -69,6 +69,12 @@ describe('Legend stories', () => {
     });
   });
 
+  it('should adjust legend width for scrollbar', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&knob-Debug=true&knob-Show Legend=true',
+    );
+  });
+
   describe('Tooltip placement with legend', () => {
     it('should render tooltip with left legend', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--left', {

diff --git a/src/components/legend/_legend.scss b/src/components/legend/_legend.scss
@@ -7,12 +7,6 @@
       grid-row-gap: $echLegendRowGap;
       margin-top: $echLegendRowGap;
       margin-bottom: $echLegendRowGap;
-
-      @include internetExplorerOnly {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-      }
     }
   }
 
@@ -34,7 +28,7 @@
   }
 
   &--debug {
-    background: red;
+    background: rgba(238, 130, 238, 0.2);
     position: relative;
   }
 

diff --git a/src/state/selectors/get_legend_size.ts b/src/state/selectors/get_legend_size.ts
@@ -32,10 +32,12 @@ import { getSettingsSpecSelector } from './get_settings_specs';
 
 const getParentDimensionSelector = (state: GlobalChartState) => state.parentDimensions;
 
+const SCROLL_BAR_WIDTH = 6; // ~1em
 const MARKER_WIDTH = 16;
 const MARKER_LEFT_MARGIN = 4;
 const VALUE_LEFT_MARGIN = 4;
 const VERTICAL_PADDING = 4;
+const TOP_MARGIN = 2;
 
 /** @internal */
 export type LegendSizing = BBox & {
@@ -83,8 +85,13 @@ export const getLegendSizeSelector = createCachedSelector(
       MARKER_WIDTH + MARKER_LEFT_MARGIN + bbox.width + (showLegendDisplayValue ? VALUE_LEFT_MARGIN : 0);
     if (isVerticalAxis(position)) {
       const legendItemHeight = bbox.height + VERTICAL_PADDING * 2;
+      const legendHeight = legendItemHeight * labels.length + TOP_MARGIN;
+      const scollBarDimension = legendHeight > parentDimensions.height ? SCROLL_BAR_WIDTH : 0;
+
       return {
-        width: Math.floor(Math.min(legendItemWidth + spacingBuffer + actionDimension, verticalWidth)),
+        width: Math.floor(
+          Math.min(legendItemWidth + spacingBuffer + actionDimension + scollBarDimension, verticalWidth),
+        ),
         height: legendItemHeight,
         margin,
         position,