feat: increase tooltip width to 500px and truncate items to 2 lines (#…

…2261) feat: truncate to 2 + width 500
elastic · Nov 29, 2023 · afdef1c · afdef1c
1 parent 4703681
commit afdef1c
Show file tree

Hide file tree

Showing 13 changed files with 18 additions and 18 deletions.
diff --git a/...tories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png b/...tories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png
diff --git a/...ots/tooltip/chart-types/flamegraph/hide-prompt-with-no-actions-chrome-linux.png b/...ots/tooltip/chart-types/flamegraph/hide-prompt-with-no-actions-chrome-linux.png
diff --git a/...napshots/tooltip/chart-types/flamegraph/pinning-with-selection-chrome-linux.png b/...napshots/tooltip/chart-types/flamegraph/pinning-with-selection-chrome-linux.png
diff --git a/...pshots/tooltip/chart-types/flamegraph/show-prompt-with-actions-chrome-linux.png b/...pshots/tooltip/chart-types/flamegraph/show-prompt-with-actions-chrome-linux.png
diff --git a/...snapshots/tooltip/chart-types/partition/pinning-with-selection-chrome-linux.png b/...snapshots/tooltip/chart-types/partition/pinning-with-selection-chrome-linux.png
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/_text.scss b/packages/charts/src/chart_types/metric/renderer/dom/_text.scss
@@ -1,12 +1,3 @@
-@mixin lineClamp($maxLines) {
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $maxLines; /* number of lines to show */
-  line-clamp: $maxLines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
 .echMetricText {
   position: relative;
   padding: 8px;

diff --git a/packages/charts/src/components/_mixins.scss b/packages/charts/src/components/_mixins.scss
@@ -7,3 +7,12 @@
   overflow: hidden;
   min-width: 1px;
 }
+
+@mixin lineClamp($maxLines) {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $maxLines; /* number of lines to show */
+  line-clamp: $maxLines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
diff --git a/packages/charts/src/components/tooltip/components/_tooltip.scss b/packages/charts/src/components/tooltip/components/_tooltip.scss
@@ -56,7 +56,7 @@ $transitionTime: 200ms;
   }
 
   .echTooltip__tableCell--truncate {
-    @include euiTextTruncate;
+    @include lineClamp(2);
   }
 
   &__metricRow {

diff --git a/packages/charts/src/components/tooltip/placement.ts b/packages/charts/src/components/tooltip/placement.ts
@@ -25,7 +25,7 @@ export function getStylesFromPlacement(
     case 'top-end':
     case 'bottom-end':
       return {
-        width: maxWidth,
+        maxWidth,
         justifyContent: 'flex-end',
       };
     case 'right':
@@ -34,21 +34,21 @@ export function getStylesFromPlacement(
     case 'top-start':
     case 'bottom-start':
       return {
-        width: maxWidth,
+        maxWidth,
         justifyContent: 'flex-start',
       };
     case 'top':
     case 'bottom':
       return {
-        width: maxWidth,
+        maxWidth,
         justifyContent: 'center',
       };
     case 'auto':
     case 'auto-start':
     case 'auto-end':
     default:
       return {
-        width: maxWidth,
+        maxWidth,
       };
   }
 }
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
@@ -416,7 +416,7 @@ export const DARK_THEME: Theme = {
   },
   bulletGraph: DARK_THEME_BULLET_STYLE,
   tooltip: {
-    maxWidth: 260,
+    maxWidth: 500,
     maxTableHeight: 120,
     defaultDotColor: Colors.White.keyword,
   },

diff --git a/packages/charts/src/utils/themes/legacy_dark_theme.ts b/packages/charts/src/utils/themes/legacy_dark_theme.ts
@@ -422,7 +422,7 @@ export const LEGACY_DARK_THEME: Theme = {
   },
   bulletGraph: DARK_THEME_BULLET_STYLE,
   tooltip: {
-    maxWidth: 260,
+    maxWidth: 500,
     maxTableHeight: 120,
     defaultDotColor: Colors.White.keyword,
   },

diff --git a/packages/charts/src/utils/themes/legacy_light_theme.ts b/packages/charts/src/utils/themes/legacy_light_theme.ts
@@ -421,7 +421,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
   },
   bulletGraph: LIGHT_THEME_BULLET_STYLE,
   tooltip: {
-    maxWidth: 260,
+    maxWidth: 500,
     maxTableHeight: 120,
     defaultDotColor: Colors.Black.keyword,
   },

diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
@@ -415,7 +415,7 @@ export const LIGHT_THEME: Theme = {
   },
   bulletGraph: LIGHT_THEME_BULLET_STYLE,
   tooltip: {
-    maxWidth: 260,
+    maxWidth: 500,
     maxTableHeight: 120,
     defaultDotColor: Colors.Black.keyword,
   },