style(tooltip): increase tooltip width to 500px and truncate items to…

… 2 lines (elastic#2261)
markov00 · Dec 7, 2023 · bde26e4 · bde26e4
1 parent def039b
commit bde26e4
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
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
@@ -415,7 +415,7 @@ export const DARK_THEME: Theme = {
     minHeight: 64,
   },
   tooltip: {
-    maxWidth: 260,
+    maxWidth: 500,
     maxTableHeight: 120,
     defaultDotColor: Colors.White.keyword,
   },

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