[EuiModal] Support closing with outside click by acstll · Pull Request #9137 · elastic/eui

acstll · 2025-10-22T15:42:16Z

Summary

Resolves #8967

This adds a new outsideClickCloses prop to EuiModal. When true, the modal will close when the overlay mask (outside) is clicked.

The warning in the docs has been removed, the the Guidelines section remains intact. I did not find anything regarding outside click what needed to be updated there.

Why are we making this change?

To align with ~~current~~ modern UX expectations.

Impact to users

~~🟢 No impact.~~ The prop defaults to false. 🟡 The type for onClose/onCancel props changed. This will cause type check fails.

onClose for EuiModalProps and onCancel for EuiConfirmModalProps:

onCancel: (
  event?:
    | React.KeyboardEvent<HTMLDivElement>
    | React.MouseEvent<HTMLButtonElement>
+   | MouseEvent
+   | TouchEvent
  ) => void;

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
  - ~~(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)

via new `outsideClickCloses` prop

acstll · 2025-10-22T15:46:59Z

packages/eui/src/components/modal/modal.spec.tsx

+        cy.get('[data-test-subj="modal-trigger"]').click();
+        cy.get('div.euiModal').should('exist');
+        cy.get('div.euiOverlayMask').should('exist');
+        cy.get('div.euiOverlayMask').click({ force: true });


💭 since the overlay is a plain div, I believe click({ force: true }) is appropriate

packages/eui/src/components/modal/modal.tsx

elasticmachine · 2025-10-23T11:24:54Z

💚 Build Succeeded

History

💚 Build #1665 succeeded a21e03c

cc @acstll

elasticmachine · 2025-10-23T11:37:37Z

💚 Build Succeeded

Buildkite Build
Commit: c77692a

History

💚 Build #5012 succeeded a21e03c

cc @acstll

tkajtoch

Thank you for addressing my comment. The changes look great!

If there's ever need to distinguish between these two onClose triggers, we could just add a second argument with a reason or a source

- `@elastic/eui`: `v107.0.1` ⏩ `v108.0.0` - `@elastic/eui-theme-borealis`: `v3.6.0` ⏩ `v4.0.0` --- ## Changes >[!IMPORTANT] This PR removes code related to the legacy Amsterdam theme. But it purposefully keeps Amsterdam palettes in `kbn-palettes` as those are standalone. - removed code related to the legacy theme Amsterdam [[#9090](elastic/eui#9090)] - updated custom types to align with changes to the event type of `onClose` on `EuiModal` [[#9137](elastic/eui#9137)] ## Package updates ### [`v108.0.0`](https://github.com/elastic/eui/releases/v108.0.0) - Updated `EuiModal` to support closing on outside click, via the new `outsideClickCloses` prop ([#9137](elastic/eui#9137)) **Breaking changes** - Removed all "Amsterdam" theme related code in `src/themes/amsterdam` - EUI now only supports the "Borealis" theme in `eui-theme-borealis` ([#9090](elastic/eui#9090)) - Removed `euiTheme.flags.hasGlobalFocusColor` ([#9090](elastic/eui#9090)) - Removed `euiTheme.flags.hasVisColorAdjustment` ([#9090](elastic/eui#9090)) - Removed `hasVisColorAdjustment` argument from color palettes (used in `euiPaletteColorBlindBehindText`, `euiPaletteForTemperature`, `euiPaletteComplementary`, `euiPaletteCool`) ([#9090](elastic/eui#9090)) - Removed `euiTheme.flags.buttonVariant` and `euiTheme.flags.formVariant` ([#9090](elastic/eui#9090)) - Removed `euiTheme.components.keyPadMenuItemBackgroundDisabledSelect` ([#9090](elastic/eui#9090)) - Removed legacy SCSS files from `src/global_styling/variables`, `src/global_styling/mixins` and `src/global_styling/functions` - if needed, use them from `eui-theme-common` instead ([#9090](elastic/eui#9090)) ### [`v4.0.0`](https://github.com/elastic/eui/releases/v4.0.0) **Breaking changes** - Removed `euiTheme.flags.hasGlobalFocusColor` ([#9090](elastic/eui#9090)) - Removed `euiTheme.flags.hasVisColorAdjustment` ([#9090](elastic/eui#9090)) - Removed `euiTheme.flags.buttonVariant` and `euiTheme.flags.formVariant` ([#9090](elastic/eui#9090)) - Removed `euiTheme.components.keyPadMenuItemBackgroundDisabledSelect` ([#9090](elastic/eui#9090)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

