[EuiDataGrid] Add new beta rowHeightsOptions.autoBelowLineCount feature flag

packages/eui/changelogs/upcoming/8096.md

@@ -0,0 +1 @@
+- Updated `EuiDataGrid` with a beta `rowHeightsOptions.autoBelowLineCount` feature flag

packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx

@@ -757,6 +757,26 @@ describe('EuiDataGridCell', () => {
         callMethod(component);
         expect(setRowHeight).not.toHaveBeenCalled();
       });
+
+      it('does nothing if cell height is auto or autoBelowLineCount', () => {
+        mockRowHeightUtils.isAutoBelowLineCount.mockReturnValue(true);
+
+        const component = mount(
+          <EuiDataGridCell
+            {...requiredProps}
+            rowHeightsOptions={{
+              autoBelowLineCount: true,
+              defaultHeight: { lineCount: 3 },
+            }}
+            setRowHeight={setRowHeight}
+          />
+        );
+
+        callMethod(component);
+        expect(setRowHeight).not.toHaveBeenCalled();
+
+        mockRowHeightUtils.isAutoBelowLineCount.mockRestore();
+      });
     });
   });
 
@@ -816,6 +836,30 @@ describe('EuiDataGridCell', () => {
       expect(component.find('.eui-textBreakWord').exists()).toBe(true);
       expect(component.find('.euiTextBlockTruncate').exists()).toBe(true);
     });
+
+    test('autoBelowLineCount', () => {
+      mockRowHeightUtils.isAutoBelowLineCount.mockReturnValue(true);
+
+      const component = mount(
+        <EuiDataGridCell
+          {...props}
+          rowHeightsOptions={{
+            autoBelowLineCount: true,
+            defaultHeight: { lineCount: 3 },
+          }}
+        />
+      );
+
+      expect(
+        component
+          .find('div.euiDataGridRowCell__content--autoBelowLineCountHeight')
+          .hasClass(/autoHeight/)
+      ).toBe(true);
+      expect(component.find('.eui-textBreakWord').exists()).toBe(true);
+      expect(component.find('.euiTextBlockTruncate').exists()).toBe(true);
+
+      mockRowHeightUtils.isAutoBelowLineCount.mockRestore();
+    });
   });
 
   // Note: Tests for cell interactivity (focus, tabbing, etc) are in `focus_utils.spec.tsx`

packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx

@@ -69,7 +69,7 @@ const EuiDataGridCellContent: FunctionComponent<
     setCellContentsRef,
     rowIndex,
     colIndex,
-    rowHeight,
+    rowHeightsOptions,
     rowHeightUtils,
     isControlColumn,
     ...rest
@@ -78,11 +78,18 @@ const EuiDataGridCellContent: FunctionComponent<
     const CellElement =
       renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
