Convert height-specific styles to CSS

- Remove unnecessary `flex-grow: 1` - isn't doing anything + start the process of moving out the text truncation/breaking CSS to their className utils
elastic · Oct 4, 2023 · 953e6f7 · 953e6f7
1 parent 92a7d1e
commit 953e6f7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -96,9 +96,10 @@
     text-transform: capitalize;
   }
 
-  .euiDataGridRowCell__definedHeight {
-    @include euiTextBreakWord;
-    flex-grow: 1;
+  .euiDataGridRowCell__lineCountHeight,
+  .euiDataGridRowCell__numericalHeight {
+    height: 100%;
+    overflow: hidden;
   }
 
   // We only truncate if the cell is not a control column.

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -69,21 +69,26 @@ const EuiDataGridCellContent: FunctionComponent<
     const CellElement =
       renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
+    const rowHeightOption = rowHeightUtils?.getRowHeightOption(
+      rowIndex,
+      rowHeightsOptions
+    );
+    const cellHeightType = rowHeightUtils?.getHeightType(rowHeightOption);
+
+    const classes = classNames(
+      `euiDataGridRowCell__${cellHeightType}Height`,
+      {
+        'eui-textBreakWord': cellHeightType !== 'default',
+        'euiDataGridRowCell__truncate': cellHeightType === 'default', // TODO: Convert to .eui-textTruncate
+      }
+    );
+
     return (
       <>
         <div
           ref={setCellContentsRef}
           data-datagrid-cellcontent
-          className={
-            isDefinedHeight
-              ? 'euiDataGridRowCell__definedHeight'
-              : 'euiDataGridRowCell__truncate'
-          }
-          style={
-            isDefinedHeight
-              ? rowHeightUtils?.getStylesForCell(rowHeightsOptions!, rowIndex)
-              : {}
-          }
+          className={classes}
         >
           <CellElement
             isDetails={false}