fix: text margin top (#448)

src/pivot-table/__tests__/test-with-providers.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import type { App, Model } from "../../types/QIX";
 import type { ExtendedSelections } from "../../types/types";
 import type { RootProps } from "../Root";
-import { DEFAULT_CELL_HEIGHT } from "../constants";
+import { CELL_PADDING_HEIGHT, DEFAULT_CELL_HEIGHT } from "../constants";
 import BaseProvider from "../contexts/BaseProvider";
 import SelectionsProvider from "../contexts/SelectionsProvider";
 import StyleProvider from "../contexts/StyleProvider";
@@ -77,6 +77,8 @@ const TestWithProvider = (props: Props) => {
       },
       headerCellHeight: DEFAULT_CELL_HEIGHT,
       contentCellHeight: DEFAULT_CELL_HEIGHT,
+      contentRowHeight: DEFAULT_CELL_HEIGHT,
+      contentTextHeight: DEFAULT_CELL_HEIGHT - CELL_PADDING_HEIGHT,
     },
     app = { getField: () => Promise.resolve() } as unknown as App,
     model = { applyPatches: () => Promise.resolve(), getLayout: () => Promise.resolve({}) } as unknown as Model,

src/pivot-table/components/cells/DimensionValue/ExpandOrCollapseIcon.tsx

@@ -45,7 +45,7 @@ const ExpandOrCollapseIcon = ({ cell, dataModel, isLeftColumn, isCellSelected }:
   const disableOnClickHandler = !interactions.active || isActive || !dataModel;
   const color = getColor({ cell, styleService, isCellSelected });
   const opacity = isActive ? 0.4 : 1.0;
-  const halfCellHeight = styleService.contentCellHeight / 2;
+  const halfCellHeight = styleService.contentRowHeight / 2;
   const Icon = cell.ref.qCanExpand ? PlusOutlineIcon : MinusOutlineIcon;
   let expandOrCollapse: ExpandOrCollapser | undefined;
 

src/pivot-table/components/cells/DimensionValue/Text.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from "react";
 import type { Cell, StyleService } from "../../../../types/types";
-import { DEFAULT_LINE_CLAMP, LINE_HEIGHT_COEFFICIENT } from "../../../constants";
+import { DEFAULT_LINE_CLAMP } from "../../../constants";
 import { CELL_PADDING, getLineClampStyle, textStyle } from "../../shared-styles";
 import { getColor, getFontStyle, getFontWeight, getTextDecoration } from "./utils/get-style";
 
@@ -12,11 +12,8 @@ type Props = {
   children: ReactNode;
 };
 
-const getMarginTop = (styleService: StyleService) => {
-  const textHeight = parseInt(styleService.dimensionValues.fontSize, 10) * LINE_HEIGHT_COEFFICIENT;
-
-  return styleService.contentCellHeight / 2 - textHeight / 2;
-};
+const getMarginTop = (styleService: StyleService) =>
+  styleService.contentRowHeight / 2 - styleService.contentTextHeight / 2;
 
 const Text = ({ children, cell, styleService, isCellSelected, isLeftColumn }: Props): JSX.Element => (
   <span

src/pivot-table/contexts/__mocks__/StyleProvider.tsx

@@ -60,6 +60,8 @@ export const useStyleContext = (): StyleService => ({
   },
   headerCellHeight: 24,
   contentCellHeight: 24,
+  contentRowHeight: 24,
+  contentTextHeight: 16,
 });
 
 const StyleProvider = (): JSX.Element => <div />;

src/services/__tests__/style-service.test.ts

@@ -141,6 +141,8 @@ describe("style-service", () => {
       },
       headerCellHeight: 32,
       contentCellHeight: 48,
+      contentRowHeight: 24,
+      contentTextHeight: 16,
     } as StyleService);
   });
 
@@ -207,6 +209,8 @@ describe("style-service", () => {
       },
       headerCellHeight: 32,
       contentCellHeight: 56,
+      contentRowHeight: 28,
+      contentTextHeight: 20,
     } as StyleService);
   });
 
@@ -274,6 +278,8 @@ describe("style-service", () => {
       },
       headerCellHeight: 32,
       contentCellHeight: 24,
+      contentRowHeight: 24,
+      contentTextHeight: 16,
     } as StyleService);
   });
 });

src/services/style-service.ts

@@ -238,6 +238,10 @@ const createStyleService = (theme: ExtendedTheme, layoutService: LayoutService):
     DEFAULT_CELL_HEIGHT,
   );
 
+  styleService.contentRowHeight = styleService.contentCellHeight / lineClamp;
+
+  styleService.contentTextHeight = styleService.contentRowHeight - CELL_PADDING_HEIGHT;
+
   return styleService;
 };
 

src/types/types.ts

@@ -243,6 +243,8 @@ export type StyleService = ThemeStyling & {
   header: CellStyling & { hoverBackground: string; activeBackground: string };
   headerCellHeight: number;
   contentCellHeight: number;
+  contentRowHeight: number;
+  contentTextHeight: number;
 };
 
 export type ActivelySortedColumn = {