diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 85841317fe0..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" >
-
- 0, A -
- + 0, A
+
-
- 0, B -
- + 0, B
+
-
- 1, A -
- + 1, A
+
-
- 1, B -
- + 1, B
+
-
- 2, A -
- + 2, A
+
-
- 2, B -
- + 2, B
+
@@ -1251,25 +1227,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` data-focus-lock-disabled="disabled" >
-
- 0 -
- + 0
+
-
- 0, A -
- + 0, A
+
-
- 0, B -
- + 0, B
+
-
- 0 -
- + 0
+
-
- 1 -
- + 1
+
-
- 1, A -
- + 1, A
+
-
- 1, B -
- + 1, B
+
-
- 1 -
- + 1
+
-
- 2 -
- + 2
+
-
- 2, A -
- + 2, A
+
-
- 2, B -
- + 2, B
+
-
- 2 -
- + 2
+
-
- 0, A -
- + 0, A
+
-
- 0, B -
- + 0, B
+
-
- 1, A -
- + 1, A
+
-
- 1, B -
- + 1, B
+
-
- 2, A -
- + 2, A
+
-
- 2, B -
- + 2, B
+
@@ -2489,25 +2393,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` tabindex="-1" >
-
- 0, A -
- + 0, A
+
-
- 0, B -
- + 0, B
+
-
- 1, A -
- + 1, A
+
-
- 1, B -
- + 1, B
+
-
- 2, A -
- + 2, A
+
-
- 2, B -
- + 2, B
+
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index cfaa2a9095b..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__expandContent { - 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) @@ -95,23 +79,6 @@ &.euiDataGridRowCell--capitalize { text-transform: capitalize; } - - .euiDataGridRowCell__definedHeight { - @include euiTextBreakWord; - flex-grow: 1; - } - - // 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 { @@ -130,39 +97,51 @@ @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__actions { + flex-grow: 0; + } .euiDataGridRowCell--controlColumn & { + height: 100%; align-items: center; } } -.euiDataGridRowCell__expandContent { - flex-grow: 1; -} - -.euiDataGridRowCell__contentByHeight { - flex-grow: 1; - height: 100%; +.euiDataGridRowCell__numericalHeight { + // Without this rule, popover anchors content that overflows off the page + [data-euiportal], + .euiPopover, + .euiPopover__anchor { + height: 100%; + } } // Cell actions -.euiDataGridRowCell__expandActions { +.euiDataGridRowCell__actions { display: flex; -} -@include euiDataGridRowCellActions($definedHeight: false) { - flex-grow: 0; -} -@include euiDataGridRowCellActions($definedHeight: true) { - background-color: $euiColorEmptyShade; - position: absolute; - right: 0; - top: 0; - padding: $euiDataGridCellPaddingM 0; + + &--overlay { + position: absolute; + right: 0; + top: 0; + padding: $euiDataGridCellPaddingM 0; + background-color: $euiColorEmptyShade; + } } .euiDataGridRowCell__actionButtonIcon { @@ -181,20 +160,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; } } @@ -240,10 +219,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__defaultHeight .euiDataGridRowCell__actions { transform: translateY(1px); } } @@ -259,14 +239,3 @@ width: $euiSizeM; } } -@keyframes euiDataGridCellActionsSafariWorkaround { - from { - width: 100%; - flex-basis: 100%; - } - - to { - width: auto; - flex-basis: auto; - } -} 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/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap index bce634a36b1..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" >
-
- hello -
- + hello
+
-
- world -
- + world
+
@@ -206,25 +198,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render tabindex="-1" >
-
- lorem -
- + lorem
+
-
- ipsum -
- + 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..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" >
-
- - cell content - -
- + + cell content +
+
-
- - cell content - -
- + + cell content +
+
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..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" >
-
-
- - -
+
+ +
-
+
`; diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx index 6aa83e8677b..0271566e937 100644 --- a/src/components/datagrid/body/data_grid_cell.test.tsx +++ b/src/components/datagrid/body/data_grid_cell.test.tsx @@ -718,19 +718,61 @@ describe('EuiDataGridCell', () => { }); }); - it('renders certain classes/styles if rowHeightOptions is passed', () => { - const component = mount( - - ); + 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( + + ); + + expect( + component.find('.euiDataGridRowCell__defaultHeight').exists() + ).toBe(true); + expect(component.find('.eui-textTruncate').exists()).toBe(true); + }); + + test('auto', () => { + const component = mount( + + ); + + expect(component.find('.euiDataGridRowCell__autoHeight').exists()).toBe( + true + ); + expect(component.find('.eui-textBreakWord').exists()).toBe(true); + }); + + test('numerical', () => { + const component = mount( + + ); + + expect( + component.find('.euiDataGridRowCell__numericalHeight').exists() + ).toBe(true); + expect(component.find('.eui-textBreakWord').exists()).toBe(true); + }); + + test('lineCount', () => { + const component = mount( + + ); + + 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 0cdb33969fa..23ec939abb3 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'; @@ -24,6 +25,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'; @@ -34,6 +36,7 @@ import { EuiDataGridCellValueElementProps, EuiDataGridCellValueProps, EuiDataGridCellPopoverElementProps, + EuiDataGridRowHeightOption, } from '../data_grid_types'; import { EuiDataGridCellActions, @@ -46,69 +49,108 @@ const EuiDataGridCellContent: FunctionComponent< EuiDataGridCellValueProps & { setCellProps: EuiDataGridCellValueElementProps['setCellProps']; setCellContentsRef: EuiDataGridCell['setCellContentsRef']; + setPopoverAnchorRef: MutableRefObject; isExpanded: boolean; - isDefinedHeight: boolean; + isControlColumn: boolean; isFocused: boolean; ariaRowIndex: number; + rowHeight?: EuiDataGridRowHeightOption; + cellHeightType: string; + cellActions?: ReactNode; } > = memo( ({ renderCellValue, column, setCellContentsRef, - rowHeightsOptions, + setPopoverAnchorRef, rowIndex, colIndex, ariaRowIndex, + rowHeight, rowHeightUtils, - isDefinedHeight, + isControlColumn, isFocused, + cellHeightType, + cellActions, ...rest }) => { // React is more permissible than the TS types indicate const CellElement = renderCellValue as JSXElementConstructor; - return ( - <> -
- { + 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} + > + +
+ ); + if (cellHeightType === 'lineCount' && !isControlColumn) { + const lines = rowHeightUtils!.getLineCount(rowHeight)!; + cellContent = ( + + {cellContent} + + ); + } + + const screenReaderText = ( + + - - +

+ + ); + + return ( +
+ {cellContent} + {screenReaderText} + {cellActions} +
); } ); @@ -651,33 +693,52 @@ export class EuiDataGridCell extends Component< } }; - const isDefinedHeight = !!rowHeightUtils?.getRowHeightOption( + const rowHeight = rowHeightUtils?.getRowHeightOption( rowIndex, rowHeightsOptions ); + const cellHeightType = + 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, + setPopoverAnchorRef: this.popoverAnchorRef, + rowHeight, rowHeightUtils, - isDefinedHeight, + isControlColumn: cellClasses.includes( + 'euiDataGridRowCell--controlColumn' + ), ariaRowIndex, }; - const anchorClass = 'euiDataGridRowCell__expandFlex'; - const expandClass = isDefinedHeight - ? 'euiDataGridRowCell__contentByHeight' - : 'euiDataGridRowCell__expandContent'; + const cellActions = showCellActions && ( + { + if (popoverIsOpen) { + closeCellPopover(); + } else { + openCellPopover({ rowIndex: visibleRowIndex, colIndex }); + } + }} + /> + ); - let innerContent = ( + const cellContent = isExpandable ? ( + + ) : ( -
-
- -
-
+ ); - if (isExpandable) { - innerContent = ( -
-
- -
- {showCellActions && ( - { - if (popoverIsOpen) { - closeCellPopover(); - } else { - openCellPopover({ rowIndex: visibleRowIndex, colIndex }); - } - }} - /> - )} -
- ); - } - - const content = ( + const cell = (
- {innerContent} + {cellContent}
); return rowManager && !IS_JEST_ENVIRONMENT ? createPortal( - content, + cell, rowManager.getRow({ rowIndex, visibleRowIndex, @@ -757,6 +790,6 @@ export class EuiDataGridCell extends Component< height: style!.height as number, // comes in as an integer from react-window }) ) - : content; + : cell; } } 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..151f3003814 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(`
{ expect(component).toMatchInlineSnapshot(`
{ `); }); + it('renders with overlay positioning for non default height cells', () => { + const { container } = render( + + ); + + // 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..bc3ed204dfe 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,11 @@ export const EuiDataGridCellActions = ({ ); }, [column, colIndex, rowIndex]); - return ( -
- {[...additionalButtons, expandButton]} -
- ); + const classes = classNames('euiDataGridRowCell__actions', { + 'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default', + }); + + return
{[...additionalButtons, expandButton]}
; }; export const EuiDataGridCellPopoverActions = ({ 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..0c4dd05fb04 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,82 @@ 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(); + + openCellPopover('B'); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '24.5px') + .should('have.css', 'top') + .and('match', /^(104|103)px/); // CI is off by 1 px + }); + + it('lineCount row height', () => { + cy.realMount( + + ); + openCellPopover('B'); + + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '24.5px') + .should('have.css', 'top') + .and('match', /^(127|126)px/); // CI is off by 1 px + }); + + it('numerical row height', () => { + cy.realMount( + + ); + 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') + .and('match', /^(106|105)px/); // CI is off by 1 px + }); + + it('auto row height', () => { + cy.realMount( + + ); + + openCellPopover('B'); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]') + .should('have.css', 'left', '24.5px') + .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') + .and('match', /^(103|102)px/); // CI is off by 1 px + }); + }); }); 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'; }; /**