feat: allow long column names in legends and tooltips (#721)

influxdata · Jan 5, 2022 · 24270c7 · 24270c7
1 parent eb71b9b
commit 24270c7
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 15 deletions.
diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",

diff --git a/giraffe/src/components/LegendStyles.ts b/giraffe/src/components/LegendStyles.ts
@@ -9,7 +9,6 @@ import {
 } from '../constants'
 
 const legendColumnGap = '12px'
-const legendColumnMaxWidth = '200px'
 const legendTablePadding = '4px'
 
 const legendColumnOrder = (name: string): number | undefined => {
@@ -180,9 +179,6 @@ const tooltipColumnValueStyle = (
 
   if (switchToVertical) {
     return {
-      maxWidth: legendColumnMaxWidth,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       color,
       display: 'table-cell',
@@ -193,9 +189,6 @@ const tooltipColumnValueStyle = (
   }
 
   return {
-    maxWidth: legendColumnMaxWidth,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     fontWeight: 600,
     lineHeight: '1.125em',
@@ -219,9 +212,6 @@ const staticLegendColumnValueStyle = (
 
   if (switchToVertical) {
     return {
-      maxWidth: legendColumnMaxWidth,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       color,
       display: 'table-cell',
@@ -232,9 +222,6 @@ const staticLegendColumnValueStyle = (
   }
 
   return {
-    maxWidth: legendColumnMaxWidth,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     fontWeight: 600,
     padding: `${STATIC_LEGEND_LINE_SPACING_RATIO}em`,

diff --git a/stories/package.json b/stories/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "license": "MIT",
   "repository": {
     "type": "git",