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(` -
- `); + 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(` - - `); + 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(` - - `); + 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(` - - `); + 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