Added lineHeight configuration to rowHeightOptions

chandlerprall · Sep 9, 2021 · 57aa7b6 · 57aa7b6
1 parent eca5d49
commit 57aa7b6
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 12 deletions.
diff --git a/src-docs/src/views/datagrid/row_height_options.js b/src-docs/src/views/datagrid/row_height_options.js
@@ -83,16 +83,17 @@ export default () => {
 
   const rowHeightsOptions = useMemo(
     () => ({
+      lineHeight: '3rem',
       defaultHeight: {
         lineCount: 2,
       },
-      rowHeights: {
-        1: {
-          lineCount: 5,
-        },
-        4: 140,
-        5: 80,
-      },
+      // rowHeights: {
+      //   1: {
+      //     lineCount: 5,
+      //   },
+      //   4: 140,
+      //   5: 80,
+      // },
     }),
     []
   );

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap
@@ -996,6 +996,7 @@ exports[`EuiDataGridBody renders 1`] = `
                       Object {
                         "height": 34,
                         "left": 0,
+                        "lineHeight": undefined,
                         "position": "absolute",
                         "top": "0px",
                         "width": 20,
@@ -1230,6 +1231,7 @@ exports[`EuiDataGridBody renders 1`] = `
                       Object {
                         "height": 34,
                         "left": 20,
+                        "lineHeight": undefined,
                         "position": "absolute",
                         "top": "0px",
                         "width": undefined,

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
@@ -22,6 +22,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
@@ -333,7 +333,7 @@ export class EuiDataGridCell extends Component<
       style,
       ...rest
     } = this.props;
-    const { rowIndex } = rest;
+    const { rowIndex, rowHeightsOptions } = rest;
 
     const showCellButtons =
       this.state.isFocused ||
@@ -359,7 +359,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
@@ -572,6 +572,7 @@ describe('EuiDataGrid', () => {
               "color": "red",
               "height": 34,
               "left": 0,
+              "lineHeight": undefined,
               "position": "absolute",
               "top": "100px",
               "width": 100,
@@ -591,6 +592,7 @@ describe('EuiDataGrid', () => {
               "color": "blue",
               "height": 34,
               "left": 100,
+              "lineHeight": undefined,
               "position": "absolute",
               "top": "100px",
               "width": 100,
@@ -610,6 +612,7 @@ describe('EuiDataGrid', () => {
               "color": "red",
               "height": 34,
               "left": 0,
+              "lineHeight": undefined,
               "position": "absolute",
               "top": "134px",
               "width": 100,
@@ -629,6 +632,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
@@ -688,8 +688,11 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const [rowHeightUtils] = useState(new RowHeightUtils());
 
   useEffect(() => {
-    rowHeightUtils.computeStylesForGridCell(gridStyles);
-  }, [gridStyles, 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
@@ -705,4 +705,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
@@ -42,12 +42,19 @@ export class RowHeightUtils {
   } = {};
   private fakeCell = document.createElement('div');
 
-  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 = {