From bdee07e25cc4134418eb7b3901b3ae3683c98e7e Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 5 Aug 2021 12:24:26 -0500 Subject: [PATCH] fix: labels with long words, now hyphenated --- integration/tests/legend_stories.test.ts | 6 ++++++ packages/charts/src/components/legend/_legend_item.scss | 1 + packages/charts/src/components/tooltip/_tooltip.scss | 3 +-- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts index 4ccbc9eed7..7b8ecbaaa1 100644 --- 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 index 96d71008dc..2ec391f269 100644 --- 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 index 9e53efaa00..a8890837d4 100644 --- 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; }