From 92a7d1eb811148468dd4c7f7b10e4ca45dc9ed2c Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 10:29:47 -0700 Subject: [PATCH 01/16] [Utils] Remove `getStylesForCell` - in favor of a more agnostic height-type util - We'll be replacing the line count styles with the new `EuiTextBlockTruncate` component - NOTE: the `height: 100%` style needs to be retained for `lineCount` and `numerical` height types, hence the new util that will be passed to a CSS class --- .../datagrid/utils/__mocks__/row_heights.ts | 6 +-- .../datagrid/utils/row_heights.test.ts | 42 +++++++------------ src/components/datagrid/utils/row_heights.ts | 35 ++++++---------- 3 files changed, 28 insertions(+), 55 deletions(-) diff --git a/src/components/datagrid/utils/__mocks__/row_heights.ts b/src/components/datagrid/utils/__mocks__/row_heights.ts index 0528c89d2cb..e06b4957d9d 100644 --- a/src/components/datagrid/utils/__mocks__/row_heights.ts +++ b/src/components/datagrid/utils/__mocks__/row_heights.ts @@ -24,11 +24,7 @@ export const RowHeightUtils = jest.fn().mockImplementation(() => { const rowHeightUtilsMock: RowHeightUtilsPublicAPI = { cacheStyles: jest.fn(), - getStylesForCell: jest.fn(() => ({ - wordWrap: 'break-word', - wordBreak: 'break-word', - flexGrow: 1, - })), + getHeightType: jest.fn(rowHeightUtils.getHeightType), isAutoHeight: jest.fn(() => false), setRowHeight: jest.fn(), pruneHiddenColumnHeights: jest.fn(), diff --git a/src/components/datagrid/utils/row_heights.test.ts b/src/components/datagrid/utils/row_heights.test.ts index 643ac31ef1a..a7b8c832a73 100644 --- a/src/components/datagrid/utils/row_heights.test.ts +++ b/src/components/datagrid/utils/row_heights.test.ts @@ -184,34 +184,22 @@ describe('RowHeightUtils', () => { }); }); }); + }); - describe('getStylesForCell (returns inline CSS styles based on height config)', () => { - describe('auto height', () => { - it('returns empty styles object', () => { - expect( - rowHeightUtils.getStylesForCell({ defaultHeight: 'auto' }, 0) - ).toEqual({}); - }); - }); - - describe('lineCount height', () => { - it('returns line-clamp CSS', () => { - expect( - rowHeightUtils.getStylesForCell( - { defaultHeight: { lineCount: 5 } }, - 0 - ) - ).toEqual(expect.objectContaining({ WebkitLineClamp: 5 })); - }); - }); - - describe('numeric heights', () => { - it('returns default CSS', () => { - expect( - rowHeightUtils.getStylesForCell({ defaultHeight: 34 }, 0) - ).toEqual({ height: '100%', overflow: 'hidden' }); - }); - }); + describe('getHeightType', () => { + it('returns a string enum based on rowHeightsOptions', () => { + expect(rowHeightUtils.getHeightType(undefined)).toEqual('default'); + expect(rowHeightUtils.getHeightType('auto')).toEqual('auto'); + expect(rowHeightUtils.getHeightType({ lineCount: 3 })).toEqual( + 'lineCount' + ); + expect(rowHeightUtils.getHeightType({ lineCount: 0 })).toEqual( + 'lineCount' + ); + expect(rowHeightUtils.getHeightType({ height: 100 })).toEqual( + 'numerical' + ); + expect(rowHeightUtils.getHeightType(100)).toEqual('numerical'); }); }); diff --git a/src/components/datagrid/utils/row_heights.ts b/src/components/datagrid/utils/row_heights.ts index 3aed6933c4b..0c82650e390 100644 --- a/src/components/datagrid/utils/row_heights.ts +++ b/src/components/datagrid/utils/row_heights.ts @@ -7,7 +7,6 @@ */ import { - CSSProperties, MutableRefObject, useCallback, useContext, @@ -107,31 +106,21 @@ export class RowHeightUtils { }; } - getStylesForCell = ( - rowHeightsOptions: EuiDataGridRowHeightsOptions, - rowIndex: number - ): CSSProperties => { - const height = this.getRowHeightOption(rowIndex, rowHeightsOptions); + /** + * Height types + */ - if (height === AUTO_HEIGHT) { - return {}; + getHeightType = (option?: EuiDataGridRowHeightOption) => { + if (option == null) { + return 'default'; } - - const lineCount = this.getLineCount(height); - if (lineCount) { - return { - WebkitLineClamp: lineCount, - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - height: '100%', - overflow: 'hidden', - }; + if (option === AUTO_HEIGHT) { + return 'auto'; } - - return { - height: '100%', - overflow: 'hidden', - }; + if (this.getLineCount(option) != null) { + return 'lineCount'; + } + return 'numerical'; }; /** From 953e6f7a3387351a552aa8338f24e5cd0aa3bd1d Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 10:37:27 -0700 Subject: [PATCH 02/16] Convert height-specific styles to CSS - Remove unnecessary `flex-grow: 1` - isn't doing anything + start the process of moving out the text truncation/breaking CSS to their className utils --- .../datagrid/_data_grid_data_row.scss | 7 +++--- .../datagrid/body/data_grid_cell.tsx | 25 +++++++++++-------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index cfaa2a9095b..6bb260d85b7 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -96,9 +96,10 @@ text-transform: capitalize; } - .euiDataGridRowCell__definedHeight { - @include euiTextBreakWord; - flex-grow: 1; + .euiDataGridRowCell__lineCountHeight, + .euiDataGridRowCell__numericalHeight { + height: 100%; + overflow: hidden; } // We only truncate if the cell is not a control column. diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 0cdb33969fa..1e145e8529e 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -69,21 +69,26 @@ const EuiDataGridCellContent: FunctionComponent< const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>; + const rowHeightOption = rowHeightUtils?.getRowHeightOption( + rowIndex, + rowHeightsOptions + ); + const cellHeightType = rowHeightUtils?.getHeightType(rowHeightOption); + + const classes = classNames( + `euiDataGridRowCell__${cellHeightType}Height`, + { + 'eui-textBreakWord': cellHeightType !== 'default', + 'euiDataGridRowCell__truncate': cellHeightType === 'default', // TODO: Convert to .eui-textTruncate + } + ); + return ( <> <div ref={setCellContentsRef} data-datagrid-cellcontent - className={ - isDefinedHeight - ? 'euiDataGridRowCell__definedHeight' - : 'euiDataGridRowCell__truncate' - } - style={ - isDefinedHeight - ? rowHeightUtils?.getStylesForCell(rowHeightsOptions!, rowIndex) - : {} - } + className={classes} > <CellElement isDetails={false} From 901a3aae3918ddceb1e1808760796337a32c0b8e Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 10:41:21 -0700 Subject: [PATCH 03/16] Convert `isControlColumn` logic from CSS to JS - allows us to remove torturous selector and repeat CSS in favor of using explicit className utils - `isDefinedHeight` is no longer used, remove it --- src/components/datagrid/_data_grid_data_row.scss | 14 ++------------ src/components/datagrid/body/data_grid_cell.tsx | 12 +++++++----- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 6bb260d85b7..1cf024a4f77 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -101,18 +101,6 @@ height: 100%; overflow: hidden; } - - // We only truncate if the cell is not a control column. - &:not(.euiDataGridRowCell--controlColumn) { - .euiDataGridRowCell__content, - .euiDataGridRowCell__truncate, - &.euiDataGridRowCell__truncate, - .euiDataGridRowCell__expandContent { - @include euiTextTruncate; - overflow: hidden; - white-space: nowrap; - } - } } .euiDataGridRowCell__popover { @@ -144,6 +132,8 @@ .euiDataGridRowCell__expandContent { flex-grow: 1; + max-width: 100%; + overflow: hidden; } .euiDataGridRowCell__contentByHeight { diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 1e145e8529e..43a217a93f6 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -47,7 +47,7 @@ const EuiDataGridCellContent: FunctionComponent< setCellProps: EuiDataGridCellValueElementProps['setCellProps']; setCellContentsRef: EuiDataGridCell['setCellContentsRef']; isExpanded: boolean; - isDefinedHeight: boolean; + isControlColumn: boolean; isFocused: boolean; ariaRowIndex: number; } @@ -61,7 +61,7 @@ const EuiDataGridCellContent: FunctionComponent< colIndex, ariaRowIndex, rowHeightUtils, - isDefinedHeight, + isControlColumn, isFocused, ...rest }) => { @@ -77,9 +77,9 @@ const EuiDataGridCellContent: FunctionComponent< const classes = classNames( `euiDataGridRowCell__${cellHeightType}Height`, - { + !isControlColumn && { 'eui-textBreakWord': cellHeightType !== 'default', - 'euiDataGridRowCell__truncate': cellHeightType === 'default', // TODO: Convert to .eui-textTruncate + 'eui-textTruncate': cellHeightType === 'default', } ); @@ -673,7 +673,9 @@ export class EuiDataGridCell extends Component< setCellContentsRef: this.setCellContentsRef, rowHeightsOptions, rowHeightUtils, - isDefinedHeight, + isControlColumn: cellClasses.includes( + 'euiDataGridRowCell--controlColumn' + ), ariaRowIndex, }; From 5957ca22ed6fa33e55d70f239c9d2eeaecbc985e Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 10:43:07 -0700 Subject: [PATCH 04/16] Update grid cells to dogfood `EuiTextBlockTruncate` --- .../datagrid/body/data_grid_cell.tsx | 73 ++++++++++++------- 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 43a217a93f6..368b73ae2e2 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -24,6 +24,7 @@ import { keys } from '../../../services'; import { EuiScreenReaderOnly } from '../../accessibility'; import { EuiFocusTrap } from '../../focus_trap'; import { EuiI18n } from '../../i18n'; +import { EuiTextBlockTruncate } from '../../text_truncate'; import { hasResizeObserver } from '../../observer/resize_observer/resize_observer'; import { DataGridFocusContext } from '../utils/focus'; import { RowHeightVirtualizationUtils } from '../utils/row_heights'; @@ -83,36 +84,52 @@ const EuiDataGridCellContent: FunctionComponent< } ); + let cellContent = ( + <div + ref={setCellContentsRef} + data-datagrid-cellcontent + className={classes} + > + <CellElement + isDetails={false} + data-test-subj="cell-content" + rowIndex={rowIndex} + colIndex={colIndex} + schema={column?.schema || rest.columnType} + {...rest} + /> + </div> + ); + if (cellHeightType === 'lineCount' && !isControlColumn) { + const lines = rowHeightUtils!.getLineCount(rowHeightOption)!; + cellContent = ( + <EuiTextBlockTruncate lines={lines} cloneElement> + {cellContent} + </EuiTextBlockTruncate> + ); + } + + const screenReaderText = ( + <EuiScreenReaderOnly> + <p hidden={!isFocused}> + {'- '} + <EuiI18n + token="euiDataGridCell.position" + default="{columnId}, column {col}, row {row}" + values={{ + columnId: column?.displayAsText || rest.columnId, + col: colIndex + 1, + row: ariaRowIndex, + }} + /> + </p> + </EuiScreenReaderOnly> + ); + return ( <> - <div - ref={setCellContentsRef} - data-datagrid-cellcontent - className={classes} - > - <CellElement - isDetails={false} - data-test-subj="cell-content" - rowIndex={rowIndex} - colIndex={colIndex} - schema={column?.schema || rest.columnType} - {...rest} - /> - </div> - <EuiScreenReaderOnly> - <p hidden={!isFocused}> - {'- '} - <EuiI18n - token="euiDataGridCell.position" - default="{columnId}, column {col}, row {row}" - values={{ - columnId: column?.displayAsText || rest.columnId, - col: colIndex + 1, - row: ariaRowIndex, - }} - /> - </p> - </EuiScreenReaderOnly> + {cellContent} + {screenReaderText} </> ); } From 7ed08d06400f253fac05c603931dd9998ce3c543 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 10:59:20 -0700 Subject: [PATCH 05/16] Update datagrid rendered tests & snapshots --- .../__snapshots__/data_grid.test.tsx.snap | 60 ++++++------ .../data_grid_body_custom.test.tsx.snap | 8 +- .../data_grid_body_virtualized.test.tsx.snap | 4 +- .../data_grid_cell.test.tsx.snap | 2 +- .../datagrid/body/data_grid_cell.test.tsx | 93 ++++++++++++++++--- 5 files changed, 117 insertions(+), 50 deletions(-) diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 85841317fe0..a97458d2308 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -730,7 +730,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, A @@ -764,7 +764,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, B @@ -798,7 +798,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, A @@ -832,7 +832,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, B @@ -866,7 +866,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, A @@ -900,7 +900,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, B @@ -1257,7 +1257,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight" data-datagrid-cellcontent="true" > 0 @@ -1297,7 +1297,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, A @@ -1331,7 +1331,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, B @@ -1373,7 +1373,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight" data-datagrid-cellcontent="true" > 0 @@ -1421,7 +1421,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight" data-datagrid-cellcontent="true" > 1 @@ -1461,7 +1461,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, A @@ -1495,7 +1495,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, B @@ -1537,7 +1537,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight" data-datagrid-cellcontent="true" > 1 @@ -1585,7 +1585,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight" data-datagrid-cellcontent="true" > 2 @@ -1625,7 +1625,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, A @@ -1659,7 +1659,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, B @@ -1701,7 +1701,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight" data-datagrid-cellcontent="true" > 2 @@ -2017,7 +2017,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, A @@ -2051,7 +2051,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, B @@ -2085,7 +2085,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, A @@ -2119,7 +2119,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, B @@ -2153,7 +2153,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, A @@ -2187,7 +2187,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, B @@ -2495,7 +2495,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, A @@ -2529,7 +2529,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 0, B @@ -2563,7 +2563,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, A @@ -2597,7 +2597,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 1, B @@ -2631,7 +2631,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, A @@ -2665,7 +2665,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > 2, B diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap index bce634a36b1..524806b2335 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap @@ -140,7 +140,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > hello @@ -174,7 +174,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > world @@ -212,7 +212,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > lorem @@ -246,7 +246,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > ipsum diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap index 2e2fa824dc3..1120e653d8c 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap @@ -141,7 +141,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > <span> @@ -177,7 +177,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > <span> 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 3282d55d703..c6f97d7c98f 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 @@ -55,7 +55,7 @@ exports[`EuiDataGridCell renders 1`] = ` class="euiDataGridRowCell__expandContent" > <div - class="euiDataGridRowCell__truncate" + class="euiDataGridRowCell__defaultHeight eui-textTruncate" data-datagrid-cellcontent="true" > <div> diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx index 6aa83e8677b..c606a777676 100644 --- a/src/components/datagrid/body/data_grid_cell.test.tsx +++ b/src/components/datagrid/body/data_grid_cell.test.tsx @@ -718,19 +718,86 @@ describe('EuiDataGridCell', () => { }); }); - it('renders certain classes/styles if rowHeightOptions is passed', () => { - const component = mount( - <EuiDataGridCell - {...requiredProps} - rowHeightsOptions={{ - defaultHeight: 20, - rowHeights: { 0: 10 }, - }} - /> - ); + describe('renders certain classes/styles based on rowHeightOptions', () => { + const props = { ...requiredProps, renderCellValue: () => null }; - expect( - component.find('.euiDataGridRowCell__contentByHeight').exists() - ).toBe(true); + test('default', () => { + const component = mount( + <EuiDataGridCell {...props} rowHeightsOptions={undefined} /> + ); + + expect( + component.find('.euiDataGridRowCell__expandContent').exists() + ).toBe(true); + expect( + component.find('.euiDataGridRowCell__contentByHeight').exists() + ).not.toBe(true); + + expect(component.find('.euiDataGridRowCell__defaultHeight').render()) + .toMatchInlineSnapshot(` + <div + class="euiDataGridRowCell__defaultHeight eui-textTruncate" + data-datagrid-cellcontent="true" + /> + `); + }); + + test('auto', () => { + const component = mount( + <EuiDataGridCell + {...props} + rowHeightsOptions={{ defaultHeight: 'auto' }} + /> + ); + + expect( + component.find('.euiDataGridRowCell__expandContent').exists() + ).not.toBe(true); + expect( + component.find('.euiDataGridRowCell__contentByHeight').exists() + ).toBe(true); + + expect(component.find('.euiDataGridRowCell__autoHeight').render()) + .toMatchInlineSnapshot(` + <div + class="euiDataGridRowCell__autoHeight eui-textBreakWord" + data-datagrid-cellcontent="true" + /> + `); + }); + + test('numerical', () => { + const component = mount( + <EuiDataGridCell + {...props} + rowHeightsOptions={{ defaultHeight: { height: 3 } }} + /> + ); + + expect(component.find('.euiDataGridRowCell__numericalHeight').render()) + .toMatchInlineSnapshot(` + <div + class="euiDataGridRowCell__numericalHeight eui-textBreakWord" + data-datagrid-cellcontent="true" + /> + `); + }); + + test('lineCount', () => { + const component = mount( + <EuiDataGridCell + {...props} + rowHeightsOptions={{ defaultHeight: { lineCount: 3 } }} + /> + ); + + expect(component.find('div.euiDataGridRowCell__lineCountHeight').render()) + .toMatchInlineSnapshot(` + <div + class="euiDataGridRowCell__lineCountHeight eui-textBreakWord euiTextBlockTruncate emotion-euiTextBlockTruncate" + data-datagrid-cellcontent="true" + /> + `); + }); }); }); From 362d480d212adb78230b49aadf8854e28a96a963 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 12:05:05 -0700 Subject: [PATCH 06/16] =?UTF-8?q?=F0=9F=94=A5=20Remove=20unnecssary=20CSS?= =?UTF-8?q?=20on=20lineCount?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `overflow` is already set by text truncate component - `height: 100%` doesn't appear to do anything or be useful. if for some reason it is needed in the future, we can always re-add it --- src/components/datagrid/_data_grid_data_row.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 1cf024a4f77..a826a935d88 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -96,7 +96,6 @@ text-transform: capitalize; } - .euiDataGridRowCell__lineCountHeight, .euiDataGridRowCell__numericalHeight { height: 100%; overflow: hidden; From ad6894b76ac80b0d08d4d7b91fb50536c2f381b8 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 14:39:11 -0700 Subject: [PATCH 07/16] =?UTF-8?q?=F0=9F=94=A5=20Remove=20convoluted=20mixi?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - in favor of passing condition/setting conditional styling logic directly in the cell actions component --- .../datagrid/_data_grid_data_row.scss | 21 ++++++++++--------- src/components/datagrid/_mixins.scss | 15 ------------- .../datagrid/body/data_grid_cell.tsx | 8 +++++++ .../body/data_grid_cell_actions.test.tsx | 17 +++++++++++++-- .../datagrid/body/data_grid_cell_actions.tsx | 14 ++++++++----- 5 files changed, 43 insertions(+), 32 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index a826a935d88..805e91f94a4 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -141,18 +141,18 @@ } // Cell actions -.euiDataGridRowCell__expandActions { +.euiDataGridRowCell__actions { display: flex; } -@include euiDataGridRowCellActions($definedHeight: false) { +.euiDataGridRowCell__actions--flex { flex-grow: 0; } -@include euiDataGridRowCellActions($definedHeight: true) { - background-color: $euiColorEmptyShade; +.euiDataGridRowCell__actions--overlay { position: absolute; right: 0; top: 0; padding: $euiDataGridCellPaddingM 0; + background-color: $euiColorEmptyShade; } .euiDataGridRowCell__actionButtonIcon { @@ -171,20 +171,20 @@ // Row stripes @include euiDataGridStyles(stripes) { .euiDataGridRow--striped { - @include euiDataGridRowCellActions($definedHeight: true) { + &, + .euiDataGridRowCell__actions--overlay { background-color: $euiColorLightestShade; } - background-color: $euiColorLightestShade; } } // Row highlights @include euiDataGridStyles(rowHoverHighlight) { .euiDataGridRow:hover { - @include euiDataGridRowCellActions($definedHeight: true) { + &, + .euiDataGridRowCell__actions--overlay { background-color: $euiColorHighlight; } - background-color: $euiColorHighlight; } } @@ -230,10 +230,11 @@ // Compressed density grids - height tweaks @include euiDataGridStyles(fontSizeSmall, paddingSmall) { - @include euiDataGridRowCellActions($definedHeight: true) { + .euiDataGridRowCell__actions--overlay { padding: ($euiDataGridCellPaddingS / 2) 0; } - @include euiDataGridRowCellActions($definedHeight: false) { + + .euiDataGridRowCell__actions--flex { transform: translateY(1px); } } diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss index 1a70c21cc97..4303730770c 100644 --- a/src/components/datagrid/_mixins.scss +++ b/src/components/datagrid/_mixins.scss @@ -82,18 +82,3 @@ $euiDataGridStyles: ( @content; } } - -@mixin euiDataGridRowCellActions($definedHeight: false) { - @if $definedHeight { - // Defined heights are cells with row heights of auto, lineCount, or a static height - // that set the __contentByHeight class - .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { - @content; - } - } @else { - // Otherwise, an undefined height (single flex row) will set __expandContent - .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions { - @content; - } - } -} diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 368b73ae2e2..1327a1fe15a 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -678,6 +678,13 @@ export class EuiDataGridCell extends Component< rowHeightsOptions ); + const rowHeightOption = rowHeightUtils?.getRowHeightOption( + rowIndex, + rowHeightsOptions + ); + const cellHeightType = + rowHeightUtils?.getHeightType(rowHeightOption) || 'default'; + const cellContentProps = { ...rest, setCellProps: this.setCellProps, @@ -729,6 +736,7 @@ export class EuiDataGridCell extends Component< rowIndex={rowIndex} colIndex={colIndex} column={column} + cellHeightType={cellHeightType} onExpandClick={() => { if (popoverIsOpen) { closeCellPopover(); diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx index e14f235f60c..3b2a11b026b 100644 --- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { render } from '../../../test/rtl'; import { EuiDataGridColumnCellAction } from '../data_grid_types'; import { @@ -24,6 +25,7 @@ describe('EuiDataGridCellActions', () => { onExpandClick: jest.fn(), rowIndex: 0, colIndex: 0, + cellHeightType: 'default', }; it('renders an expand button', () => { @@ -31,7 +33,7 @@ describe('EuiDataGridCellActions', () => { expect(component).toMatchInlineSnapshot(` <div - className="euiDataGridRowCell__expandActions" + className="euiDataGridRowCell__actions euiDataGridRowCell__actions--flex" > <EuiI18n default="Click or hit enter to interact with cell content" @@ -88,7 +90,7 @@ describe('EuiDataGridCellActions', () => { expect(component).toMatchInlineSnapshot(` <div - className="euiDataGridRowCell__expandActions" + className="euiDataGridRowCell__actions euiDataGridRowCell__actions--flex" > <MockAction Component={[Function]} @@ -109,6 +111,17 @@ describe('EuiDataGridCellActions', () => { `); }); + it('renders with overlay positioning for non default height cells', () => { + const { container } = render( + <EuiDataGridCellActions {...requiredProps} cellHeightType="auto" /> + ); + + // TODO: Switch to `.toHaveStyle({ position: 'absolute' })` once on Emotion + expect(container.firstChild).toHaveClass( + 'euiDataGridRowCell__actions--overlay' + ); + }); + describe('visible cell actions limit', () => { it('by default, does not render more than the first two primary cell actions', () => { const component = shallow( diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx index 21bac608c36..4e7d9830a9f 100644 --- a/src/components/datagrid/body/data_grid_cell_actions.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.tsx @@ -18,17 +18,20 @@ import { EuiButtonIcon, EuiButtonIconProps } from '../../button/button_icon'; import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button/button_empty'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { EuiPopoverFooter } from '../../popover'; +import classNames from 'classnames'; export const EuiDataGridCellActions = ({ onExpandClick, column, rowIndex, colIndex, + cellHeightType, }: { onExpandClick: () => void; column?: EuiDataGridColumn; rowIndex: number; colIndex: number; + cellHeightType: string; }) => { // Note: The cell expand button/expansion popover is *always* rendered if // column.cellActions is present (regardless of column.isExpandable). @@ -91,11 +94,12 @@ export const EuiDataGridCellActions = ({ ); }, [column, colIndex, rowIndex]); - return ( - <div className="euiDataGridRowCell__expandActions"> - {[...additionalButtons, expandButton]} - </div> - ); + const classes = classNames('euiDataGridRowCell__actions', { + 'euiDataGridRowCell__actions--flex': cellHeightType === 'default', + 'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default', + }); + + return <div className={classes}>{[...additionalButtons, expandButton]}</div>; }; export const EuiDataGridCellPopoverActions = ({ From 905766398481b2caf69e0c83310836c6abbf9e04 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 14:42:54 -0700 Subject: [PATCH 08/16] =?UTF-8?q?=F0=9F=94=A5=20DRY=20out=20`cellHeightsTy?= =?UTF-8?q?pe`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - pass var(s) instead of re-getting it twice --- .../datagrid/body/data_grid_cell.tsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 1327a1fe15a..c90131e90f5 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -35,6 +35,7 @@ import { EuiDataGridCellValueElementProps, EuiDataGridCellValueProps, EuiDataGridCellPopoverElementProps, + EuiDataGridRowHeightOption, } from '../data_grid_types'; import { EuiDataGridCellActions, @@ -51,31 +52,28 @@ const EuiDataGridCellContent: FunctionComponent< isControlColumn: boolean; isFocused: boolean; ariaRowIndex: number; + rowHeight?: EuiDataGridRowHeightOption; + cellHeightType: string; } > = memo( ({ renderCellValue, column, setCellContentsRef, - rowHeightsOptions, rowIndex, colIndex, ariaRowIndex, + rowHeight, rowHeightUtils, isControlColumn, isFocused, + cellHeightType, ...rest }) => { // React is more permissible than the TS types indicate const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>; - const rowHeightOption = rowHeightUtils?.getRowHeightOption( - rowIndex, - rowHeightsOptions - ); - const cellHeightType = rowHeightUtils?.getHeightType(rowHeightOption); - const classes = classNames( `euiDataGridRowCell__${cellHeightType}Height`, !isControlColumn && { @@ -101,7 +99,7 @@ const EuiDataGridCellContent: FunctionComponent< </div> ); if (cellHeightType === 'lineCount' && !isControlColumn) { - const lines = rowHeightUtils!.getLineCount(rowHeightOption)!; + const lines = rowHeightUtils!.getLineCount(rowHeight)!; cellContent = ( <EuiTextBlockTruncate lines={lines} cloneElement> {cellContent} @@ -678,24 +676,25 @@ export class EuiDataGridCell extends Component< rowHeightsOptions ); - const rowHeightOption = rowHeightUtils?.getRowHeightOption( + const rowHeight = rowHeightUtils?.getRowHeightOption( rowIndex, rowHeightsOptions ); const cellHeightType = - rowHeightUtils?.getHeightType(rowHeightOption) || 'default'; + rowHeightUtils?.getHeightType(rowHeight) || 'default'; const cellContentProps = { ...rest, setCellProps: this.setCellProps, column, columnType, + cellHeightType, isExpandable, isExpanded: popoverIsOpen, isDetails: false, isFocused: this.state.isFocused, setCellContentsRef: this.setCellContentsRef, - rowHeightsOptions, + rowHeight, rowHeightUtils, isControlColumn: cellClasses.includes( 'euiDataGridRowCell--controlColumn' From 2f6a07bdc29d65cf110973066345f1fa62850412 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 15:06:31 -0700 Subject: [PATCH 09/16] =?UTF-8?q?=F0=9F=94=A5=20Clean=20up=20cell=20conten?= =?UTF-8?q?t=20DOM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - move all logic related to content to the `EuiDataGridCellContent` component, including the wrapper let the parent cell pass down any needed refs + actions --- .../datagrid/body/data_grid_cell.tsx | 70 +++++++++---------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index c90131e90f5..f9ee2df0815 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -17,6 +17,7 @@ import React, { KeyboardEvent, memo, MutableRefObject, + ReactNode, } from 'react'; import { createPortal } from 'react-dom'; import { tabbable } from 'tabbable'; @@ -48,18 +49,21 @@ const EuiDataGridCellContent: FunctionComponent< EuiDataGridCellValueProps & { setCellProps: EuiDataGridCellValueElementProps['setCellProps']; setCellContentsRef: EuiDataGridCell['setCellContentsRef']; + setPopoverAnchorRef: MutableRefObject<HTMLDivElement | null>; isExpanded: boolean; isControlColumn: boolean; isFocused: boolean; ariaRowIndex: number; rowHeight?: EuiDataGridRowHeightOption; cellHeightType: string; + cellActions?: ReactNode; } > = memo( ({ renderCellValue, column, setCellContentsRef, + setPopoverAnchorRef, rowIndex, colIndex, ariaRowIndex, @@ -68,12 +72,16 @@ const EuiDataGridCellContent: FunctionComponent< isControlColumn, isFocused, cellHeightType, + cellActions, ...rest }) => { // React is more permissible than the TS types indicate const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>; + // TODO: Clean up expand/content by height shenanigans + const wrapperClasses = classNames(); + const classes = classNames( `euiDataGridRowCell__${cellHeightType}Height`, !isControlColumn && { @@ -125,10 +133,11 @@ const EuiDataGridCellContent: FunctionComponent< ); return ( - <> + <div ref={setPopoverAnchorRef} className={wrapperClasses}> {cellContent} {screenReaderText} - </> + {cellActions} + </div> ); } ); @@ -671,11 +680,6 @@ export class EuiDataGridCell extends Component< } }; - const isDefinedHeight = !!rowHeightUtils?.getRowHeightOption( - rowIndex, - rowHeightsOptions - ); - const rowHeight = rowHeightUtils?.getRowHeightOption( rowIndex, rowHeightsOptions @@ -694,6 +698,7 @@ export class EuiDataGridCell extends Component< isDetails: false, isFocused: this.state.isFocused, setCellContentsRef: this.setCellContentsRef, + setPopoverAnchorRef: this.popoverAnchorRef, rowHeight, rowHeightUtils, isControlColumn: cellClasses.includes( @@ -702,11 +707,6 @@ export class EuiDataGridCell extends Component< ariaRowIndex, }; - const anchorClass = 'euiDataGridRowCell__expandFlex'; - const expandClass = isDefinedHeight - ? 'euiDataGridRowCell__contentByHeight' - : 'euiDataGridRowCell__expandContent'; - let innerContent = ( <EuiFocusTrap disabled={!this.state.isEntered} @@ -716,36 +716,32 @@ export class EuiDataGridCell extends Component< }} clickOutsideDisables={true} > - <div className={anchorClass} ref={this.popoverAnchorRef}> - <div className={expandClass}> - <EuiDataGridCellContent {...cellContentProps} /> - </div> - </div> + <EuiDataGridCellContent {...cellContentProps} /> </EuiFocusTrap> ); if (isExpandable) { innerContent = ( - <div className={anchorClass} ref={this.popoverAnchorRef}> - <div className={expandClass}> - <EuiDataGridCellContent {...cellContentProps} /> - </div> - {showCellActions && ( - <EuiDataGridCellActions - rowIndex={rowIndex} - colIndex={colIndex} - column={column} - cellHeightType={cellHeightType} - onExpandClick={() => { - if (popoverIsOpen) { - closeCellPopover(); - } else { - openCellPopover({ rowIndex: visibleRowIndex, colIndex }); - } - }} - /> - )} - </div> + <EuiDataGridCellContent + {...cellContentProps} + cellActions={ + showCellActions && ( + <EuiDataGridCellActions + rowIndex={rowIndex} + colIndex={colIndex} + column={column} + cellHeightType={cellHeightType} + onExpandClick={() => { + if (popoverIsOpen) { + closeCellPopover(); + } else { + openCellPopover({ rowIndex: visibleRowIndex, colIndex }); + } + }} + /> + ) + } + /> ); } From 2247d9fec20521fbe1d5784cee0453a2816c8de5 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 15:09:59 -0700 Subject: [PATCH 10/16] =?UTF-8?q?=F0=9F=94=A5=20Clean=20up=20cell=20conten?= =?UTF-8?q?t=20CSS=20classes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - remove extremely confusing `__expand` class names in favor of using the height type (that determines the kind of behavior the content has, e.g. flex vs absolutely positioned, etc) - Make sure only the heights that need certain CSS have that CSS (the non-default-height cells don't need display flex) --- .../datagrid/_data_grid_data_row.scss | 34 +++++------- .../datagrid/body/data_grid_cell.test.tsx | 55 +++++-------------- .../datagrid/body/data_grid_cell.tsx | 8 ++- 3 files changed, 34 insertions(+), 63 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 805e91f94a4..bf027b52bb7 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -46,7 +46,7 @@ * * TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved */ - .euiDataGridRowCell__expandContent { + .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__content { animation-name: euiDataGridCellActionsSafariWorkaround; animation-duration: 1000ms; // I don't know why the duration matters or why it being longer works more consistently 🥲 animation-delay: $euiAnimSpeedNormal + $euiAnimSpeedExtraFast; // Wait for above animation to finish @@ -95,11 +95,6 @@ &.euiDataGridRowCell--capitalize { text-transform: capitalize; } - - .euiDataGridRowCell__numericalHeight { - height: 100%; - overflow: hidden; - } } .euiDataGridRowCell__popover { @@ -118,28 +113,27 @@ @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion } -.euiDataGridRowCell__expandFlex { - position: relative; // for positioning expand button +.euiDataGridRowCell__contentWrapper { + position: relative; // Needed for .euiDataGridRowCell__actions--overlay + height: 100%; + overflow: hidden; +} + +.euiDataGridRowCell__defaultHeight { display: flex; align-items: baseline; - height: 100%; + max-width: 100%; + + .euiDataGridRowCell__content { + flex-grow: 1; + } .euiDataGridRowCell--controlColumn & { + height: 100%; align-items: center; } } -.euiDataGridRowCell__expandContent { - flex-grow: 1; - max-width: 100%; - overflow: hidden; -} - -.euiDataGridRowCell__contentByHeight { - flex-grow: 1; - height: 100%; -} - // Cell actions .euiDataGridRowCell__actions { display: flex; diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx index c606a777676..0271566e937 100644 --- a/src/components/datagrid/body/data_grid_cell.test.tsx +++ b/src/components/datagrid/body/data_grid_cell.test.tsx @@ -727,19 +727,9 @@ describe('EuiDataGridCell', () => { ); expect( - component.find('.euiDataGridRowCell__expandContent').exists() + component.find('.euiDataGridRowCell__defaultHeight').exists() ).toBe(true); - expect( - component.find('.euiDataGridRowCell__contentByHeight').exists() - ).not.toBe(true); - - expect(component.find('.euiDataGridRowCell__defaultHeight').render()) - .toMatchInlineSnapshot(` - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - /> - `); + expect(component.find('.eui-textTruncate').exists()).toBe(true); }); test('auto', () => { @@ -750,20 +740,10 @@ describe('EuiDataGridCell', () => { /> ); - expect( - component.find('.euiDataGridRowCell__expandContent').exists() - ).not.toBe(true); - expect( - component.find('.euiDataGridRowCell__contentByHeight').exists() - ).toBe(true); - - expect(component.find('.euiDataGridRowCell__autoHeight').render()) - .toMatchInlineSnapshot(` - <div - class="euiDataGridRowCell__autoHeight eui-textBreakWord" - data-datagrid-cellcontent="true" - /> - `); + expect(component.find('.euiDataGridRowCell__autoHeight').exists()).toBe( + true + ); + expect(component.find('.eui-textBreakWord').exists()).toBe(true); }); test('numerical', () => { @@ -774,13 +754,10 @@ describe('EuiDataGridCell', () => { /> ); - expect(component.find('.euiDataGridRowCell__numericalHeight').render()) - .toMatchInlineSnapshot(` - <div - class="euiDataGridRowCell__numericalHeight eui-textBreakWord" - data-datagrid-cellcontent="true" - /> - `); + expect( + component.find('.euiDataGridRowCell__numericalHeight').exists() + ).toBe(true); + expect(component.find('.eui-textBreakWord').exists()).toBe(true); }); test('lineCount', () => { @@ -791,13 +768,11 @@ describe('EuiDataGridCell', () => { /> ); - expect(component.find('div.euiDataGridRowCell__lineCountHeight').render()) - .toMatchInlineSnapshot(` - <div - class="euiDataGridRowCell__lineCountHeight eui-textBreakWord euiTextBlockTruncate emotion-euiTextBlockTruncate" - data-datagrid-cellcontent="true" - /> - `); + expect( + component.find('.euiDataGridRowCell__lineCountHeight').exists() + ).toBe(true); + expect(component.find('.eui-textBreakWord').exists()).toBe(true); + expect(component.find('.euiTextBlockTruncate').exists()).toBe(true); }); }); }); diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index f9ee2df0815..ca27c5cd855 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -79,11 +79,13 @@ const EuiDataGridCellContent: FunctionComponent< const CellElement = renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>; - // TODO: Clean up expand/content by height shenanigans - const wrapperClasses = classNames(); + const wrapperClasses = classNames( + 'euiDataGridRowCell__contentWrapper', + `euiDataGridRowCell__${cellHeightType}Height` + ); const classes = classNames( - `euiDataGridRowCell__${cellHeightType}Height`, + 'euiDataGridRowCell__content', !isControlColumn && { 'eui-textBreakWord': cellHeightType !== 'default', 'eui-textTruncate': cellHeightType === 'default', From bae819e0e64d5949bf1872c930355bad538f7663 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 15:12:11 -0700 Subject: [PATCH 11/16] Update snapshots --- .../__snapshots__/data_grid.test.tsx.snap | 780 ++++++++---------- .../data_grid_body_custom.test.tsx.snap | 104 +-- .../data_grid_body_virtualized.test.tsx.snap | 60 +- .../data_grid_cell.test.tsx.snap | 50 +- 4 files changed, 423 insertions(+), 571 deletions(-) diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index a97458d2308..1955c97a301 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -724,25 +724,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 1 - </p> + 0, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 1 + </p> </div> </div> <div @@ -758,25 +754,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 1 - </p> + 0, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 1 + </p> </div> </div> <div @@ -792,25 +784,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 2 - </p> + 1, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 2 + </p> </div> </div> <div @@ -826,25 +814,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 2 - </p> + 1, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 2 + </p> </div> </div> <div @@ -860,25 +844,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 3 - </p> + 2, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 3 + </p> </div> </div> <div @@ -894,25 +874,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 3 - </p> + 2, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 3 + </p> </div> </div> </div> @@ -1251,25 +1227,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` data-focus-lock-disabled="disabled" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight" - data-datagrid-cellcontent="true" - > - 0 - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - leading, column 1, row 1 - </p> + 0 </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + leading, column 1, row 1 + </p> </div> </div> <div @@ -1291,25 +1263,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 2, row 1 - </p> + 0, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 2, row 1 + </p> </div> </div> <div @@ -1325,25 +1293,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 3, row 1 - </p> + 0, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 3, row 1 + </p> </div> </div> <div @@ -1367,25 +1331,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` data-focus-lock-disabled="disabled" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight" - data-datagrid-cellcontent="true" - > - 0 - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - trailing, column 4, row 1 - </p> + 0 </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + trailing, column 4, row 1 + </p> </div> </div> <div @@ -1415,25 +1375,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` data-focus-lock-disabled="disabled" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight" - data-datagrid-cellcontent="true" - > - 1 - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - leading, column 1, row 2 - </p> + 1 </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + leading, column 1, row 2 + </p> </div> </div> <div @@ -1455,25 +1411,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 2, row 2 - </p> + 1, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 2, row 2 + </p> </div> </div> <div @@ -1489,25 +1441,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 3, row 2 - </p> + 1, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 3, row 2 + </p> </div> </div> <div @@ -1531,25 +1479,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` data-focus-lock-disabled="disabled" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight" - data-datagrid-cellcontent="true" - > - 1 - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - trailing, column 4, row 2 - </p> + 1 </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + trailing, column 4, row 2 + </p> </div> </div> <div @@ -1579,25 +1523,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` data-focus-lock-disabled="disabled" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight" - data-datagrid-cellcontent="true" - > - 2 - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - leading, column 1, row 3 - </p> + 2 </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + leading, column 1, row 3 + </p> </div> </div> <div @@ -1619,25 +1559,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 2, row 3 - </p> + 2, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 2, row 3 + </p> </div> </div> <div @@ -1653,25 +1589,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 3, row 3 - </p> + 2, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 3, row 3 + </p> </div> </div> <div @@ -1695,25 +1627,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` data-focus-lock-disabled="disabled" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight" - data-datagrid-cellcontent="true" - > - 2 - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - trailing, column 4, row 3 - </p> + 2 </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + trailing, column 4, row 3 + </p> </div> </div> <div @@ -2011,25 +1939,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 1 - </p> + 0, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 1 + </p> </div> </div> <div @@ -2045,25 +1969,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 1 - </p> + 0, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 1 + </p> </div> </div> <div @@ -2079,25 +1999,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 2 - </p> + 1, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 2 + </p> </div> </div> <div @@ -2113,25 +2029,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 2 - </p> + 1, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 2 + </p> </div> </div> <div @@ -2147,25 +2059,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 3 - </p> + 2, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 3 + </p> </div> </div> <div @@ -2181,25 +2089,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 3 - </p> + 2, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 3 + </p> </div> </div> </div> @@ -2489,25 +2393,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 1 - </p> + 0, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 1 + </p> </div> </div> <div @@ -2523,25 +2423,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 0, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 1 - </p> + 0, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 1 + </p> </div> </div> <div @@ -2557,25 +2453,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 2 - </p> + 1, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 2 + </p> </div> </div> <div @@ -2591,25 +2483,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 1, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 2 - </p> + 1, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 2 + </p> </div> </div> <div @@ -2625,25 +2513,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, A - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - A, column 1, row 3 - </p> + 2, A </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + A, column 1, row 3 + </p> </div> </div> <div @@ -2659,25 +2543,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - 2, B - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - B, column 2, row 3 - </p> + 2, B </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + B, column 2, row 3 + </p> </div> </div> </div> diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap index 524806b2335..029ed6665a9 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap @@ -134,25 +134,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - hello - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - columnA, column 1, row 1 - </p> + hello </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + columnA, column 1, row 1 + </p> </div> </div> <div @@ -168,25 +164,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - world - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - columnB, column 2, row 1 - </p> + world </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + columnB, column 2, row 1 + </p> </div> </div> </div> @@ -206,25 +198,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - lorem - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - columnA, column 1, row 2 - </p> + lorem </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + columnA, column 1, row 2 + </p> </div> </div> <div @@ -240,25 +228,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - ipsum - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - columnB, column 2, row 2 - </p> + ipsum </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + columnB, column 2, row 2 + </p> </div> </div> </div> diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap index 1120e653d8c..7251f9857ab 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap @@ -135,27 +135,23 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - <span> - cell content - </span> - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - columnA, column 1, row 1 - </p> + <span> + cell content + </span> </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + columnA, column 1, row 1 + </p> </div> </div> <div @@ -171,27 +167,23 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - <span> - cell content - </span> - </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - columnB, column 2, row 1 - </p> + <span> + cell content + </span> </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + columnB, column 2, row 1 + </p> </div> </div> </div> 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 c6f97d7c98f..019cda14347 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 @@ -49,38 +49,34 @@ exports[`EuiDataGridCell renders 1`] = ` tabindex="-1" > <div - class="euiDataGridRowCell__expandFlex" + class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight" > <div - class="euiDataGridRowCell__expandContent" + class="euiDataGridRowCell__content eui-textTruncate" + data-datagrid-cellcontent="true" > - <div - class="euiDataGridRowCell__defaultHeight eui-textTruncate" - data-datagrid-cellcontent="true" - > - <div> - <button - data-datagrid-interactable="true" - tabindex="-1" - > - hello - </button> - <button - data-datagrid-interactable="true" - tabindex="-1" - > - world - </button> - </div> + <div> + <button + data-datagrid-interactable="true" + tabindex="-1" + > + hello + </button> + <button + data-datagrid-interactable="true" + tabindex="-1" + > + world + </button> </div> - <p - class="emotion-euiScreenReaderOnly" - hidden="" - > - - - someColumn, column 1, row 1 - </p> </div> + <p + class="emotion-euiScreenReaderOnly" + hidden="" + > + - + someColumn, column 1, row 1 + </p> </div> </div> `; From 2a4329d18ec627a57a13c791921fc405d7fd3e6a Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 15:13:24 -0700 Subject: [PATCH 12/16] [nit] var naming and syntax cleanup --- .../datagrid/body/data_grid_cell.tsx | 53 ++++++++----------- 1 file changed, 23 insertions(+), 30 deletions(-) diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index ca27c5cd855..6b4dbc7afb3 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -709,7 +709,25 @@ export class EuiDataGridCell extends Component< ariaRowIndex, }; - let innerContent = ( + const cellActions = showCellActions && ( + <EuiDataGridCellActions + rowIndex={rowIndex} + colIndex={colIndex} + column={column} + cellHeightType={cellHeightType} + onExpandClick={() => { + if (popoverIsOpen) { + closeCellPopover(); + } else { + openCellPopover({ rowIndex: visibleRowIndex, colIndex }); + } + }} + /> + ); + + const cellContent = isExpandable ? ( + <EuiDataGridCellContent {...cellContentProps} cellActions={cellActions} /> + ) : ( <EuiFocusTrap disabled={!this.state.isEntered} autoFocus={true} @@ -722,32 +740,7 @@ export class EuiDataGridCell extends Component< </EuiFocusTrap> ); - if (isExpandable) { - innerContent = ( - <EuiDataGridCellContent - {...cellContentProps} - cellActions={ - showCellActions && ( - <EuiDataGridCellActions - rowIndex={rowIndex} - colIndex={colIndex} - column={column} - cellHeightType={cellHeightType} - onExpandClick={() => { - if (popoverIsOpen) { - closeCellPopover(); - } else { - openCellPopover({ rowIndex: visibleRowIndex, colIndex }); - } - }} - /> - ) - } - /> - ); - } - - const content = ( + const cell = ( <div role="gridcell" aria-rowindex={ariaRowIndex} @@ -772,13 +765,13 @@ export class EuiDataGridCell extends Component< }} onBlur={this.onBlur} > - {innerContent} + {cellContent} </div> ); return rowManager && !IS_JEST_ENVIRONMENT ? createPortal( - content, + cell, rowManager.getRow({ rowIndex, visibleRowIndex, @@ -786,6 +779,6 @@ export class EuiDataGridCell extends Component< height: style!.height as number, // comes in as an integer from react-window }) ) - : content; + : cell; } } From e291a7df11d757b10c2d83b01e102a6e8e57728a Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 16:25:29 -0700 Subject: [PATCH 13/16] =?UTF-8?q?=F0=9F=94=A5=20more=20cleanup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - move flex CSS specific to default height cells to its selector, vs. the baseline actions component --- .../datagrid/_data_grid_data_row.scss | 24 ++++++++++--------- .../body/data_grid_cell_actions.test.tsx | 4 ++-- .../datagrid/body/data_grid_cell_actions.tsx | 1 - 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index bf027b52bb7..0c67342deff 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -128,6 +128,10 @@ flex-grow: 1; } + .euiDataGridRowCell__actions { + flex-grow: 0; + } + .euiDataGridRowCell--controlColumn & { height: 100%; align-items: center; @@ -137,16 +141,14 @@ // Cell actions .euiDataGridRowCell__actions { display: flex; -} -.euiDataGridRowCell__actions--flex { - flex-grow: 0; -} -.euiDataGridRowCell__actions--overlay { - position: absolute; - right: 0; - top: 0; - padding: $euiDataGridCellPaddingM 0; - background-color: $euiColorEmptyShade; + + &--overlay { + position: absolute; + right: 0; + top: 0; + padding: $euiDataGridCellPaddingM 0; + background-color: $euiColorEmptyShade; + } } .euiDataGridRowCell__actionButtonIcon { @@ -228,7 +230,7 @@ padding: ($euiDataGridCellPaddingS / 2) 0; } - .euiDataGridRowCell__actions--flex { + .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions { transform: translateY(1px); } } diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx index 3b2a11b026b..151f3003814 100644 --- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx @@ -33,7 +33,7 @@ describe('EuiDataGridCellActions', () => { expect(component).toMatchInlineSnapshot(` <div - className="euiDataGridRowCell__actions euiDataGridRowCell__actions--flex" + className="euiDataGridRowCell__actions" > <EuiI18n default="Click or hit enter to interact with cell content" @@ -90,7 +90,7 @@ describe('EuiDataGridCellActions', () => { expect(component).toMatchInlineSnapshot(` <div - className="euiDataGridRowCell__actions euiDataGridRowCell__actions--flex" + className="euiDataGridRowCell__actions" > <MockAction Component={[Function]} diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx index 4e7d9830a9f..bc3ed204dfe 100644 --- a/src/components/datagrid/body/data_grid_cell_actions.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.tsx @@ -95,7 +95,6 @@ export const EuiDataGridCellActions = ({ }, [column, colIndex, rowIndex]); const classes = classNames('euiDataGridRowCell__actions', { - 'euiDataGridRowCell__actions--flex': cellHeightType === 'default', 'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default', }); From 6f3a1e82d2e5bed7378947795dac50fb1995bf31 Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 16:16:03 -0700 Subject: [PATCH 14/16] =?UTF-8?q?=F0=9F=90=9B=20Fix=20bug=20in=20productio?= =?UTF-8?q?n=20w/=20cell=20popovers=20for=20cells=20with=20numeric=20heigh?= =?UTF-8?q?ts=20that=20have=20overflowing=20content?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit + Add Cypress regression tests to ensure popovers are rendering from the correct anchor/position --- .../datagrid/_data_grid_data_row.scss | 9 +++ .../datagrid/body/data_grid_cell.tsx | 15 +++- .../body/data_grid_cell_popover.spec.tsx | 73 +++++++++++++++++++ 3 files changed, 95 insertions(+), 2 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 0c67342deff..1841427b646 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -138,6 +138,15 @@ } } +.euiDataGridRowCell__numericalHeight { + // Without this rule, popover anchors content that overflows off the page + [data-euiportal], + .euiPopover, + .euiPopover__anchor { + height: 100%; + } +} + // Cell actions .euiDataGridRowCell__actions { display: flex; diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 6b4dbc7afb3..23ec939abb3 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -94,7 +94,18 @@ const EuiDataGridCellContent: FunctionComponent< let cellContent = ( <div - ref={setCellContentsRef} + ref={(el) => { + setCellContentsRef(el); + setPopoverAnchorRef.current = + cellHeightType === 'default' + ? // Default height cells need the popover to be anchored on the wrapper, + // in order for the popover to centered on the full cell width (as content + // width is affected by the width of cell actions) + (el?.parentElement as HTMLDivElement) + : // Numerical height cells need the popover anchor to be below the wrapper + // class, in order to set height: 100% on the portalled popover div wrappers + el; + }} data-datagrid-cellcontent className={classes} > @@ -135,7 +146,7 @@ const EuiDataGridCellContent: FunctionComponent< ); return ( - <div ref={setPopoverAnchorRef} className={wrapperClasses}> + <div className={wrapperClasses}> {cellContent} {screenReaderText} {cellActions} diff --git a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx index deca8599bc1..9e58a654f1f 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx @@ -130,4 +130,77 @@ describe('EuiDataGridCellPopover', () => { cy.get('.euiDataGridRowCell__popover.hello.world').should('exist'); }); + + describe('popover anchor/positioning', () => { + const props = { + ...baseProps, + rowCount: 1, + renderCellValue: ({ columnId }) => { + if (columnId === 'A') { + return 'short text'; + } else { + return 'Very long text that should get cut off because it is so long'; + } + }, + }; + + const openCellPopover = (id: string) => { + cy.get( + `[data-gridcell-row-index="0"][data-gridcell-column-id="${id}"]` + ).realClick(); + cy.realPress('Enter'); + }; + + it('default row height', () => { + cy.realMount(<EuiDataGrid {...props} />); + + openCellPopover('B'); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '24.5px') + .should('have.css', 'top', '104px'); + }); + + it('lineCount row height', () => { + cy.realMount( + <EuiDataGrid + {...props} + rowHeightsOptions={{ defaultHeight: { lineCount: 2 } }} + /> + ); + openCellPopover('B'); + + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '24.5px') + .should('have.css', 'top', '127px'); + }); + + it('numerical row height', () => { + cy.realMount( + <EuiDataGrid {...props} rowHeightsOptions={{ defaultHeight: 40 }} /> + ); + openCellPopover('B'); + + // Should not be anchored to the bottom of the overflowing text + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '24.5px') + .should('have.css', 'top', '106px'); + }); + + it('auto row height', () => { + cy.realMount( + <EuiDataGrid {...props} rowHeightsOptions={{ defaultHeight: 'auto' }} /> + ); + + openCellPopover('B'); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '24.5px') + .should('have.css', 'top', '151px'); + + // The shorter cell content should not have the same top position + openCellPopover('A'); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '19px') + .should('have.css', 'top', '103px'); + }); + }); }); From c5343af33c52a3f57538f517c27c193d89dc916e Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 16:18:40 -0700 Subject: [PATCH 15/16] =?UTF-8?q?=F0=9F=94=A5=20Remove=20Safari=20animatio?= =?UTF-8?q?n=20workaround=20now=20that=20Safari=2017=20is=20out?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../datagrid/_data_grid_data_row.scss | 27 ------------------- 1 file changed, 27 deletions(-) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 1841427b646..5a6869fe66c 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -38,22 +38,6 @@ animation-delay: $euiAnimSpeedNormal; animation-fill-mode: forwards; } - /* - * For some incredibly bizarre reason, Safari doesn't correctly update the flex - * width of the content (when rows are an undefined height/single flex row), - * which causes the action icons to overlap & makes the content less readable. - * This workaround "animation" forces a rerender of the flex content width - * - * TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved - */ - .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__content { - animation-name: euiDataGridCellActionsSafariWorkaround; - animation-duration: 1000ms; // I don't know why the duration matters or why it being longer works more consistently 🥲 - animation-delay: $euiAnimSpeedNormal + $euiAnimSpeedExtraFast; // Wait for above animation to finish - animation-iteration-count: 1; - animation-fill-mode: forwards; - animation-timing-function: linear; - } } // On focus, directly show action buttons (without animation) @@ -255,14 +239,3 @@ width: $euiSizeM; } } -@keyframes euiDataGridCellActionsSafariWorkaround { - from { - width: 100%; - flex-basis: 100%; - } - - to { - width: auto; - flex-basis: auto; - } -} From a8c1af730414fc5b9493f231aaa5d9196544a64d Mon Sep 17 00:00:00 2001 From: Cee Chen <constance.chen@elastic.co> Date: Wed, 4 Oct 2023 18:28:08 -0700 Subject: [PATCH 16/16] =?UTF-8?q?=F0=9F=92=80=20CI=20pixel=20aliasing=20sh?= =?UTF-8?q?enanigans?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../datagrid/body/data_grid_cell_popover.spec.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx index 9e58a654f1f..0c4dd05fb04 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx @@ -157,7 +157,8 @@ describe('EuiDataGridCellPopover', () => { openCellPopover('B'); cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'left', '24.5px') - .should('have.css', 'top', '104px'); + .should('have.css', 'top') + .and('match', /^(104|103)px/); // CI is off by 1 px }); it('lineCount row height', () => { @@ -171,7 +172,8 @@ describe('EuiDataGridCellPopover', () => { cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'left', '24.5px') - .should('have.css', 'top', '127px'); + .should('have.css', 'top') + .and('match', /^(127|126)px/); // CI is off by 1 px }); it('numerical row height', () => { @@ -183,7 +185,8 @@ describe('EuiDataGridCellPopover', () => { // Should not be anchored to the bottom of the overflowing text cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'left', '24.5px') - .should('have.css', 'top', '106px'); + .should('have.css', 'top') + .and('match', /^(106|105)px/); // CI is off by 1 px }); it('auto row height', () => { @@ -194,13 +197,15 @@ describe('EuiDataGridCellPopover', () => { openCellPopover('B'); cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'left', '24.5px') - .should('have.css', 'top', '151px'); + .should('have.css', 'top') + .and('match', /^(151|150)px/); // CI is off by 1 px // The shorter cell content should not have the same top position openCellPopover('A'); cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'left', '19px') - .should('have.css', 'top', '103px'); + .should('have.css', 'top') + .and('match', /^(103|102)px/); // CI is off by 1 px }); }); });