[Utils] Remove getStylesForCell

cee-chen · cee-chen · commit 92a7d1eb8111 · 2023-10-04T15:10:39.000-07:00
- in favor of a more agnostic height-type util

- We'll be replacing the line count styles with the new `EuiTextBlockTruncate` component

- NOTE: the `height: 100%` style needs to be retained for `lineCount` and `numerical` height types, hence the new util that will be passed to a CSS class
diff --git a/src/components/datagrid/utils/__mocks__/row_heights.ts b/src/components/datagrid/utils/__mocks__/row_heights.ts
@@ -24,11 +24,7 @@ export const RowHeightUtils = jest.fn().mockImplementation(() => {
 
   const rowHeightUtilsMock: RowHeightUtilsPublicAPI = {
     cacheStyles: jest.fn(),
-    getStylesForCell: jest.fn(() => ({
-      wordWrap: 'break-word',
-      wordBreak: 'break-word',
-      flexGrow: 1,
-    })),
+    getHeightType: jest.fn(rowHeightUtils.getHeightType),
     isAutoHeight: jest.fn(() => false),
     setRowHeight: jest.fn(),
     pruneHiddenColumnHeights: jest.fn(),
diff --git a/src/components/datagrid/utils/row_heights.test.ts b/src/components/datagrid/utils/row_heights.test.ts
@@ -184,34 +184,22 @@ describe('RowHeightUtils', () => {
         });
       });
     });
+  });
 
-    describe('getStylesForCell (returns inline CSS styles based on height config)', () => {
-      describe('auto height', () => {
-        it('returns empty styles object', () => {
-          expect(
-            rowHeightUtils.getStylesForCell({ defaultHeight: 'auto' }, 0)
-          ).toEqual({});
-        });
-      });
-
-      describe('lineCount height', () => {
-        it('returns line-clamp CSS', () => {
-          expect(
-            rowHeightUtils.getStylesForCell(
-              { defaultHeight: { lineCount: 5 } },
-              0
-            )
-          ).toEqual(expect.objectContaining({ WebkitLineClamp: 5 }));
-        });
-      });
-
-      describe('numeric heights', () => {
-        it('returns default CSS', () => {
-          expect(
-            rowHeightUtils.getStylesForCell({ defaultHeight: 34 }, 0)
-          ).toEqual({ height: '100%', overflow: 'hidden' });
-        });
-      });
+  describe('getHeightType', () => {
+    it('returns a string enum based on rowHeightsOptions', () => {
+      expect(rowHeightUtils.getHeightType(undefined)).toEqual('default');
+      expect(rowHeightUtils.getHeightType('auto')).toEqual('auto');
+      expect(rowHeightUtils.getHeightType({ lineCount: 3 })).toEqual(
+        'lineCount'
+      );
+      expect(rowHeightUtils.getHeightType({ lineCount: 0 })).toEqual(
+        'lineCount'
+      );
+      expect(rowHeightUtils.getHeightType({ height: 100 })).toEqual(
+        'numerical'
+      );
+      expect(rowHeightUtils.getHeightType(100)).toEqual('numerical');
     });
   });
 
diff --git a/src/components/datagrid/utils/row_heights.ts b/src/components/datagrid/utils/row_heights.ts
@@ -7,7 +7,6 @@
  */
 
 import {
-  CSSProperties,
   MutableRefObject,
   useCallback,
   useContext,
@@ -107,31 +106,21 @@ export class RowHeightUtils {
     };
   }
 
-  getStylesForCell = (
-    rowHeightsOptions: EuiDataGridRowHeightsOptions,
-    rowIndex: number
-  ): CSSProperties => {
-    const height = this.getRowHeightOption(rowIndex, rowHeightsOptions);
+  /**
+   * Height types
+   */
 
-    if (height === AUTO_HEIGHT) {
-      return {};
+  getHeightType = (option?: EuiDataGridRowHeightOption) => {
+    if (option == null) {
+      return 'default';
     }
-
-    const lineCount = this.getLineCount(height);
-    if (lineCount) {
-      return {
-        WebkitLineClamp: lineCount,
-        display: '-webkit-box',
-        WebkitBoxOrient: 'vertical',
-        height: '100%',
-        overflow: 'hidden',
-      };
+    if (option === AUTO_HEIGHT) {
+      return 'auto';
     }
-
-    return {
-      height: '100%',
-      overflow: 'hidden',
-    };
+    if (this.getLineCount(option) != null) {
+      return 'lineCount';
+    }
+    return 'numerical';
   };
 
   /**
