[EuiDataGrid][BugFix]: Fix visible overflowing truncated text

packages/eui/changelogs/upcoming/7793.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed a visual bug on `EuiDataGrid` cells when using `rowHeightOptions.defaultHeight.lineCount` where the clamped text was still visible for some font sizes
+

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;
+      }
     }
   }
 }

packages/eui/src/components/datagrid/data_grid.stories.tsx

@@ -213,7 +213,6 @@ const meta: Meta<EuiDataGridProps> = {
     minSizeForControls: MINIMUM_WIDTH_FOR_GRID_CONTROLS,
   },
 };
-enableFunctionToggleControls(meta, ['onColumnResize']);
 
 export default meta;
 type Story = StoryObj<EuiDataGridProps>;
@@ -299,6 +298,162 @@ export const Playground: Story = {
   },
   render: (args: EuiDataGridProps) => <StatefulDataGrid {...args} />,
 };
+enableFunctionToggleControls<EuiDataGridProps>(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) => <StatefulDataGrid {...args} />,
+};
+
+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) => <StatefulDataGrid {...args} />,
+};
+
+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) => <StatefulDataGrid {...args} />,
+};
 
 const StatefulDataGrid = (props: EuiDataGridProps) => {
   const { pagination, sorting, columnVisibility, ...rest } = props;