diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png new file mode 100644 index 00000000000..60d50369c9b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Height_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Height_Line_Count.png new file mode 100644 index 00000000000..a82d71e1cee Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Height_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Row_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Row_Height.png new file mode 100644 index 00000000000..6a765ae90da Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Row_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png new file mode 100644 index 00000000000..f43bd36abd0 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Height_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Height_Line_Count.png new file mode 100644 index 00000000000..7e192de30e2 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Height_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Row_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Row_Height.png new file mode 100644 index 00000000000..0931cb4818b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Row_Height.png differ diff --git a/packages/eui/changelogs/upcoming/7793.md b/packages/eui/changelogs/upcoming/7793.md new file mode 100644 index 00000000000..73560fe579c --- /dev/null +++ b/packages/eui/changelogs/upcoming/7793.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed an `EuiDataGrid` visual bug when using `lineCount` row heights where the clamped text was still visible for some font sizes + diff --git a/packages/eui/src/components/datagrid/_data_grid_data_row.scss b/packages/eui/src/components/datagrid/_data_grid_data_row.scss index b28a0cabbc1..08cc0994af9 100644 --- a/packages/eui/src/components/datagrid/_data_grid_data_row.scss +++ b/packages/eui/src/components/datagrid/_data_grid_data_row.scss @@ -16,6 +16,12 @@ &--autoHeight { height: auto; } + + // Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 + &--lineCountHeight { + padding-bottom: 0; + border-bottom: $euiDataGridCellPaddingM solid transparent; + } } // Hack to allow focus trap to still stretch to full row height on defined heights @@ -259,6 +265,11 @@ @include euiDataGridRowCell { .euiDataGridRowCell__content { padding: $euiDataGridCellPaddingS; + + &--lineCountHeight { + padding-bottom: 0; + border-bottom: $euiDataGridCellPaddingS solid transparent; + } } } } @@ -267,6 +278,11 @@ @include euiDataGridRowCell { .euiDataGridRowCell__content { padding: $euiDataGridCellPaddingL; + + &--lineCountHeight { + padding-bottom: 0; + border-bottom: $euiDataGridCellPaddingL solid transparent; + } } } } diff --git a/packages/eui/src/components/datagrid/data_grid.stories.tsx b/packages/eui/src/components/datagrid/data_grid.stories.tsx index bbecb42ce54..590bba21055 100644 --- a/packages/eui/src/components/datagrid/data_grid.stories.tsx +++ b/packages/eui/src/components/datagrid/data_grid.stories.tsx @@ -213,7 +213,6 @@ const meta: Meta = { minSizeForControls: MINIMUM_WIDTH_FOR_GRID_CONTROLS, }, }; -enableFunctionToggleControls(meta, ['onColumnResize']); export default meta; type Story = StoryObj; @@ -299,6 +298,162 @@ export const Playground: Story = { }, render: (args: EuiDataGridProps) => , }; +enableFunctionToggleControls(Playground, ['onColumnResize']); + +export const HeightLineCount: Story = { + parameters: { + controls: { + include: ['gridStyle', 'rowHeightsOptions', 'width', 'height'], + }, + }, + args: { + columns, + rowCount: 5, + renderCellValue: RenderCellValue, + // setup for easier testing/QA + columnVisibility: { + visibleColumns: [ + 'name', + 'email', + 'account', + 'location', + 'date', + 'amount', + 'phone', + 'version', + ], + setVisibleColumns: () => {}, + }, + gridStyle: { + fontSize: 's', + cellPadding: 'm', + border: 'all', + stripes: false, + header: 'shade', + footer: 'overline', + stickyFooter: true, + rowHover: 'highlight', + rowClasses: {}, + }, + width: '700px', + height: '', + toolbarVisibility: false, + rowHeightsOptions: { + defaultHeight: { + lineCount: 1, + }, + lineHeight: undefined, + scrollAnchorRow: undefined, + }, + }, + render: (args: EuiDataGridProps) => , +}; + +export const RowHeight: Story = { + parameters: { + controls: { + include: ['gridStyle', 'rowHeightsOptions', 'width', 'height'], + }, + }, + args: { + columns, + rowCount: 5, + renderCellValue: RenderCellValue, + // setup for easier testing/QA + columnVisibility: { + visibleColumns: [ + 'name', + 'email', + 'account', + 'location', + 'date', + 'amount', + 'phone', + 'version', + ], + setVisibleColumns: () => {}, + }, + gridStyle: { + fontSize: 's', + cellPadding: 'm', + border: 'all', + stripes: false, + header: 'shade', + footer: 'overline', + stickyFooter: true, + rowHover: 'highlight', + rowClasses: {}, + }, + width: '', + height: '', + toolbarVisibility: false, + rowHeightsOptions: { + defaultHeight: { + height: 48, + }, + rowHeights: {}, + lineHeight: undefined, + scrollAnchorRow: undefined, + }, + }, + render: (args: EuiDataGridProps) => , +}; + +export const CustomRowHeights: Story = { + parameters: { + controls: { + include: ['gridStyle', 'rowHeightsOptions', 'width', 'height'], + }, + }, + args: { + columns, + rowCount: 5, + renderCellValue: RenderCellValue, + // setup for easier testing/QA + columnVisibility: { + visibleColumns: [ + 'name', + 'email', + 'account', + 'location', + 'date', + 'amount', + 'phone', + 'version', + ], + setVisibleColumns: () => {}, + }, + gridStyle: { + fontSize: 's', + cellPadding: 'm', + border: 'all', + stripes: false, + header: 'shade', + footer: 'overline', + stickyFooter: true, + rowHover: 'highlight', + rowClasses: {}, + }, + width: '700px', + height: '', + toolbarVisibility: false, + rowHeightsOptions: { + defaultHeight: { + lineCount: 1, + }, + rowHeights: { + 2: 'auto', + 3: 48, + 4: { + height: 48, + }, + }, + lineHeight: undefined, + scrollAnchorRow: undefined, + }, + }, + render: (args: EuiDataGridProps) => , +}; const StatefulDataGrid = (props: EuiDataGridProps) => { const { pagination, sorting, columnVisibility, ...rest } = props;