feat: add padding to fontSize measurement

elastic · Sep 6, 2021 · 9017878 · 9017878
1 parent 5f3cb36
commit 9017878
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/...-stories-test-ts-heatmap-stories-should-maximize-the-label-font-size-1-snap.png b/...-stories-test-ts-heatmap-stories-should-maximize-the-label-font-size-1-snap.png
diff --git a/integration/tests/heatmap_stories.test.ts b/integration/tests/heatmap_stories.test.ts
@@ -17,7 +17,7 @@ describe('Heatmap stories', () => {
     );
   });
   it('should maximize the label fontSize', async () => {
-    await page.setViewport({ width: 360, height: 600 });
+    await page.setViewport({ width: 420, height: 600 });
     await common.expectChartAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/heatmap-alpha--categorical');
   });
 });
diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
@@ -199,8 +199,9 @@ export function shapeViewModel(
       config.cell.label,
       config.cell.label.minFontSize,
       config.cell.label.maxFontSize,
-      cellWidthInner,
-      cellHeightInner,
+      // adding 4px padding per side to avoid that text touches the edges
+      cellWidthInner - 8,
+      cellHeightInner - 8,
     );
 
     acc[cellKey] = {

diff --git a/storybook/main.js b/storybook/main.js
@@ -21,4 +21,7 @@ module.exports = {
   reactOptions: {
     fastRefresh: true,
   },
+  typescript: {
+    reactDocgen: false,
+  },
 };