[Lens] Break long titles into multiple lines (#79580)

This commit is contained in:
Wylie Conlon 2020-10-06 11:50:44 -04:00 committed by GitHub
parent 55af3285dc
commit 2de2c70f75
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 1 deletions

View file

@ -50,6 +50,7 @@
width: 100%;
padding: $euiSizeS;
min-height: $euiSizeXXL - 2;
word-break: break-word;
&:focus {
background-color: transparent !important; // sass-lint:disable-line no-important

View file

@ -229,6 +229,13 @@ export function onDrop(props: DatasourceDimensionDropHandlerProps<IndexPatternPr
return true;
}
function wrapOnDot(str?: string) {
// u200B is a non-width white-space character, which allows
// the browser to efficiently word-wrap right after the dot
// without us having to draw a lot of extra DOM elements, etc
return str ? str.replace(/\./g, '.\u200B') : '';
}
export const IndexPatternDimensionTriggerComponent = function IndexPatternDimensionTrigger(
props: IndexPatternDimensionTriggerProps
) {
@ -249,6 +256,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
if (!selectedColumn) {
return null;
}
const formattedLabel = wrapOnDot(uniqueLabel);
const triggerLinkA11yText = i18n.translate('xpack.lens.configure.editConfig', {
defaultMessage: 'Click to edit configuration or drag to move',
@ -299,7 +307,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
aria-label={triggerLinkA11yText}
title={triggerLinkA11yText}
>
{uniqueLabel}
{formattedLabel}
</EuiLink>
);
};