[EuiDataGrid] Add lineHeight configuration to rowHeightsOptions (#5221)

* Added lineHeight configuration to rowHeightOptions * Changelog entry * Add documentation section + example - Add new example that uses same dataset as other 2 on page, but makes it text only (lineHeight doesn't work as expected with nested <EuiText> - Update existing documentation, make 'fixed' example more of a demo of rowHeights overrides * Misc existing documentation fixes - Fix awkward grammar which was tweaked in another spot in the docs - fix defaultHeight snippet example that was missing a closing brace (change it to static #, since I added a lineCount example already earlier in the page) - fix redundant = * [PR feedback] Documentation copy Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> * [PR feedback] Capitalization * Add `rowHeightsOptions` to main data grid docs page Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>
elastic · Sep 30, 2021 · 9a5b78d · 9a5b78d
1 parent dea0bd4
commit 9a5b78d
Show file tree

Hide file tree

Showing 12 changed files with 348 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ No public interface changes since `38.2.0`.
 - 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**
 

diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js
@@ -9,6 +9,7 @@ import {
   EuiDescriptionList,
   EuiCodeBlock,
   EuiText,
+  EuiLink,
   EuiSpacer,
 } from '../../../../src/components';
 
@@ -107,6 +108,14 @@ const gridSnippet = `
       rowHover: 'highlight',
       header: 'shade',
     }}
+    // Optional. Allows configuring the heights of grid rows
+    rowHeightsOptions={{
+      defaultHeight: 34,
+      rowHeights: {
+        0: auto
+      },
+      lineHeight: '1em',
+    }}
     // Optional. Provide additional schemas to use in the grid.
     // This schema 'franchise' essentially acts like a boolean, looking for Star Wars or Star Trek in a column.
     schemaDetectors={[
@@ -222,6 +231,20 @@ const gridConcepts = [
     description:
       'The total number of rows in the dataset (used by e.g. pagination to know how many pages to list).',
   },
+  {
+    title: 'rowHeightsOptions',
+    description: (
+      <span>
+        Allows configuring both default and specific heights of grid rows.
+        Accepts a partial <strong>EuiDataGridRowHeightsOptions</strong> object.
+        See{' '}
+        <EuiLink href="/#/tabular-content/data-grid-row-heights-options">
+          Data grid row heights options
+        </EuiLink>{' '}
+        for more details and examples.
+      </span>
+    ),
+  },
   {
     title: 'gridStyle',
     description: (

diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/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>
+              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 or
+              inherit 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>

diff --git a/src-docs/src/views/datagrid/row_height_auto.tsx b/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>

diff --git a/src-docs/src/views/datagrid/row_height_fixed.tsx b/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>