[EuiTableRowCell] Fix th scope="row" text alignment (#7681)

elastic · Apr 12, 2024 · 34d83b8 · 34d83b8
1 parent 8df8aef
commit 34d83b8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/changelogs/upcoming/7681.md b/changelogs/upcoming/7681.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a visual text alignment regression in `EuiTableRowCell`s with the `row` header scope
diff --git a/src-docs/src/views/tables/auto/auto.tsx b/src-docs/src/views/tables/auto/auto.tsx
@@ -217,6 +217,7 @@ export default () => {
         tableCaption="Demo of EuiBasicTable's table layout options"
         items={users}
         columns={columns}
+        rowHeader="firstName"
         tableLayout={tableLayout === 'tableLayoutAuto' ? 'auto' : 'fixed'}
       />
     </>

diff --git a/src/components/table/table_row_cell.styles.ts b/src/components/table/table_row_cell.styles.ts
@@ -14,6 +14,7 @@ import {
   euiFontSize,
   euiTextTruncate,
   logicalCSS,
+  logicalTextAlignCSS,
 } from '../../global_styling';
 
 import { euiTableVariables } from './table.styles';
@@ -32,8 +33,9 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.text};
     `,
     rowHeader: css`
-      /* Unset the automatic browser bolding applied to [th] elements */
+      /* Unset the automatic browser bolding and center alignment applied to [th] elements */
       font-weight: ${euiTheme.font.weight.regular};
+      ${logicalTextAlignCSS('left')}
     `,
     isExpander: css`
       ${hasIcons}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed a visual text alignment regression in `EuiTableRowCell`s with the `row` header scope