Skip to content

Conversation

@smith
Copy link
Contributor

@smith smith commented Oct 13, 2025

Summary

(This is a follow-up to #9054, which makes a similar change to EuiProgress. This PR is for the loading state of EuiBasicTable.)

When the user settings request reduced motion, the EUI basic table component's loading state does not respect this setting. Fix this by only animating it when reduced motion is not requested.

Why are we making this change?

The prefers-reduced-motion media feature detects whether a user has requested reduced animations. The can be because of vestibular disorders.

Screenshots #

CleanShot 2025-10-13 at 15 11 20

prefers-contrast forced-colors
image image

Impact to users

  • If no preference for reduced motion: No change
  • If prefers reduced motion: Shows a static bar instead of a moving one

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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)
  • 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)

@smith smith requested a review from a team as a code owner October 13, 2025 20:12
@mgadewoll mgadewoll self-requested a review October 14, 2025 06:33
@smith smith requested a review from mgadewoll October 15, 2025 04:42
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@mgadewoll mgadewoll changed the title Do not animate EuiBasicTable loading bar when user prefers reduced motion [EuiBasicTable] Do not animate loading bar when user prefers reduced motion Oct 15, 2025
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 The changes are LGTM and reduced motion styling works as expected. Thank you for contributing! 🎉

@mgadewoll mgadewoll merged commit badbb1f into elastic:main Oct 15, 2025
7 checks passed
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 <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants