Added lineHeight configuration to rowHeightOptions

elastic · Sep 28, 2021 · 7ab940d · 7ab940d
1 parent 91abf40
commit 7ab940d
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 8 deletions.
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
@@ -38,6 +38,7 @@ exports[`EuiDataGridCell renders 1`] = `
     role="gridcell"
     style={
       Object {
+        "lineHeight": undefined,
         "width": undefined,
       }
     }

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -406,7 +406,7 @@ export class EuiDataGridCell extends Component<
       style,
       ...rest
     } = this.props;
-    const { rowIndex } = rest;
+    const { rowIndex, rowHeightsOptions } = rest;
 
     const showCellButtons =
       this.state.isFocused ||
@@ -432,7 +432,12 @@ export class EuiDataGridCell extends Component<
       className: classNames(cellClasses, this.state.cellProps.className),
     };
 
-    cellProps.style = { ...style, width, ...cellProps.style };
+    cellProps.style = {
+      ...style, // from react-window
+      width, // column width, can be undefined
+      lineHeight: rowHeightsOptions?.lineHeight ?? undefined, // lineHeight configuration
+      ...cellProps.style, // apply anything from setCellProps({style})
+    };
 
     const handleCellKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
       if (isExpandable) {

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
@@ -545,6 +545,7 @@ describe('EuiDataGrid', () => {
               "color": "red",
               "height": 34,
               "left": 0,
+              "lineHeight": undefined,
               "position": "absolute",
               "top": "100px",
               "width": 100,
@@ -564,6 +565,7 @@ describe('EuiDataGrid', () => {
               "color": "blue",
               "height": 34,
               "left": 100,
+              "lineHeight": undefined,
               "position": "absolute",
               "top": "100px",
               "width": 100,
@@ -583,6 +585,7 @@ describe('EuiDataGrid', () => {
               "color": "red",
               "height": 34,
               "left": 0,
+              "lineHeight": undefined,
               "position": "absolute",
               "top": "134px",
               "width": 100,
@@ -602,6 +605,7 @@ describe('EuiDataGrid', () => {
               "color": "blue",
               "height": 34,
               "left": 100,
+              "lineHeight": undefined,
               "position": "absolute",
               "top": "134px",
               "width": 100,

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
@@ -693,11 +693,24 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   }, [focusedCell, contentRef]);
 
   useEffect(() => {
-    rowHeightUtils.computeStylesForGridCell({
-      cellPadding: gridStyles.cellPadding,
-      fontSize: gridStyles.fontSize,
-    });
-  }, [gridStyles.cellPadding, gridStyles.fontSize, rowHeightUtils]);
+    rowHeightUtils.computeStylesForGridCell(
+      {
+        cellPadding: gridStyles.cellPadding,
+        fontSize: gridStyles.fontSize,
+      },
+      rowHeightsOptions?.lineHeight
+    );
+  }, [
+    gridStyles.cellPadding,
+    gridStyles.fontSize,
+    rowHeightsOptions?.lineHeight,
+    rowHeightUtils,
+  ]);
+  //   rowHeightUtils.computeStylesForGridCell(
+  //     gridStyles,
+  //     rowHeightsOptions?.lineHeight
+  //   );
+  // }, [gridStyles, rowHeightUtils, rowHeightsOptions?.lineHeight]);
 
   const classes = classNames(
     'euiDataGrid',

diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -719,4 +719,8 @@ export interface EuiDataGridRowHeightsOptions {
    * Defines the height for a specific row. It can be line count or just height.
    */
   rowHeights?: Record<number, EuiDataGridRowHeightOption>;
+  /**
+   * Defines a global lineHeight style to apply to all cells
+   */
+  lineHeight?: string;
 }
diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts
@@ -136,12 +136,19 @@ export class RowHeightUtils {
     return false;
   }
 
-  computeStylesForGridCell(gridStyles: EuiDataGridStyle) {
+  computeStylesForGridCell(
+    gridStyles: EuiDataGridStyle,
+    lineHeight: string | undefined
+  ) {
     this.fakeCell.className = `
       euiDataGridRowCell
       ${cellPaddingsToClassMap[gridStyles.cellPadding!]}
       ${fontSizesToClassMap[gridStyles.fontSize!]}
     `;
+
+    // @ts-ignore it is valid to set `lineHeight` to undefined
+    this.fakeCell.style.lineHeight = lineHeight;
+
     document.body.appendChild(this.fakeCell);
     const allStyles = getComputedStyle(this.fakeCell);
     this.styles = {