-    const cellHeightType = useMemo(
-      () => rowHeightUtils?.getHeightType(rowHeight) || 'default',
-      [rowHeightUtils, rowHeight]
+    // Cell height type
+    const rowHeight = rowHeightUtils?.getRowHeightOption(
+      rowIndex,
+      rowHeightsOptions
     );
+    const cellHeightType = useMemo(() => {
+      return rowHeightUtils?.isAutoBelowLineCount(rowHeightsOptions, rowHeight)
+        ? 'autoBelowLineCount'
+        : rowHeightUtils?.getHeightType(rowHeight) || 'default';
+    }, [rowHeightUtils, rowHeight, rowHeightsOptions]);
 
+    // Classes and styles
     const classes = useMemo(
       () =>
         classNames(
@@ -104,7 +111,7 @@ const EuiDataGridCellContent: FunctionComponent<
         : [
             // Regular data cells should always inherit height from the row wrapper,
             // except for auto height
-            cellHeightType === 'auto'
+            cellHeightType === 'auto' || cellHeightType === 'autoBelowLineCount'
               ? styles.content.autoHeight
               : styles.content.defaultHeight,
           ]),
@@ -113,7 +120,9 @@ const EuiDataGridCellContent: FunctionComponent<
     return (
       <RenderTruncatedCellContent
         hasLineCountTruncation={
-          cellHeightType === 'lineCount' && !isControlColumn
+          (cellHeightType === 'lineCount' ||
+            cellHeightType === 'autoBelowLineCount') &&
+          !isControlColumn
         }
         rowHeight={rowHeight}
       >
@@ -201,6 +210,12 @@ export class EuiDataGridCell extends Component<
       rowIndex,
       rowHeightsOptions
     );
+    if (
+      rowHeightUtils?.isAutoBelowLineCount(rowHeightsOptions, rowHeightOption)
+    ) {
+      return; // Using auto height instead
+    }
+
     const isSingleLine = rowHeightOption == null; // Undefined rowHeightsOptions default to a single line
     const lineCount = isSingleLine
       ? 1
@@ -585,11 +600,6 @@ export class EuiDataGridCell extends Component<
       ...cellPropsStyle, // apply anything from setCellProps({ style })
     };
 
-    const rowHeight = rowHeightUtils?.getRowHeightOption(
-      rowIndex,
-      rowHeightsOptions
-    );
-
     const row =
       rowManager && !IS_JEST_ENVIRONMENT
         ? rowManager.getRow({
@@ -628,7 +638,7 @@ export class EuiDataGridCell extends Component<
               isExpandable={isExpandable}
               isExpanded={popoverIsOpen}
               setCellContentsRef={this.setCellContentsRef}
-              rowHeight={rowHeight}
+              rowHeightsOptions={rowHeightsOptions}
               rowHeightUtils={rowHeightUtils}
               isControlColumn={isControlColumn}
               rowIndex={rowIndex}

packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx

@@ -84,11 +84,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<EuiDataGridBodyProps
       /**
        * Row heights
        */
-      const rowHeightUtils = useRowHeightUtils({
-        rowHeightsOptions,
-        gridStyles,
-        columns,
-      });
+      const rowHeightUtils = useRowHeightUtils({ rowHeightsOptions, columns });
 
       const { setRowHeight, getRowHeight } = useDefaultRowHeight({
         rowHeightsOptions,

packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx

@@ -253,7 +253,6 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
           gridItemsRenderedRef: gridItemsRendered,
         },
         rowHeightsOptions,
-        gridStyles,
         columns,
       });
 

packages/eui/src/components/datagrid/controls/display_selector.test.tsx

@@ -266,9 +266,19 @@ describe('useDataGridDisplaySelector', () => {
         expect(getSelection(baseElement, 'rowHeightButtonGroup')).toEqual(
           'static'
         );
+        expect(getByTestSubject('static')).toHaveTextContent('Static');
         expect(getByTestSubject('lineCountNumber')).toHaveValue(1);
       });
 
+      it('renders a "Max" label instead of "Static" if autoBelowLineCount is true', async () => {
+        const { container, getByTestSubject } = render(
+          <MockComponent rowHeightsOptions={{ autoBelowLineCount: true }} />
+        );
+        openPopover(container);
+
+        expect(getByTestSubject('static')).toHaveTextContent('Max');
+      });
+
       it('calls the rowHeightsOptions.onChange callback on user change', async () => {
         const onRowHeightChange = jest.fn();
         const { container, baseElement, getByTestSubject } = render(

packages/eui/src/components/datagrid/controls/display_selector.tsx

@@ -162,6 +162,8 @@ const RowHeightControl = ({
   rowHeightsOptions: EuiDataGridRowHeightsOptions;
   onChange: Function;
 }) => {
+  const { autoBelowLineCount } = rowHeightsOptions;
+
   const [lineCountInput, setLineCountInput] = useState(1);
   const setLineCountHeight = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -227,10 +229,11 @@ const RowHeightControl = ({
         'euiDisplaySelector.rowHeightLabel',
         'euiDisplaySelector.labelAuto',
         'euiDisplaySelector.labelStatic',
+        'euiDisplaySelector.labelMax',
       ]}
-      defaults={['Lines per row', 'Auto', 'Static']}
+      defaults={['Lines per row', 'Auto', 'Static', 'Max']}
     >
-      {([rowHeightLabel, labelAuto, labelStatic]: string[]) => (
+      {([rowHeightLabel, labelAuto, labelStatic, labelMax]: string[]) => (
         <EuiFormRow label={rowHeightLabel} display="columnCompressed">
           <EuiFlexGroup gutterSize="s" responsive={false}>
             <EuiButtonGroup
@@ -240,7 +243,10 @@ const RowHeightControl = ({
               isFullWidth
               options={[
                 { id: rowHeightSelectionOptions[0], label: labelAuto },
-                { id: rowHeightSelectionOptions[1], label: labelStatic },
+                {
+                  id: rowHeightSelectionOptions[1],
+                  label: autoBelowLineCount ? labelMax : labelStatic,
+                },
               ]}
               onChange={setRowHeight}
               idSelected={rowHeightSelection}

packages/eui/src/components/datagrid/data_grid.styles.ts

@@ -80,7 +80,8 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
         }
 
         /* Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 */
-        .euiDataGridRowCell__content--lineCountHeight {
+        .euiDataGridRowCell__content--lineCountHeight,
+        .euiDataGridRowCell__content--autoBelowLineCountHeight {
           ${logicalCSS('padding-bottom', 0)}
           ${logicalCSS(
             'border-bottom',

packages/eui/src/components/datagrid/data_grid_row_heights.stories.tsx

@@ -80,6 +80,27 @@ export const LineCount1: Story = {
   ),
 };
 
+import { faker } from '@faker-js/faker';
+faker.seed(42);
+const loremData = Array.from({ length: 5 }).map((_, i) =>
+  faker.lorem.lines(i % 2 === 0 ? 1 : 20)
+);
+
+export const AutoBelowLineCount: Story = {
+  args: {
+    autoBelowLineCount: true,
+    defaultHeight: { lineCount: 3 },
+  },
+  render: (rowHeightsOptions) => (
+    <StatefulDataGrid
+      {...storyArgs}
+      rowHeightsOptions={rowHeightsOptions}
+      renderCellValue={({ rowIndex }) => loremData[rowIndex]}
+      columns={[{ id: 'name' }, { id: 'location' }]}
+    />
+  ),
+};
+
 export const StaticHeight: Story = {
   args: {
     defaultHeight: { height: 48 },

packages/eui/src/components/datagrid/data_grid_types.ts

@@ -1108,6 +1108,14 @@ export interface EuiDataGridRowHeightsOptions {
    * Defines the default size for all rows. It can be line count or just height.
    */
   defaultHeight?: EuiDataGridRowHeightOption;
+  /**
+   * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+   * *max* number of lines (instead of a set number of lines for all rows).
+   *
+   * This functionality is in beta and has performance implications;
+   * we do not yet fully recommend/support it for heavy production usage.
+   */
+  autoBelowLineCount?: boolean;
   /**
    * Defines the height for a specific row. It can be line count or just height.
    *

packages/eui/src/components/datagrid/utils/__mocks__/row_heights.ts

@@ -24,6 +24,7 @@ export const RowHeightUtils = jest.fn().mockImplementation(() => {
 
   const rowHeightUtilsMock: RowHeightUtilsPublicAPI = {
     getHeightType: jest.fn(rowHeightUtils.getHeightType),
+    isAutoBelowLineCount: jest.fn(() => false),
     isAutoHeight: jest.fn(() => false),
     setRowHeight: jest.fn(),
     pruneHiddenColumnHeights: jest.fn(),

packages/eui/src/components/datagrid/utils/grid_height_width.ts

@@ -141,7 +141,7 @@ export const useUnconstrainedHeight = ({
           rowHeightOption,
           defaultRowHeight,
           correctRowIndex,
-          rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions)
+          rowHeightsOptions
         );
       }
     }