[EuiTable] Add optional transparent table via `hasBackground` prop by mgadewoll · Pull Request #9224 · elastic/eui

mgadewoll · 2025-11-19T08:49:42Z

Summary

closes #9186
closes #8231

This PR updates EuiTable and the more specific EuiBasicTable and EuiInMemoryTable components by adding support for the prop hasBackground.
This prop controls the appliance of a background color on the table component and respective sub components. When hasBackground=true, the table has no background color besides state backgrounds (hover, selected, marked).
Mobile tables (which look like panels) with hasBackground=false will have no background, no shadow and borders instead.

API changes

prop	type	default value	description
`hasBackground`	`boolean`	`true`	Toggles the table's background on/off

Additional changes

replaces a few deprecated theme tokens
- adds euiTheme.components.tableFooterBackground to handle the custom background color definitions (we might want to check these eventually, if they should be aligned with existing tokens)
- updates the text color token for . euiTableRowCell__mobileHeader which results in a slight color change in dark mode (#7186A8 -> #98A8C3
fixes an alignment bug for table actions when switching color modes. The reason for the bug was an updated Emotion style order due to equal specificity. By ensuring a higher specificity we ensure a stable style appliance.

Why are we making this change?

💅 UI updates: This update is part of the design work 🔒 to update the look and feel of the UI. This update on EuiTable specifically will support creating more clean page/table layouts.

Screenshots #

hasBackground

`hasBackground=true` (default)	`hasBackground=false`

Updated `.euiTableRowCell__mobileHeader` color

before	after

Mobile table action buttons alignment bug

before	after
Screen.Recording.2025-11-19.at.09.39.05.mov	Screen.Recording.2025-11-19.at.09.39.31.mov

Impact to users

🟢 There are no code updates required by consumers.

ℹ️ Due to the added hasBackground prop and related Emotion class, snapshot tests may fail and require updates.

QA

🧪 Storybook:

Checks:

verify hasBackground applies correctly:
- tables have no background
- table footer has no background
- expanded rows have no background
- state backgrounds for hover, marked, selected etc still work as expected
verify that there is no unexpected regression for hasBackground=true and production
verify that the action buttons in mobile tables don't change position when toggling between color modes

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- will be used to resolve deprecated legacy token

- adjusts styles and classes to ensure separation between background styles and non-background styles based on prop - uses a context to share the prop as prop drilling wouldn't easily be possible and manually setting hasBAckground on sub component seems tedious

- it's not a 1:1 color replacement but a replacement that makes sense within the new token system

- triggered due to equal specificity. On colorMode change newly added Emotion styles would override in loading order and cause shifts

- triggered due to new class for hasBackground

- changes are due to the reduced 1px bottom border as well as adding additional hasBackground images

JoseLuisGJ

LGTM 👍

acstll

A 👻 and a question. Code looks correct and everything is working nicely as expected, couldn't find any regressions compared to production (went through all QA steps).

packages/eui/src/components/basic_table/basic_table.stories.tsx

packages/eui/src/components/table/table_context.ts

acstll

🟢 Thanks for addressing my comments!

- we actually didn't need the extra isEmpty check

elasticmachine · 2025-11-20T17:15:16Z

💚 Build Succeeded

History

💔 Build #2019 failed 95914c1
💚 Build #2012 succeeded 2320663
💚 Build #1992 succeeded a74366a

cc @mgadewoll

elasticmachine · 2025-11-20T17:58:57Z

💚 Build Succeeded

Buildkite Build
Commit: d9807ae

History

💚 Build #5274 succeeded 2320663
💚 Build #5258 succeeded a74366a

cc @mgadewoll

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](elastic/eui#8231)) ([#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <jorge.sanz@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([elastic#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([elastic#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([elastic#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([elastic#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([elastic#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([elastic#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([elastic#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([elastic#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([elastic#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([elastic#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([elastic#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([elastic#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([elastic#8231](elastic/eui#8231)) ([elastic#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([elastic#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <jorge.sanz@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

mgadewoll self-assigned this Nov 19, 2025

mgadewoll added 8 commits November 19, 2025 09:58

feat: add component token tableFooterBackground

c9905e1

- will be used to resolve deprecated legacy token

refactor: replace depracted legacy token

eef0101

- it's not a 1:1 color replacement but a replacement that makes sense within the new token system

fix: prevent position changes on render updates (elastic#8231)

a50023b

- triggered due to equal specificity. On colorMode change newly added Emotion styles would override in loading order and cause shifts

docs(storybook): update stories to showcase hasBackground

ba22393

test: update snapshots

f56a47c

- triggered due to new class for hasBackground

test(vrt): update reference images

7895447

- changes are due to the reduced 1px bottom border as well as adding additional hasBackground images

chore: add changelogs

a74366a

mgadewoll force-pushed the table/9186-transparent-background branch from a0f295b to a74366a Compare November 19, 2025 08:58

mgadewoll requested a review from JoseLuisGJ November 19, 2025 08:58

mgadewoll marked this pull request as ready for review November 19, 2025 09:44

mgadewoll requested a review from a team as a code owner November 19, 2025 09:44

JoseLuisGJ approved these changes Nov 19, 2025

View reviewed changes

acstll self-requested a review November 20, 2025 11:21

acstll requested changes Nov 20, 2025

View reviewed changes

packages/eui/src/components/basic_table/basic_table.stories.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/basic_table/basic_table.stories.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/table/table_context.ts Show resolved Hide resolved

mgadewoll added 2 commits November 20, 2025 13:56

chore: cleanup log

d48ae1e

chore: add comment

2320663

acstll approved these changes Nov 20, 2025

View reviewed changes

refactor: small cleanup

d9807ae

- we actually didn't need the extra isEmpty check

mgadewoll force-pushed the table/9186-transparent-background branch from 95914c1 to d9807ae Compare November 20, 2025 16:59

mgadewoll merged commit 4dbf6c2 into elastic:main Nov 21, 2025
9 checks passed

JasonStoltz mentioned this pull request Nov 24, 2025

[EuiBasicTable] Add optional background transparency (default to false) #9186

Closed

weronikaolejniczak mentioned this pull request Nov 24, 2025

Update EUI to 109.2.0 elastic/kibana#244032

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiTable] Add optional transparent table via `hasBackground` prop#9224

[EuiTable] Add optional transparent table via `hasBackground` prop#9224
mgadewoll merged 11 commits intoelastic:mainfrom
mgadewoll:table/9186-transparent-background

mgadewoll commented Nov 19, 2025 •

edited

Loading

Uh oh!

JoseLuisGJ left a comment

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Uh oh!

elasticmachine commented Nov 20, 2025

Uh oh!

elasticmachine commented Nov 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mgadewoll commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API changes

Additional changes

Why are we making this change?

Screenshots #

hasBackground

Updated .euiTableRowCell__mobileHeader color

Mobile table action buttons alignment bug

Impact to users

QA

General checklist

Uh oh!

JoseLuisGJ left a comment

Choose a reason for hiding this comment

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 20, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 20, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Nov 19, 2025 •

edited

Loading

Updated `.euiTableRowCell__mobileHeader` color