From 9c0ac2cb52a069fb10a8d662684b1e4695a2ebda Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 9 Sep 2021 13:00:05 -0600 Subject: [PATCH 1/7] Added lineHeight configuration to rowHeightOptions --- .../__snapshots__/data_grid_cell.test.tsx.snap | 1 + .../datagrid/body/data_grid_cell.tsx | 9 +++++++-- src/components/datagrid/data_grid.test.tsx | 4 ++++ src/components/datagrid/data_grid.tsx | 18 +++++++++++++----- src/components/datagrid/data_grid_types.ts | 4 ++++ src/components/datagrid/row_height_utils.ts | 9 ++++++++- 6 files changed, 37 insertions(+), 8 deletions(-) diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index f9378b7c4dc..6293227a1cb 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/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, } } diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index f5eca7ff69e..0260120b12f 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -406,7 +406,7 @@ export class EuiDataGridCell extends Component< style, ...rest } = this.props; - const { rowIndex } = rest; + const { rowIndex, rowHeightsOptions } = rest; const showCellButtons = this.state.isFocused || @@ -432,7 +432,12 @@ export class EuiDataGridCell extends Component< className: classNames(cellClasses, this.state.cellProps.className), }; - cellProps.style = { ...style, width, ...cellProps.style }; + cellProps.style = { + ...style, // from react-window + width, // column width, can be undefined + lineHeight: rowHeightsOptions?.lineHeight ?? undefined, // lineHeight configuration + ...cellProps.style, // apply anything from setCellProps({style}) + }; const handleCellKeyDown = (event: KeyboardEvent) => { if (isExpandable) { diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index 18966b6046d..3c8e019537f 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -545,6 +545,7 @@ describe('EuiDataGrid', () => { "color": "red", "height": 34, "left": 0, + "lineHeight": undefined, "position": "absolute", "top": "100px", "width": 100, @@ -564,6 +565,7 @@ describe('EuiDataGrid', () => { "color": "blue", "height": 34, "left": 100, + "lineHeight": undefined, "position": "absolute", "top": "100px", "width": 100, @@ -583,6 +585,7 @@ describe('EuiDataGrid', () => { "color": "red", "height": 34, "left": 0, + "lineHeight": undefined, "position": "absolute", "top": "134px", "width": 100, @@ -602,6 +605,7 @@ describe('EuiDataGrid', () => { "color": "blue", "height": 34, "left": 100, + "lineHeight": undefined, "position": "absolute", "top": "134px", "width": 100, diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index b41984e7079..09e959c19d9 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -693,11 +693,19 @@ export const EuiDataGrid: FunctionComponent = (props) => { }, [focusedCell, contentRef]); useEffect(() => { - rowHeightUtils.computeStylesForGridCell({ - cellPadding: gridStyles.cellPadding, - fontSize: gridStyles.fontSize, - }); - }, [gridStyles.cellPadding, gridStyles.fontSize, rowHeightUtils]); + rowHeightUtils.computeStylesForGridCell( + { + cellPadding: gridStyles.cellPadding, + fontSize: gridStyles.fontSize, + }, + rowHeightsOptions?.lineHeight + ); + }, [ + gridStyles.cellPadding, + gridStyles.fontSize, + rowHeightsOptions?.lineHeight, + rowHeightUtils, + ]); const classes = classNames( 'euiDataGrid', diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 3ab5c00d620..cd367e31372 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -719,4 +719,8 @@ export interface EuiDataGridRowHeightsOptions { * Defines the height for a specific row. It can be line count or just height. */ rowHeights?: Record; + /** + * Defines a global lineHeight style to apply to all cells + */ + lineHeight?: string; } diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index 862eb9355ff..8ade9c469b4 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -136,12 +136,19 @@ export class RowHeightUtils { return false; } - computeStylesForGridCell(gridStyles: EuiDataGridStyle) { + computeStylesForGridCell( + gridStyles: EuiDataGridStyle, + lineHeight: string | undefined + ) { this.fakeCell.className = ` euiDataGridRowCell ${cellPaddingsToClassMap[gridStyles.cellPadding!]} ${fontSizesToClassMap[gridStyles.fontSize!]} `; + + // @ts-ignore it is valid to set `lineHeight` to undefined + this.fakeCell.style.lineHeight = lineHeight; + document.body.appendChild(this.fakeCell); const allStyles = getComputedStyle(this.fakeCell); this.styles = { From 332ccfaea3b1a1dacaef51e1b2d05b952d3fe669 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 28 Sep 2021 13:40:37 -0700 Subject: [PATCH 2/7] Changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ec90aef2999..605be3b0a17 100644 --- a/CHANGELOG.md +++ b/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** From cc59b27318ea68c16b966bd82731382efb6cb92a Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 28 Sep 2021 13:55:15 -0700 Subject: [PATCH 3/7] 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 - Update existing documentation, make 'fixed' example more of a demo of rowHeights overrides --- .../datagrid_height_options_example.js | 114 +++++++++-- .../src/views/datagrid/row_line_height.tsx | 182 ++++++++++++++++++ 2 files changed, 282 insertions(+), 14 deletions(-) create mode 100644 src-docs/src/views/datagrid/row_line_height.tsx diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js index 4799ab28685..82b6826c3cb 100644 --- a/src-docs/src/views/datagrid/datagrid_height_options_example.js +++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js @@ -12,11 +12,41 @@ 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'; + }), + [] +); + + +`; + const rowHeightsSnippet = `rowHeightsOptions = { defaultHeight: 140, // default every row to 140px rowHeights: { @@ -110,24 +140,44 @@ export const DataGridRowHeightOptionsExample = { By default, all rows get a height of 34 pixels, 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{' '} - rowHeightsOptions prop. This object accepts two + rowHeightsOptions prop. This object accepts three properties:

  • - defaultHeight - defines the default size for all - rows + defaultHeight +
      +
    • defines the default size for all rows
      • +
    • + can be configured with an exact pixel height, a line count, or{' '} + "auto" to fit all content +
      • +
    +
    • +
  • + rowHeights +
      +
    • overrides the height for a specific row
      • +
    • + can be configured with an exact pixel height, a line count, or{' '} + "auto" to fit all content +
      • +
  • - rowHeights - overrides the height for a specific - row + lineHeight +
      +
    • + sets a default line height for all cells, which is used to + calculate row height +
      • +
    • + accepts any value that the line-height CSS + property normally takes (e.g. px, ems, rems, or unitless) +
      • +
-

- Each of these can be configured with an exact pixel height, a line - count, or "auto" to fit all of the - content. See the examples below for more details. -

@@ -145,19 +195,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: (

You can change the default height for all rows by passing a line count or pixel value to the defaultHeight{' '} - property. + property, and customize the line height of all cells with the{' '} + lineHeight property.

+ + {lineHeightSnippet} + + +

+ NOTE: If you wrap your cell content with CSS that overrides/sets + line-height (e.g. in an EuiText), your row + heights will not be calculated correctly! Make sure to match the + passed lineHeight property to the actual cell + content line height. +

+ + + ), + components: { DataGridRowLineHeight }, + props: { + EuiDataGrid, + EuiDataGridRowHeightsOptions, + }, + demo: , + snippet: lineHeightFullSnippet, + }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: dataGridRowHeightOptionsSource, + }, + ], + title: 'Overriding specific row heights', + text: ( +

- 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 rowHeights object associating the row's index with a specific height configuration.

diff --git a/src-docs/src/views/datagrid/row_line_height.tsx b/src-docs/src/views/datagrid/row_line_height.tsx new file mode 100644 index 00000000000..d79b9b86326 --- /dev/null +++ b/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(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 = ( + <> + {item.title} +
+ Opened by {item.user.login} on {formatDate(item.created_at, 'dobLong')} +
+ {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( + () => ({ + data: raw_data, + }), + [] + ); + + return ( + + + + ); +}; From dcf2e9dbacf334dce8bf1ee4fc5c4ba8732084cd Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 28 Sep 2021 13:56:24 -0700 Subject: [PATCH 4/7] 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 = --- .../src/views/datagrid/datagrid_height_options_example.js | 7 +++---- src-docs/src/views/datagrid/row_height_auto.tsx | 2 +- src-docs/src/views/datagrid/row_height_fixed.tsx | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js index 82b6826c3cb..8b010849701 100644 --- a/src-docs/src/views/datagrid/datagrid_height_options_example.js +++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js @@ -51,17 +51,16 @@ 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, }), [] ); diff --git a/src-docs/src/views/datagrid/row_height_auto.tsx b/src-docs/src/views/datagrid/row_height_auto.tsx index 5771102da0d..0951408c859 100644 --- 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 = {item.body ?? ''}; } else { // a full issue description is a *lot* to shove into a cell - content = content = ( + content = ( {(item.body ?? '').slice(0, 300)} diff --git a/src-docs/src/views/datagrid/row_height_fixed.tsx b/src-docs/src/views/datagrid/row_height_fixed.tsx index d2f0f330cae..91df500a1ca 100644 --- 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 = {item.body ?? ''}; } else { // a full issue description is a *lot* to shove into a cell - content = content = ( + content = ( {(item.body ?? '').slice(0, 300)} From 69d77e2c95bffb7c179eea27e48122b99d21dbc1 Mon Sep 17 00:00:00 2001 From: Constance Date: Thu, 30 Sep 2021 09:00:19 -0700 Subject: [PATCH 5/7] [PR feedback] Documentation copy Co-authored-by: Elizabet Oliveira --- .../src/views/datagrid/datagrid_height_options_example.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js index 8b010849701..b9730d0668a 100644 --- a/src-docs/src/views/datagrid/datagrid_height_options_example.js +++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js @@ -214,11 +214,11 @@ export const DataGridRowHeightOptionsExample = { title="Make sure your line heights match!" >

- NOTE: If you wrap your cell content with CSS that overrides/sets + If you wrap your cell content with CSS that overrides/sets line-height (e.g. in an EuiText), your row - heights will not be calculated correctly! Make sure to match the - passed lineHeight property to the actual cell - content line height. + heights will not be calculated correctly! Make sure to match or inherit + the passed lineHeight property to the actual + cell content line height.

From 0f5a4f7798b535c838952bb87316d27ed761c856 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 30 Sep 2021 09:03:19 -0700 Subject: [PATCH 6/7] [PR feedback] Capitalization --- .../datagrid_height_options_example.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js index 8b010849701..596d9d2afd9 100644 --- a/src-docs/src/views/datagrid/datagrid_height_options_example.js +++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js @@ -146,9 +146,9 @@ export const DataGridRowHeightOptionsExample = {
  • defaultHeight
      -
    • defines the default size for all rows
      • +
    • Defines the default size for all rows
    • - can be configured with an exact pixel height, a line count, or{' '} + Can be configured with an exact pixel height, a line count, or{' '} "auto" to fit all content
    @@ -156,9 +156,9 @@ export const DataGridRowHeightOptionsExample = {
  • rowHeights
      -
    • overrides the height for a specific row
      • +
    • Overrides the height for a specific row
    • - can be configured with an exact pixel height, a line count, or{' '} + Can be configured with an exact pixel height, a line count, or{' '} "auto" to fit all content
    @@ -167,11 +167,11 @@ export const DataGridRowHeightOptionsExample = { lineHeight
    • - sets a default line height for all cells, which is used to + Sets a default line height for all cells, which is used to calculate row height
    • - accepts any value that the line-height CSS + Accepts any value that the line-height CSS property normally takes (e.g. px, ems, rems, or unitless)
    @@ -214,11 +214,11 @@ export const DataGridRowHeightOptionsExample = { title="Make sure your line heights match!" >

    - NOTE: If you wrap your cell content with CSS that overrides/sets + If you wrap your cell content with CSS that overrides/sets line-height (e.g. in an EuiText), your row - heights will not be calculated correctly! Make sure to match the - passed lineHeight property to the actual cell - content line height. + heights will not be calculated correctly! Make sure to match or + inherit the passed lineHeight property to the + actual cell content line height.

    From 55a10693ba10b5c990f8a9809a98950d4b47be23 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 30 Sep 2021 09:21:32 -0700 Subject: [PATCH 7/7] Add `rowHeightsOptions` to main data grid docs page --- .../src/views/datagrid/datagrid_example.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js index 0084d15f759..5e6123c2446 100644 --- 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: ( + + Allows configuring both default and specific heights of grid rows. + Accepts a partial EuiDataGridRowHeightsOptions object. + See{' '} + + Data grid row heights options + {' '} + for more details and examples. + + ), + }, { title: 'gridStyle', description: (