[EuiTable] Fix shadow styles for mobile tables#9115
Merged
mgadewoll merged 3 commits intoelastic:mainfrom Oct 16, 2025
Merged
Conversation
260a926 to
6f51707
Compare
Collaborator
💚 Build SucceededHistory
cc @mgadewoll |
Collaborator
💚 Build Succeeded
History
cc @mgadewoll |
tkajtoch
reviewed
Oct 16, 2025
|
|
||
| /* prevent the shadow from overlapping; | ||
| NOTE: we might want to consider refactoring tables to use tbody grouping to apply styles for a row group */ | ||
| clip-path: polygon(-50% 0, 150% 0, 150% 100vh, -50% 100vh); |
tkajtoch
approved these changes
Oct 16, 2025
Member
tkajtoch
left a comment
There was a problem hiding this comment.
The changes look and work great! I compared all EuiBasicTable stories against production and found no regressions in any viewport size
acstll
added a commit
to elastic/kibana
that referenced
this pull request
Oct 23, 2025
- `@elastic/eui`: `v107.0.0` ⏩ `v107.0.1` - `@elastic/eslint-plugin-eui`: `v2.4.0` ⏩ `v2.5.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 Related to elastic/eui#9100 - Updated snapshot f90ae29 - Added missing `aria-label` for `EuiBetaBadge` - [Reporting] 6d10edd - [ML] ce58009 - Added new translation key, ran `node scripts/i18n_check` — is there anything else that should be done in this regard? ## Package updates ### `@elastic/eui` [`v107.0.1`](https://github.com/elastic/eui/releases/v107.0.1) **Bug fixes** - Fixed `prismjs` theme in `EuiCodeBlock` to improve highlighting for the `yaml` language ([#9089](elastic/eui#9089)) - Fixed a visual bug on `EuiTable` where the border for rows in dark mode wasn't applied correctly ([#9115](elastic/eui#9115)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.2 ([#9102](elastic/eui#9102)) **Accessibility** - Fixed incorrect role attribute on `EuiIcon` and `EuiBetaBadge` ([#9100](elastic/eui#9100)) - Make `EuiBasicTable` respect user's reduced motion setting by not animating when in loading state. ([#9095](elastic/eui#9095)) ### `@elastic/eslint-plugin-eui` [`v2.5.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v250) - Added new `accessible-interactive-element` rule. ([#9093](elastic/eui#9093)) - Added new `tooltip-focusable-anchor` rule. ([#9051](elastic/eui#9051)) - Excluded `EuiButtonEmpty` from the `no-unnamed-interactive-element` rule. ([#9046](elastic/eui#9046)) **Bug fixes** - Fixed `no-css-color` rule to allow CSS keywords like `currentcolor`, `transparent`, and `inherit` ([#9092](elastic/eui#9092)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
17 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR is a follow-up to #9088 which introduced changes to the EUI shadow utils.
The automatically added floating border in dark mode does not work as expected for the current table markup, as the pseudo element border won't be applied correctly and additional nesting in tables is not allowed as valid HTML.
Instead, this PR removes the automatic floating border and applies a full
borderstyling.Additionally it fixes an issue with overlapping shadows of expanded rows. This issue existed previous to the shadow updates, but the new shadows enhance the issue.
Why are we making this change?
💅 UI consistency: Fixes/Prevents visual issues.
Screenshots #
Impact to users
🟢 There are no changes needed on consumer side.
QA
General checklist
@defaultif default values are missing) and playground toggles