[7811] Fix row heights not changing on gridStyle or `rowHeightsOpti…

…ons.lineHeight` change - requires waterfalling `gridStyles` down to EuiDataGridCell
elastic · Sep 14, 2024 · 0d8b6ed · 0d8b6ed
1 parent 32c984d
commit 0d8b6ed
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 1 deletion.
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx
@@ -45,6 +45,7 @@ describe('EuiDataGridCell', () => {
     ),
     popoverContext: mockPopoverContext,
     rowHeightUtils: mockRowHeightUtils,
+    gridStyles: {},
   };
 
   beforeEach(() => jest.clearAllMocks());

diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx
@@ -283,7 +283,11 @@ export class EuiDataGridCell extends Component<
 
     if (
       this.props.rowHeightsOptions?.defaultHeight !==
-      prevProps.rowHeightsOptions?.defaultHeight
+        prevProps.rowHeightsOptions?.defaultHeight ||
+      this.props.rowHeightsOptions?.lineHeight !==
+        prevProps.rowHeightsOptions?.lineHeight ||
+      this.props.gridStyles?.fontSize !== prevProps.gridStyles?.fontSize ||
+      this.props.gridStyles?.cellPadding !== prevProps.gridStyles?.cellPadding
     ) {
       this.recalculateLineHeight();
     }
@@ -338,6 +342,12 @@ export class EuiDataGridCell extends Component<
     if (nextProps.width !== this.props.width) return true;
     if (nextProps.rowHeightsOptions !== this.props.rowHeightsOptions)
       return true;
+    if (nextProps.gridStyles?.fontSize !== this.props.gridStyles?.fontSize)
+      return true;
+    if (
+      nextProps.gridStyles?.cellPadding !== this.props.gridStyles?.cellPadding
+    )
+      return true;
     if (nextProps.renderCellValue !== this.props.renderCellValue) return true;
     if (nextProps.renderCellPopover !== this.props.renderCellPopover)
       return true;

diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx
@@ -22,6 +22,7 @@ describe('Cell', () => {
     renderCellValue: () => null,
     interactiveCellId: '',
     rowHeightUtils: new RowHeightUtils(),
+    gridStyles: {},
     schema: {},
     schemaDetectors,
     columns: [{ id: 'C' }],

diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
@@ -29,6 +29,7 @@ export type CellProps = Pick<
   | 'cellContext'
   | 'renderCellPopover'
   | 'interactiveCellId'
+  | 'gridStyles'
   | 'rowHeightsOptions'
   | 'rowHeightUtils'
   | 'rowManager'

diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -143,6 +143,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
       setRowHeight,
       rowHeightsOptions,
       rowHeightUtils,
+      gridStyles,
     };
   }, [
     schema,
@@ -161,6 +162,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
     setRowHeight,
     rowHeightsOptions,
     rowHeightUtils,
+    gridStyles,
   ]);
 
   const Cell = useCallback<EuiDataGridCustomBodyProps['Cell']>(

diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx
@@ -337,6 +337,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
           rowManager,
           pagination,
           headerRowHeight,
+          gridStyles,
         };
       }, [
         schemaDetectors,
@@ -357,6 +358,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
         rowManager,
         pagination,
         headerRowHeight,
+        gridStyles,
       ]);
 
       const rowWrapperContextValue = useMemo(() => {

diff --git a/packages/eui/src/components/datagrid/body/footer/data_grid_footer_row.tsx b/packages/eui/src/components/datagrid/body/footer/data_grid_footer_row.tsx
@@ -61,6 +61,7 @@ const EuiDataGridFooterRow = memo(
         visibleRowIndex,
         interactiveCellId,
         popoverContext,
+        gridStyles,
       };
 
       return (

diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts
@@ -639,6 +639,7 @@ export interface EuiDataGridCellProps {
   rowHeightUtils?: RowHeightUtilsType;
   rowManager?: EuiDataGridRowManager;
   pagination?: Required<EuiDataGridPaginationProps>;
+  gridStyles: EuiDataGridStyle;
 }
 
 export interface EuiDataGridCellState {