style(tooltip): increase width to 500px and 2 lines items (#2261) (#2275

) Backport of #2261
elastic · Dec 7, 2023 · 465a6bc · 465a6bc
1 parent 5034852
commit 465a6bc
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 16 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
@@ -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,
   },