[EuiDataGrid] Add lineHeight configuration to rowHeightsOptions

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Updated `EuiRangeLevel` `color` property to accept CSS color values ([#5171](https://github.com/elastic/eui/pull/5171))
 - Added optional visual line highlighting to `EuiCodeBlock` ([#5207](https://github.com/elastic/eui/pull/5207))
 - Added `popoverProps` to `EuiSuperSelect` and deprecated `popoverClassName` & `repositionOnScroll` ([#5214](https://github.com/elastic/eui/pull/5214))
+- Added `lineHeight` configuration to `rowHeightsOptions` in `EuiDataGrid` ([#5221](https://github.com/elastic/eui/pull/5221))
 
 **Bug fixes**
 

src-docs/src/views/datagrid/datagrid_height_options_example.js

@@ -12,26 +12,55 @@ import {
 
 import { EuiDataGridRowHeightsOptions } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
 
+import DataGridRowLineHeight from './row_line_height';
+const dataGridRowLineHeightSource = require('!!raw-loader!./row_height_auto');
 import DataGridRowHeightOptions from './row_height_fixed';
 const dataGridRowHeightOptionsSource = require('!!raw-loader!./row_height_fixed');
 import DataGridRowAutoHeight from './row_height_auto';
 const dataGridRowAutoHeightSource = require('!!raw-loader!./row_height_auto');
 
+const lineHeightSnippet = `rowHeightsOptions = {
+  defaultHeight: {
+    lineCount: 3 // default every row to 3 lines of text
+  },
+  lineHeight: '2em', // default every cell line-height to 2em
+}`;
+
+const lineHeightFullSnippet = `const rowHeightsOptions = useMemo(
+  () => ({
+    defaultHeight: {
+      lineCount: 3,
+    },
+    lineHeight: '2em';
+  }),
+  []
+);
+
+<EuiDataGrid
+  aria-label="Data grid with line height set"
+  columns={columns}
+  columnVisibility={{ visibleColumns, setVisibleColumns }}
+  rowCount={rowCount}
+  height={400}
+  renderCellValue={renderCellValue}
+  rowHeightsOptions={rowHeightsOptions}
+/>
+`;
+
 const rowHeightsSnippet = `rowHeightsOptions = {
   defaultHeight: 140, // default every row to 140px
   rowHeights: {
     1: {
-      lineCount: 5, // for row which have index 1 we allow to show 5 lines after that we truncate
+      lineCount: 5, // row at index 1 will show 5 lines
     },
-    4: 200, // for row which have index 4 we set 140 pixel
+    4: 200, // row at index 4 will adjust the height to 200px
     5: 80,
   },
 }`;
 
 const rowHeightsFullSnippet = `const rowHeightsOptions = useMemo(
   () => ({
-    defaultHeight: {
-      lineCount: 2,
+    defaultHeight: 140,
   }),
   []
 );
@@ -110,24 +139,44 @@ export const DataGridRowHeightOptionsExample = {
           By default, all rows get a height of <strong>34 pixels</strong>, but
           there are scenarios where you might want to adjust the height to fit
           more content. To do that, you can pass an object to the{' '}
-          <EuiCode>rowHeightsOptions</EuiCode> prop. This object accepts two
+          <EuiCode>rowHeightsOptions</EuiCode> prop. This object accepts three
           properties:
         </p>
         <ul>
           <li>
-            <EuiCode>defaultHeight</EuiCode> - defines the default size for all
-            rows
+            <EuiCode>defaultHeight</EuiCode>
+            <ul>
+              <li>defines the default size for all rows</li>
+              <li>
+                can be configured with an exact pixel height, a line count, or{' '}
+                <EuiCode>&quot;auto&quot;</EuiCode> to fit all content
+              </li>
+            </ul>
+          </li>
+          <li>
+            <EuiCode>rowHeights</EuiCode>
+            <ul>
+              <li>overrides the height for a specific row</li>
+              <li>
+                can be configured with an exact pixel height, a line count, or{' '}
+                <EuiCode>&quot;auto&quot;</EuiCode> to fit all content
+              </li>
+            </ul>
           </li>
           <li>
-            <EuiCode>rowHeights</EuiCode> - overrides the height for a specific
-            row
+            <EuiCode>lineHeight</EuiCode>
+            <ul>
+              <li>
+                sets a default line height for all cells, which is used to
+                calculate row height
+              </li>
+              <li>
+                accepts any value that the <EuiCode>line-height</EuiCode> CSS
+                property normally takes (e.g. px, ems, rems, or unitless)
+              </li>
+            </ul>
           </li>
         </ul>
-        <p>
-          Each of these can be configured with an exact pixel height, a line
-          count, or <EuiCode>&quot;auto&quot;</EuiCode> to fit all of the
-          content. See the examples below for more details.
-        </p>
       </EuiText>
       <EuiSpacer />
       <EuiCallOut color="warning" title="Rows have minimum height requirements">
@@ -145,19 +194,55 @@ export const DataGridRowHeightOptionsExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: dataGridRowHeightOptionsSource,
+          code: dataGridRowLineHeightSource,
         },
       ],
-      title: 'Fixed heights for rows',
+      title: 'Setting a default height and line height for rows',
       text: (
         <Fragment>
           <p>
             You can change the default height for all rows by passing a line
             count or pixel value to the <EuiCode>defaultHeight</EuiCode>{' '}
-            property.
+            property, and customize the line height of all cells with the{' '}
+            <EuiCode>lineHeight</EuiCode> property.
           </p>
+          <EuiCodeBlock language="javascript" paddingSize="s" isCopyable>
+            {lineHeightSnippet}
+          </EuiCodeBlock>
+          <EuiCallOut
+            color="warning"
+            title="Make sure your line heights match!"
+          >
+            <p>
+              NOTE: If you wrap your cell content with CSS that overrides/sets
+              line-height (e.g. in an <EuiCode>EuiText</EuiCode>), your row
+              heights will not be calculated correctly! Make sure to match the
+              passed <EuiCode>lineHeight</EuiCode> property to the actual cell
+              content line height.
+            </p>
+          </EuiCallOut>
+        </Fragment>
+      ),
+      components: { DataGridRowLineHeight },
+      props: {
+        EuiDataGrid,
+        EuiDataGridRowHeightsOptions,
+      },
+      demo: <DataGridRowLineHeight />,
+      snippet: lineHeightFullSnippet,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridRowHeightOptionsSource,
+        },
+      ],
+      title: 'Overriding specific row heights',
+      text: (
+        <Fragment>
           <p>
-            You can also override the height of a specific row by passing a
+            You can override the default height of a specific row by passing a
             <EuiCode>rowHeights</EuiCode> object associating the row&apos;s
             index with a specific height configuration.
           </p>

src-docs/src/views/datagrid/row_height_auto.tsx

@@ -136,7 +136,7 @@ const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
       content = <EuiMarkdownFormat>{item.body ?? ''}</EuiMarkdownFormat>;
     } else {
       // a full issue description is a *lot* to shove into a cell
-      content = content = (
+      content = (
         <EuiMarkdownFormat textSize="relative">
           {(item.body ?? '').slice(0, 300)}
         </EuiMarkdownFormat>

src-docs/src/views/datagrid/row_height_fixed.tsx

@@ -136,7 +136,7 @@ const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
       content = <EuiMarkdownFormat>{item.body ?? ''}</EuiMarkdownFormat>;
     } else {
       // a full issue description is a *lot* to shove into a cell
-      content = content = (
+      content = (
         <EuiMarkdownFormat textSize="relative">
           {(item.body ?? '').slice(0, 300)}
         </EuiMarkdownFormat>

src-docs/src/views/datagrid/row_line_height.tsx

@@ -0,0 +1,182 @@
+import React, {
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  ReactNode,
+} from 'react';
+// @ts-ignore not configured to import json
+import githubData from './row_auto_height_data.json';
+
+import { formatDate } from '../../../../src/services';
+
+import {
+  EuiDataGrid,
+  EuiDataGridProps,
+} from '../../../../src/components/datagrid';
+
+interface DataShape {
+  html_url: string;
+  title: string;
+  user: {
+    login: string;
+    avatar_url: string;
+  };
+  labels: Array<{
+    name: string;
+    color: string;
+  }>;
+  comments: number;
+  created_at: string;
+  body?: string;
+}
+
+// convert strings to Date objects
+for (let i = 0; i < githubData.length; i++) {
+  githubData[i].created_at = new Date(githubData[i].created_at);
+}
+
+type DataContextShape =
+  | undefined
+  | {
+      data: DataShape[];
+    };
+const DataContext = createContext<DataContextShape>(undefined);
+
+const columns = [
+  {
+    id: 'index',
+    displayAsText: 'Index',
+    isExpandable: false,
+    initialWidth: 80,
+  },
+  {
+    id: 'issue',
+    displayAsText: 'Issue',
+    isExpandable: false,
+  },
+  {
+    id: 'body',
+    displayAsText: 'Description',
+  },
+];
+
+// it is expensive to compute 10000 rows of fake data
+// instead of loading up front, generate entries on the fly
+const raw_data: DataShape[] = githubData;
+
+const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+  rowIndex,
+  columnId,
+  isDetails,
+}) => {
+  const { data } = useContext(DataContext)!;
+
+  const item = data[rowIndex];
+  let content: ReactNode = '';
+
+  if (columnId === 'index') {
+    content = <>{rowIndex}</>;
+  } else if (columnId === 'issue') {
+    content = (
+      <>
+        <strong>{item.title}</strong>
+        <br />
+        Opened by {item.user.login} on {formatDate(item.created_at, 'dobLong')}
+        <br />
+        {item.comments} comment{item.comments !== 1 ? 's' : ''}
+      </>
+    );
+  } else if (columnId === 'body') {
+    if (isDetails) {
+      // expanded in a popover
+      content = item.body;
+    } else {
+      // a full issue description is a *lot* to shove into a cell
+      content = (item.body ?? '').slice(0, 300);
+    }
+  }
+
+  return content;
+};
+
+export default () => {
+  // ** Pagination config
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
+
+  // ** Sorting config
+  const [sortingColumns, setSortingColumns] = useState([]);
+  const onSort = useCallback(
+    (sortingColumns) => {
+      setSortingColumns(sortingColumns);
+    },
+    [setSortingColumns]
+  );
+
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) =>
+      setPagination((pagination) => ({
+        ...pagination,
+        pageSize,
+        pageIndex: 0,
+      })),
+    [setPagination]
+  );
+
+  const onChangePage = useCallback(
+    (pageIndex) =>
+      setPagination((pagination) => ({ ...pagination, pageIndex })),
+    [setPagination]
+  );
+
+  // Column visibility
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  ); // initialize to the full set of columns
+
+  // matches the snippet example
+  const rowHeightsOptions = useMemo(
+    () => ({
+      defaultHeight: {
+        lineCount: 3,
+      },
+      lineHeight: '2em',
+    }),
+    []
+  );
+
+  const dataContext = useMemo<DataContextShape>(
+    () => ({
+      data: raw_data,
+    }),
+    []
+  );
+
+  return (
+    <DataContext.Provider value={dataContext}>
+      <EuiDataGrid
+        aria-label="Row height options with auto demo"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        rowCount={raw_data.length}
+        height={400}
+        renderCellValue={RenderCellValue}
+        inMemory={{ level: 'sorting' }}
+        sorting={{ columns: sortingColumns, onSort }}
+        rowHeightsOptions={rowHeightsOptions}
+        virtualizationOptions={{
+          // rough average of the cell heights in the example
+          // accurately setting this smooths out the scrolling experience
+          estimatedRowHeight: 96,
+        }}
+        pagination={{
+          ...pagination,
+          pageSizeOptions: [50, 250, 1000],
+          onChangeItemsPerPage: onChangeItemsPerPage,
+          onChangePage: onChangePage,
+        }}
+      />
+    </DataContext.Provider>
+  );
+};

src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap

@@ -38,6 +38,7 @@ exports[`EuiDataGridCell renders 1`] = `
     role="gridcell"
     style={
       Object {
+        "lineHeight": undefined,
         "width": undefined,
       }
     }