feat(eui): add onFullScreenChange prop to EuiDataGrid

[weronikaolejniczak]

Summary

On this PR, I:

• feat(eui): add onFullScreenChange prop to EuiDataGrid
• refactor(website): use hyphens for a list - just a small syntax change for consistency
• chore(eui): add a storybook toggle for onFullScreenChange
• feat(website): add a top-level prop entry for onFullScreenMode
• chore(eui): test onFullScreenChange in EuiDataGrid

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 https://github.com/elastic/eui/issues/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:

https://github.com/user-attachments/assets/428e0d1f-b3c7-4cc6-b49f-1ffde877ca29

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~
    • (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
  • [x] Added documentation
  • [x] 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
  • [x] Added or updated jest ~and cypress tests~
  • [ ] ~Updated visual regression tests~
• Release checklist
  • [x] 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

https://github.com/user-attachments/assets/2b013abe-2183-48ee-a708-f28f6dc77bae

Documentation

Staging link

Links to showFullScreenSelector in Toolbar props table

[weronikaolejniczak]

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

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: d6d4101dfbc1e053219590a0d564cdbf73db6c97
• Documentation website

History

• :green_heart: Build #545 succeeded 34cd59730d75c6ecb941268d0e6b22ca67c8df6d
• :green_heart: Build #517 succeeded b399a474598206d0e70f0b58362bc562f0c6c4f9
• :green_heart: Build #508 succeeded e3e855321662f1878d558d6cd2dc7463b3aa8eb0
• :green_heart: Build #474 succeeded 746177d2f68de0cb56142ecd4ac738e7fc195871
• :green_heart: Build #471 succeeded 9c046ef613e75d89426175b024ae072bc6c22cdb
• :green_heart: Build #469 succeeded c6b8d2a6ebba98683786f3f7860d8ae8f21ec445

cc @weronikaolejniczak

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: d6d4101dfbc1e053219590a0d564cdbf73db6c97

History

• :green_heart: Build #4182 succeeded b399a474598206d0e70f0b58362bc562f0c6c4f9
• :green_heart: Build #4174 succeeded e3e855321662f1878d558d6cd2dc7463b3aa8eb0
• :green_heart: Build #4150 succeeded 746177d2f68de0cb56142ecd4ac738e7fc195871
• :green_heart: Build #4148 succeeded 9c046ef613e75d89426175b024ae072bc6c22cdb
• :green_heart: Build #4118 succeeded a2c535c73a4997bfd7972ed444ad7c2b15c30973

cc @weronikaolejniczak