Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(legend): legend breaking on words #1458

Merged
merged 1 commit into from
Nov 5, 2021
Merged

fix(legend): legend breaking on words #1458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...gend-stories-should-break-multiline-legends-with-long-url-characters-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ies-should-breakup-multiline-legend-labels-with-long-continous-words-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions integration/tests/legend_stories.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
9 changes: 9 additions & 0 deletions packages/charts/src/components/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 3 additions & 2 deletions packages/charts/src/components/legend/_legend_item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../mixins';

$legendItemVerticalPadding: $echLegendRowGap / 2;
$legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};

Expand Down Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion packages/charts/src/components/tooltip/_tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../mixins';

.echTooltip {
@include euiToolTipStyle;
@include euiFontSizeXS;
Expand Down Expand Up @@ -46,7 +48,7 @@
}

&__label {
hyphens: auto;
@include wrapText;
min-width: 1px;
flex: 1 1 auto;
}
Expand Down
3 changes: 3 additions & 0 deletions storybook/stories/legend/13_inside_chart.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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,
Expand Down Expand Up @@ -89,6 +91,7 @@ export const Example = () => {
floating,
floatingColumns,
}}
legendAction={showAction ? getLegendAction() : undefined}
theme={{
legend: { labelOptions: { maxLines } },
}}
Expand Down