[UnifiedDataTable] add row line-height override support (#167725)

elastic · Oct 2, 2023 · 66b1c7f · 66b1c7f
1 parent 3f4e53f
commit 66b1c7f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -465,4 +465,27 @@ describe('UnifiedDataTable', () => {
       expect(grid.hasClass('euiDataGrid--bordersNone')).toBeTruthy();
     });
   });
+  describe('rowLineHeightOverride', () => {
+    it('should render the grid with the default row line height if no rowLineHeightOverride is provided', async () => {
+      const component = await getComponent({
+        ...getProps(),
+      });
+
+      const gridRowCell = findTestSubject(component, 'dataGridRowCell').first();
+      expect(gridRowCell.prop('style')).toMatchObject({
+        lineHeight: '1.6em',
+      });
+    });
+    it('should render the grid with row line height override if rowLineHeightOverride is provided', async () => {
+      const component = await getComponent({
+        ...getProps(),
+        rowLineHeightOverride: '24px',
+      });
+
+      const gridRowCell = findTestSubject(component, 'dataGridRowCell').first();
+      expect(gridRowCell.prop('style')).toMatchObject({
+        lineHeight: '24px',
+      });
+    });
+  });
 });
diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -287,6 +287,10 @@ export interface UnifiedDataTableProps {
    * Optional gridStyle override.
    */
   gridStyleOverride?: EuiDataGridStyle;
+  /**
+   * Optional row line height override. Default is 1.6em.
+   */
+  rowLineHeightOverride?: string;
 }
 
 export const EuiDataGridMemoized = React.memo(EuiDataGrid);
@@ -341,6 +345,7 @@ export const UnifiedDataTable = ({
   consumer = 'discover',
   componentsTourSteps,
   gridStyleOverride,
+  rowLineHeightOverride,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
@@ -728,6 +733,7 @@ export const UnifiedDataTable = ({
     storage,
     configRowHeight,
     consumer,
+    rowLineHeight: rowLineHeightOverride,
   });
 
   const isRenderComplete = loadingState !== DataLoadingState.loading;

diff --git a/packages/kbn-unified-data-table/src/constants.ts b/packages/kbn-unified-data-table/src/constants.ts
@@ -22,7 +22,7 @@ export const ROWS_HEIGHT_OPTIONS = {
   single: 0,
   default: -1,
 };
-
+export const defaultRowLineHeight = '1.6em';
 export const defaultMonacoEditorWidth = 370;
 export const defaultTimeColumnWidth = 212;
 export const kibanaJSON = 'kibana-json';

diff --git a/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.ts b/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.ts
@@ -15,14 +15,15 @@ import {
   getStoredRowHeight,
   updateStoredRowHeight,
 } from '../utils/row_heights';
-import { ROWS_HEIGHT_OPTIONS } from '../constants';
+import { defaultRowLineHeight, ROWS_HEIGHT_OPTIONS } from '../constants';
 
 interface UseRowHeightProps {
   rowHeightState?: number;
   onUpdateRowHeight?: (rowHeight: number) => void;
   storage: Storage;
   configRowHeight?: number;
   consumer: string;
+  rowLineHeight?: string;
 }
 
 /**
@@ -57,6 +58,7 @@ export const useRowHeightsOptions = ({
   storage,
   configRowHeight = ROWS_HEIGHT_OPTIONS.default,
   consumer,
+  rowLineHeight = defaultRowLineHeight,
 }: UseRowHeightProps) => {
   return useMemo((): EuiDataGridRowHeightsOptions => {
     const rowHeightFromLS = getStoredRowHeight(storage, consumer);
@@ -79,7 +81,7 @@ export const useRowHeightsOptions = ({
 
     return {
       defaultHeight,
-      lineHeight: '1.6em',
+      lineHeight: rowLineHeight,
       onChange: ({ defaultHeight: newRowHeight }: EuiDataGridRowHeightsOptions) => {
         const newSerializedRowHeight = serializeRowHeight(
           // pressing "Reset to default" triggers onChange with the same value
@@ -89,5 +91,5 @@ export const useRowHeightsOptions = ({
         onUpdateRowHeight?.(newSerializedRowHeight);
       },
     };
-  }, [storage, consumer, rowHeightState, configRowHeight, onUpdateRowHeight]);
+  }, [storage, consumer, rowHeightState, rowLineHeight, configRowHeight, onUpdateRowHeight]);
 };