[EuiDataGrid] Various row height fixes

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());
@@ -202,6 +203,12 @@ describe('EuiDataGridCell', () => {
         it('rowHeightsOptions', () => {
           component.setProps({ rowHeightsOptions: { defaultHeight: 'auto' } });
         });
+        it('gridStyles.fontSize', () => {
+          component.setProps({ gridStyles: { fontSize: 's' } });
+        });
+        it('gridStyles.cellPadding', () => {
+          component.setProps({ gridStyles: { cellPadding: 'l' } });
+        });
         it('renderCellValue', () => {
           component.setProps({ renderCellValue: () => <div>test</div> });
         });
@@ -254,7 +261,10 @@ describe('EuiDataGridCell', () => {
     });
 
     it('should not update for prop/state changes not specified above', () => {
-      component.setProps({ className: 'test' });
+      component.setProps({
+        className: 'test',
+        gridStyles: { header: 'underline' },
+      });
       expect(shouldComponentUpdate).toHaveReturnedWith(false);
     });
   });
@@ -653,19 +663,41 @@ describe('EuiDataGridCell', () => {
         });
       });
 
-      it('recalculates when rowHeightsOptions.defaultHeight.lineCount changes', () => {
+      it('recalculates when props that affect row/line height change', () => {
         const component = mount(
           <EuiDataGridCell
             {...requiredProps}
-            rowHeightsOptions={{ defaultHeight: { lineCount: 7 } }}
+            rowHeightsOptions={{ defaultHeight: { lineCount: 4 } }}
             setRowHeight={setRowHeight}
           />
         );
+        component.setProps({
+          rowHeightsOptions: { defaultHeight: { lineCount: 2 } },
+        });
+        expect(setRowHeight).toHaveBeenCalledTimes(1);
+
+        // Other props that can affect row heights
 
+        const rowHeightsOptionsWithLineHeight = {
+          defaultHeight: { lineCount: 2 },
+          lineHeight: '3',
+        };
         component.setProps({
-          rowHeightsOptions: { defaultHeight: { lineCount: 6 } },
+          rowHeightsOptions: rowHeightsOptionsWithLineHeight,
         });
-        expect(setRowHeight).toHaveBeenCalled();
+        expect(setRowHeight).toHaveBeenCalledTimes(2);
+
+        component.setProps({
+          rowHeightsOptions: rowHeightsOptionsWithLineHeight,
+          gridStyles: { cellPadding: 'l' },
+        });
+        expect(setRowHeight).toHaveBeenCalledTimes(3);
+
+        component.setProps({
+          rowHeightsOptions: rowHeightsOptionsWithLineHeight,
+          gridStyles: { cellPadding: 'l', fontSize: 'l' },
+        });
+        expect(setRowHeight).toHaveBeenCalledTimes(4);
       });
 
       it('calculates undefined heights as single rows with a lineCount of 1', () => {

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;

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' }],

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'

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']>(

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(() => {

packages/eui/src/components/datagrid/body/footer/data_grid_footer_row.tsx

@@ -61,6 +61,7 @@ const EuiDataGridFooterRow = memo(
         visibleRowIndex,
         interactiveCellId,
         popoverContext,
+        gridStyles,
       };
 
       return (

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 {