PieWidgetUI: Fix tooltip & ChartLegend styles (#787)

CartoDB · Oct 16, 2023 · 806ec4b · 806ec4b
1 parent edff5a2
commit 806ec4b
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Not released
 
+- PieWidgetUI: Fix tooltip & ChartLegend styles [#787](https://github.com/CartoDB/carto-react/pull/787)
+
 ## 2.2
 
 ### 2.2.12 (2023-10-10)

diff --git a/packages/react-ui/src/widgets/ChartLegend.js b/packages/react-ui/src/widgets/ChartLegend.js
@@ -34,7 +34,7 @@ const OverflowVeil = styled(Box)(({ theme }) => ({
   left: theme.spacing(-2),
   top: theme.spacing(1),
   bottom: theme.spacing(1),
-  zIndex: 10,
+  zIndex: 1,
   width: theme.spacing(2.5),
   background: `linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.palette.background.paper} 100%)`
 }));

diff --git a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js
@@ -278,7 +278,7 @@ function tooltipFormatter(params) {
   const markerStyle = `display:inline-block;border-radius:4px;width:8px;height:8px;background-color:${markerColor}`;
 
   return `
-    <p style="font-size:11px;font-weight:500;line-height:1.454;text-transform:uppercase;margin:0 0 4px 0;">${params.name}</p>
-    <p style="display:flex;align-items:center;font-size: 11px;font-weight:500;line-height:1.454;margin:0;"><span style="${markerStyle}"></span> <span style="margin:0 4px;font-weight:400;">${value}</span> (${params.percent}%)</p>
+    <div style="white-space:normal;"><p style="max-width:${CHART_SIZE};font-size:11px;font-weight:500;line-height:1.454;text-transform:uppercase;margin:0 0 4px 0;">${params.name}</p>
+    <p style="display:flex;align-items:center;font-size: 11px;font-weight:500;line-height:1.454;margin:0;"><span style="${markerStyle}"></span> <span style="margin:0 4px;font-weight:400;">${value}</span> (${params.percent}%)</p></div>
   `.trim();
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,8 @@ @@
     ## Not released
+    - PieWidgetUI: Fix tooltip & ChartLegend styles [#787](https://github.com/CartoDB/carto-react/pull/787)
     ## 2.2
     ### 2.2.12 (2023-10-10)
@@ Expand Down @@