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

elastic · Oct 6, 2020 · 2de2c70 · 2de2c70
1 parent 55af328
commit 2de2c70
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
@@ -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

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
@@ -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>
   );
 };