Skip to content

feat(eui): add onFullScreenChange prop to EuiDataGrid#8765

Merged
weronikaolejniczak merged 10 commits intoelastic:mainfrom
weronikaolejniczak:feat/data-grid-full-screen-handler
Jun 17, 2025
Merged

feat(eui): add onFullScreenChange prop to EuiDataGrid#8765
weronikaolejniczak merged 10 commits intoelastic:mainfrom
weronikaolejniczak:feat/data-grid-full-screen-handler

Conversation

@weronikaolejniczak
Copy link
Copy Markdown
Contributor

@weronikaolejniczak weronikaolejniczak commented Jun 6, 2025 •
edited
Loading

Summary

On this PR, I:

The change is as simple as adding onFullScreenChange optional prop and passing it to useDataGridFullScreenSelector to call on fullscreen button click.

In case setIsFullScreen is used to trigger fullscreen from the consumer side, they could trigger "side-effects" wherever they call setIsFullScreen. That's why I don't call onFullScreenChange alongside it.

Why are we making this change?

Closes #7604

Kibana DataDiscovery team needs to use a mutation observer workaround to apply a z-index when going fullscreen, otherwise there are visual issues with the overlay content:

313044206-3b4b3515-43f5-46dd-a194-316d76d497b9.mp4

See the related PR with a workaround.

Impact to users

Kibana

The impact is low. onFullScreenChange helps address tech-debt and remove redundant logic.

QA

Specific checklist

  • Check that fullscreen mode in EuiDataGrid works as expected and there is no regression

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)

Testing notes

Storybook

Screen.Recording.2025-06-12.at.19.10.50.mov

Documentation

Screenshot 2025-06-12 at 19 19 47

Screenshot 2025-06-12 at 19 18 15

Staging link

Links to showFullScreenSelector in Toolbar props table

@weronikaolejniczak weronikaolejniczak self-assigned this Jun 6, 2025
@weronikaolejniczak weronikaolejniczak force-pushed the feat/data-grid-full-screen-handler branch 4 times, most recently from 746177d to e3e8553 Compare June 12, 2025 17:19
@weronikaolejniczak weronikaolejniczak marked this pull request as ready for review June 13, 2025 10:21
@weronikaolejniczak weronikaolejniczak requested a review from a team as a code owner June 13, 2025 10:21
mgadewoll
mgadewoll reviewed Jun 17, 2025
View reviewed changes
@weronikaolejniczak
Copy link
Copy Markdown
Contributor Author

weronikaolejniczak commented Jun 17, 2025

@mgadewoll thank you for the review 🙏🏻 I applied the suggestions you proposed.

mgadewoll
mgadewoll approved these changes Jun 17, 2025
View reviewed changes
Copy link
Copy Markdown
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.

🟢 Changes are looking good and the added callback works as expected.

@weronikaolejniczak weronikaolejniczak force-pushed the feat/data-grid-full-screen-handler branch from 34cd597 to d6d4101 Compare June 17, 2025 08:33
@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jun 17, 2025

💚 Build Succeeded

History

cc @weronikaolejniczak

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jun 17, 2025

💚 Build Succeeded

History

cc @weronikaolejniczak

@weronikaolejniczak weronikaolejniczak merged commit 367860e into elastic:main Jun 17, 2025
5 checks passed
@acstll acstll mentioned this pull request Jun 18, 2025
Merged
acstll added a commit to elastic/kibana that referenced this pull request Jun 19, 2025
@acstll
Upgrade EUI to v103.1.0 (#224391)
b0d46f7 
`103.0.0` ⏩ `103.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

- **EuiDataGrid** now takes an `onFullScreenChange` callback
- An accessibility fix in **EuiComboBox**
- 3 bug fixes

## Package updates

### `@elastic/eui`

## [`v103.1.0`](https://github.com/elastic/eui/releases/v103.1.0)

- Added `onFullScreenChange` prop to `EuiDataGrid` to handle changes
when the component enters or exits fullscreen mode
([#8765](elastic/eui#8765))

**Bug fixes**

- Fixed `onChange` being triggered twice when the checkbox in
`EuiCheckableCard` is clicked
([#8786](elastic/eui#8786))
- Fixed a circular import on the legacy Amsterdam theme that would cause
the theme usage to break
([#8780](elastic/eui#8780))
- Fixed high contrast theme token overrides not being applied
([#8742](elastic/eui#8742))

**Accessibility**

- Fixed form errors not being read by screen readers for `EuiComboBox`
inside of `EuiFormRow`
([#8798](elastic/eui#8798))

<!--ONMERGE {"backportTargets":["8.19","9.0"]} ONMERGE-->
acstll added a commit to acstll/kibana that referenced this pull request Jun 19, 2025
@acstll
Upgrade EUI to v103.1.0 (elastic#224391)
adadd9b 
`103.0.0` ⏩ `103.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

- **EuiDataGrid** now takes an `onFullScreenChange` callback
- An accessibility fix in **EuiComboBox**
- 3 bug fixes

## Package updates

### `@elastic/eui`

## [`v103.1.0`](https://github.com/elastic/eui/releases/v103.1.0)

- Added `onFullScreenChange` prop to `EuiDataGrid` to handle changes
when the component enters or exits fullscreen mode
([elastic#8765](elastic/eui#8765))

**Bug fixes**

- Fixed `onChange` being triggered twice when the checkbox in
`EuiCheckableCard` is clicked
([elastic#8786](elastic/eui#8786))
- Fixed a circular import on the legacy Amsterdam theme that would cause
the theme usage to break
([elastic#8780](elastic/eui#8780))
- Fixed high contrast theme token overrides not being applied
([elastic#8742](elastic/eui#8742))

**Accessibility**

- Fixed form errors not being read by screen readers for `EuiComboBox`
inside of `EuiFormRow`
([elastic#8798](elastic/eui#8798))

<!--ONMERGE {"backportTargets":["8.19","9.0"]} ONMERGE-->

(cherry picked from commit b0d46f7)

# Conflicts:
#	package.json
#	yarn.lock
@weronikaolejniczak weronikaolejniczak deleted the feat/data-grid-full-screen-handler branch February 10, 2026 10:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mgadewoll mgadewoll mgadewoll approved these changes

Assignees

@weronikaolejniczak weronikaolejniczak

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[EuiDataGrid] Provide an onFullScreenChange callback

4 participants

@weronikaolejniczak @elasticmachine @mgadewoll @JasonStoltz