fix(legend): legend breaking on words (#1458)

elastic · Nov 5, 2021 · c42be98 · c42be98
1 parent afefeaa
commit c42be98
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 3 deletions.
diff --git a/...gend-stories-should-break-multiline-legends-with-long-url-characters-1-snap.png b/...gend-stories-should-break-multiline-legends-with-long-url-characters-1-snap.png
diff --git a/...ies-should-breakup-multiline-legend-labels-with-long-continous-words-1-snap.png b/...ies-should-breakup-multiline-legend-labels-with-long-continous-words-1-snap.png
diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts
@@ -54,6 +54,13 @@ describe('Legend stories', () => {
     );
   });
 
+  it('should break multiline legends with long url characters', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/legend--inside-chart&globals=theme:light&knob-Number of series=5&knob-Series with long name=3&knob-Inside chart_Legend=false&knob-Show legend action_Legend=true&knob-floating columns_Legend=1&knob-vAlign_Legend=bottom&knob-hAlign_Legend=right&knob-direction_Legend=vertical&knob-max label lines_Legend=0&knob-long label_Legend=/people/type:astronauts/name:gregory-chamitoff/profile',
+      { left: 182, top: 178 },
+    );
+  });
+
   it('should render long floating legends inside chart', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
       'http://localhost:9001/?path=/story/legend--inside-chart&globals=theme:light&knob-Number of series=40&knob-Series with long name=0&knob-Inside chart_Legend=true&knob-floating columns_Legend=1&knob-vAlign_Legend=bottom&knob-hAlign_Legend=right&knob-direction_Legend=vertical&knob-max label lines_Legend=1&knob-long label_Legend=long name',

diff --git a/packages/charts/src/components/_mixins.scss b/packages/charts/src/components/_mixins.scss
@@ -0,0 +1,9 @@
+@mixin wrapText {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+  overflow: hidden;
+  min-width: 1px;
+}
diff --git a/packages/charts/src/components/legend/_legend_item.scss b/packages/charts/src/components/legend/_legend_item.scss
@@ -1,3 +1,5 @@
+@import '../mixins';
+
 $legendItemVerticalPadding: $echLegendRowGap / 2;
 $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};
 
@@ -73,15 +75,14 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};
     vertical-align: baseline;
     letter-spacing: unset;
     align-items: center;
+    @include wrapText;
 
     &--singleline {
       @include euiTextTruncate;
     }
 
     // div to prevent changing to button
     &--multiline:is(div) {
-      hyphens: auto;
-      overflow: hidden;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2; // number of lines to show, overridden in element styles

diff --git a/packages/charts/src/components/tooltip/_tooltip.scss b/packages/charts/src/components/tooltip/_tooltip.scss
@@ -1,3 +1,5 @@
+@import '../mixins';
+
 .echTooltip {
   @include euiToolTipStyle;
   @include euiFontSizeXS;
@@ -46,7 +48,7 @@
   }
 
   &__label {
-    hyphens: auto;
+    @include wrapText;
     min-width: 1px;
     flex: 1 1 auto;
   }

diff --git a/storybook/stories/legend/13_inside_chart.story.tsx b/storybook/stories/legend/13_inside_chart.story.tsx
@@ -25,6 +25,7 @@ import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
+import { getLegendAction } from '../utils/components/get_legend_action';
 
 const dg = new SeededDataGenerator();
 const data = dg.generateGroupedSeries(10, 40);
@@ -38,6 +39,7 @@ export const Example = () => {
   });
 
   const floating: LegendPositionConfig['floating'] = boolean('Inside chart', true, 'Legend');
+  const showAction = boolean('Show legend action', false, 'Legend');
   const floatingColumns: LegendPositionConfig['floatingColumns'] = number(
     'floating columns',
     2,
@@ -89,6 +91,7 @@ export const Example = () => {
           floating,
           floatingColumns,
         }}
+        legendAction={showAction ? getLegendAction() : undefined}
         theme={{
           legend: { labelOptions: { maxLines } },
         }}