[EuiDataGrid] Add lineHeight to rowHeightsOptions

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `37.6.1`.
+- Added `lineHeight` to `rowHeightsOptions` in `EuiDataGrid` ([#5140](https://github.com/elastic/eui/pull/5140))
 
 ## [`37.6.1`](https://github.com/elastic/eui/tree/v37.6.1)
 

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

@@ -15,13 +15,13 @@ const dataGridRowHeightOptionsHtml = renderToHtml(DataGridRowHeightOptions);
 
 const rowHeightsSnippet = `rowHeightsOptions = {
   defaultHeight: {
-    lineCount: 2, // default every row to 2 lines of text. Also we can provide height in pixels
+    lineCount: 2, // default every row to 2 lines of text. We can also provide height in pixels
   },
   rowHeights: {
     1: {
-      lineCount: 5, // for row which have index 1 we allow to show 5 lines after that we truncate
+      lineCount: 5, // for the row with index 1 we show 5 lines, after that we truncate
     },
-    4: 140, // for row which have index 4 we set 140 pixel
+    4: 140, // for the row with index 4 we set height to 140 pixels
     5: 80,
   },
 }`;
@@ -45,7 +45,8 @@ export const DataGridRowHeightOptionsExample = {
           <p>
             Row height options can be passed down to the grid through the{' '}
             <EuiCode>rowHeightsOptions</EuiCode> prop. It accepts an object
-            configuring the default height and/or specific row heights:
+            configuring the default height, specific row heights and line
+            height:
           </p>
           <ul>
             <li>
@@ -56,6 +57,10 @@ export const DataGridRowHeightOptionsExample = {
               <EuiCode>rowHeights</EuiCode> - overrides the height for a
               specific row
             </li>
+            <li>
+              <EuiCode>lineHeight</EuiCode> - increases the default line-height
+              when set to <EuiCode>extra</EuiCode>
+            </li>
           </ul>
           <EuiCallOut
             color="warning"

src/components/datagrid/_data_grid_data_row.scss

@@ -146,6 +146,30 @@
   flex-grow: 1;
 }
 
+@include euiDataGridStyles(fontSizeSmall, lineHeightExtra) {
+  @include euiDataGridRowCell {
+    .euiDataGridRowCell__contentByHeight {
+      @include lineHeightFromBaseline(2.5) ;
+    }
+  }
+}
+
+@include euiDataGridStyles(lineHeightExtra) {
+  @include euiDataGridRowCell {
+    .euiDataGridRowCell__contentByHeight {
+      @include lineHeightFromBaseline(3.5);
+    }
+  }
+}
+
+@include euiDataGridStyles(fontSizeLarge, lineHeightExtra) {
+  @include euiDataGridRowCell {
+    .euiDataGridRowCell__contentByHeight {
+      @include lineHeightFromBaseline(3.5);
+    }
+  }
+}
+
 .euiDataGridRowCell__contentByHeight {
   flex-grow: 1;
   height: 100%;
@@ -237,6 +261,14 @@
 
 .euiDataGridRowCell--fontSizeSmall {
   @include euiFontSizeXS;
+
+  &.euiDataGridRowCell--lineHeightExtra {
+    @include lineHeightFromBaseline(2.5);
+  }
+}
+
+.euiDataGridRowCell--lineHeightExtra {
+  @include lineHeightFromBaseline(3.5);
 }
 
 @include euiDataGridStyles(fontSizeLarge) {
@@ -247,6 +279,10 @@
 
 .euiDataGridRowCell--fontSizeLarge {
   @include euiFontSize;
+
+  &.euiDataGridRowCell--lineHeightExtra {
+    @include lineHeightFromBaseline(3.5);
+  }
 }
 
 // Padding alternates

src/components/datagrid/_mixins.scss

@@ -19,6 +19,7 @@ $euiDataGridStyles: (
   'fontSizeLarge'
   'noControls'
   'stickyFooter'
+  'lineHeightExtra'
 );
 
 // All this does is take some of the above and make a sibling selector

src/components/datagrid/data_grid.tsx

@@ -54,6 +54,7 @@ import {
   EuiDataGridStyleBorders,
   EuiDataGridStyleCellPaddings,
   EuiDataGridStyleFontSizes,
+  EuiDataGridRowLineHeights,
   EuiDataGridStyleFooter,
   EuiDataGridStyleHeader,
   EuiDataGridStyleRowHover,
@@ -71,6 +72,13 @@ const fontSizesToClassMap: { [size in EuiDataGridStyleFontSizes]: string } = {
   l: 'euiDataGrid--fontSizeLarge',
 };
 
+const lineHeightsToClassMap: {
+  [size in EuiDataGridRowLineHeights]: string;
+} = {
+  regular: '',
+  extra: 'euiDataGrid--lineHeightExtra',
+};
+
 const headerToClassMap: { [header in EuiDataGridStyleHeader]: string } = {
   shade: 'euiDataGrid--headerShade',
   underline: 'euiDataGrid--headerUnderline',
@@ -489,7 +497,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     minSizeForControls,
     height,
     width,
-    rowHeightsOptions,
+    rowHeightsOptions = { lineHeight: 'regular' },
     ...rest
   } = props;
 
@@ -688,12 +696,13 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const [rowHeightUtils] = useState(new RowHeightUtils());
 
   useEffect(() => {
-    rowHeightUtils.computeStylesForGridCell(gridStyles);
-  }, [gridStyles, rowHeightUtils]);
+    rowHeightUtils.computeStylesForGridCell(gridStyles, rowHeightsOptions);
+  }, [gridStyles, rowHeightsOptions, rowHeightUtils]);
 
   const classes = classNames(
     'euiDataGrid',
     fontSizesToClassMap[gridStyles.fontSize!],
+    lineHeightsToClassMap[rowHeightsOptions.lineHeight!],
     bordersToClassMap[gridStyles.border!],
     headerToClassMap[gridStyles.header!],
     footerToClassMap[gridStyles.footer!],

src/components/datagrid/data_grid_types.ts

@@ -696,6 +696,8 @@ export type EuiDataGridRowHeightOption =
   | number
   | ExclusiveUnion<{ lineCount: number }, { height: number }>;
 
+export type EuiDataGridRowLineHeights = 'regular' | 'extra';
+
 export interface EuiDataGridRowHeightsOptions {
   /**
    * Defines the default size for all rows. It can be line count or just height.
@@ -705,4 +707,8 @@ export interface EuiDataGridRowHeightsOptions {
    * Defines the height for a specific row. It can be line count or just height.
    */
   rowHeights?: Record<number, EuiDataGridRowHeightOption>;
+  /**
+   * Adds extra line-height to cells
+   */
+  lineHeight?: EuiDataGridRowLineHeights;
 }

src/components/datagrid/row_height_utils.ts

@@ -14,6 +14,7 @@ import {
   EuiDataGridStyle,
   EuiDataGridRowHeightOption,
   EuiDataGridRowHeightsOptions,
+  EuiDataGridRowLineHeights,
 } from './data_grid_types';
 
 const cellPaddingsToClassMap: Record<EuiDataGridStyleCellPaddings, string> = {
@@ -28,6 +29,11 @@ const fontSizesToClassMap: Record<EuiDataGridStyleFontSizes, string> = {
   l: 'euiDataGridRowCell--fontSizeLarge',
 };
 
+const lineHeightSizesToClassMap: Record<EuiDataGridRowLineHeights, string> = {
+  regular: '',
+  extra: 'euiDataGridRowCell--lineHeightExtra',
+};
+
 function getNumberFromPx(style?: string) {
   return style ? parseInt(style.replace('px', ''), 10) : 0;
 }
@@ -42,12 +48,18 @@ export class RowHeightUtils {
   } = {};
   private fakeCell = document.createElement('div');
 
-  computeStylesForGridCell(gridStyles: EuiDataGridStyle) {
+  computeStylesForGridCell(
+    gridStyles: EuiDataGridStyle,
+    rowHeightsOptions: EuiDataGridRowHeightsOptions
+  ) {
+    let lineHeight = rowHeightsOptions && rowHeightsOptions.lineHeight;
     this.fakeCell.className = `
       euiDataGridRowCell
       ${cellPaddingsToClassMap[gridStyles.cellPadding!]}
       ${fontSizesToClassMap[gridStyles.fontSize!]}
     `;
+    if (lineHeight === 'extra')
+      this.fakeCell.classList.add(lineHeightSizesToClassMap[lineHeight]);
     document.body.appendChild(this.fakeCell);
     const allStyles = getComputedStyle(this.fakeCell);
     this.styles = {