fix: labels with long words, now hyphenated

elastic · Aug 5, 2021 · bdee07e · bdee07e
1 parent 88ebac5
commit bdee07e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts
@@ -48,6 +48,12 @@ describe('Legend stories', () => {
     );
   });
 
+  it('should breakup multiline legend labels with long continous words', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/legend--inside-chart&globals=backgrounds.value:transparent;themes.value:Light&knob-Inside chart_Legend=&knob-Legend position_Legend=right&knob-Multiline_Label options=true&knob-Multiline_Legend=true&knob-Number of series=5&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-long label_Legend=a few separate words then averyongcontinuouswordthatneedstobebrokenup&knob-vAlign_Legend=bottom&knob-multiline label_Legend=true',
+    );
+  });
+
   it('should render color picker on mouse click', async () => {
     const action = async () => {
       await common.clickMouseRelativeToDOMElement({ left: 0, top: 0 }, '.echLegendItem__color');

diff --git a/packages/charts/src/components/legend/_legend_item.scss b/packages/charts/src/components/legend/_legend_item.scss
@@ -73,6 +73,7 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};
     vertical-align: baseline;
     letter-spacing: unset;
     align-items: center;
+    hyphens: auto;
 
     &:not(&--multiline) {
       @include euiTextTruncate;

diff --git a/packages/charts/src/components/tooltip/_tooltip.scss b/packages/charts/src/components/tooltip/_tooltip.scss
@@ -46,8 +46,7 @@
   }
 
   &__label {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
+    hyphens: auto;
     min-width: 1px;
     flex: 1 1 auto;
   }