- `@elastic/eui`: `v107.0.1` ⏩ `v108.0.0` - `@elastic/eui-theme-borealis`: `v3.6.0` ⏩ `v4.0.0` --- ## Changes >[!IMPORTANT] This PR removes code related to the legacy Amsterdam theme. But it purposefully keeps Amsterdam palettes in `kbn-palettes` as those are standalone. - removed code related to the legacy theme Amsterdam [[elastic#9090](elastic/eui#9090)] - updated custom types to align with changes to the event type of `onClose` on `EuiModal` [[elastic#9137](elastic/eui#9137)] ## Package updates ### [`v108.0.0`](https://github.com/elastic/eui/releases/v108.0.0) - Updated `EuiModal` to support closing on outside click, via the new `outsideClickCloses` prop ([elastic#9137](elastic/eui#9137)) **Breaking changes** - Removed all "Amsterdam" theme related code in `src/themes/amsterdam` - EUI now only supports the "Borealis" theme in `eui-theme-borealis` ([elastic#9090](elastic/eui#9090)) - Removed `euiTheme.flags.hasGlobalFocusColor` ([elastic#9090](elastic/eui#9090)) - Removed `euiTheme.flags.hasVisColorAdjustment` ([elastic#9090](elastic/eui#9090)) - Removed `hasVisColorAdjustment` argument from color palettes (used in `euiPaletteColorBlindBehindText`, `euiPaletteForTemperature`, `euiPaletteComplementary`, `euiPaletteCool`) ([elastic#9090](elastic/eui#9090)) - Removed `euiTheme.flags.buttonVariant` and `euiTheme.flags.formVariant` ([elastic#9090](elastic/eui#9090)) - Removed `euiTheme.components.keyPadMenuItemBackgroundDisabledSelect` ([elastic#9090](elastic/eui#9090)) - Removed legacy SCSS files from `src/global_styling/variables`, `src/global_styling/mixins` and `src/global_styling/functions` - if needed, use them from `eui-theme-common` instead ([elastic#9090](elastic/eui#9090)) ### [`v4.0.0`](https://github.com/elastic/eui/releases/v4.0.0) **Breaking changes** - Removed `euiTheme.flags.hasGlobalFocusColor` ([elastic#9090](elastic/eui#9090)) - Removed `euiTheme.flags.hasVisColorAdjustment` ([elastic#9090](elastic/eui#9090)) - Removed `euiTheme.flags.buttonVariant` and `euiTheme.flags.formVariant` ([elastic#9090](elastic/eui#9090)) - Removed `euiTheme.components.keyPadMenuItemBackgroundDisabledSelect` ([elastic#9090](elastic/eui#9090)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

acstll added 3 commits October 22, 2025 17:34

[EuiModal] Support closing with outside click

e9e19bf

via new `outsideClickCloses` prop

[EuiModal][Tests] outsideClickCloses prop

5e509e7

[Docs][EuiModal] Remove outside click warning

aa1382b

acstll self-assigned this Oct 22, 2025

acstll added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Oct 22, 2025

Changelog

a21e03c

acstll removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Oct 22, 2025

acstll commented Oct 22, 2025

View reviewed changes

acstll marked this pull request as ready for review October 22, 2025 17:50

acstll requested a review from a team as a code owner October 22, 2025 17:50

tkajtoch reviewed Oct 23, 2025

View reviewed changes

packages/eui/src/components/modal/modal.tsx Outdated Show resolved Hide resolved

[Feedback] Remove any

c77692a

tkajtoch approved these changes Oct 23, 2025

View reviewed changes

acstll merged commit 5756a19 into elastic:main Oct 23, 2025
5 checks passed

mgadewoll mentioned this pull request Oct 27, 2025

Update EUI to v108.0.0 elastic/kibana#240888

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiModal] Support closing with outside click#9137

[EuiModal] Support closing with outside click#9137
acstll merged 5 commits intoelastic:mainfrom
acstll:modal-outside-click

acstll commented Oct 22, 2025 •

edited

Loading

Uh oh!

acstll Oct 22, 2025

Uh oh!

Uh oh!

elasticmachine commented Oct 23, 2025

Uh oh!

elasticmachine commented Oct 23, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

acstll commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Impact to users

QA

General checklist

Uh oh!

acstll Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Oct 23, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Oct 23, 2025

💚 Build Succeeded

History

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Oct 22, 2025 •

edited

Loading