[EuiCallOut] Add `dismissButtonProps` by acstll · Pull Request #9285 · elastic/eui

acstll · 2025-12-19T16:58:34Z

Summary

This PR enables adding data attributes to the dismiss button in EuiCallOut.

It introduces the dismissButtonProps prop, following a common pattern in the library.

Note

This PR also introduces a DataAttributeProps interface to ensure TypeScript is happy about data-* attributes — it's deliberate to have it separate from the already existing CommonProps —— it's also deliberate to use it only in dismissButtonProps for now

Why are we making this change?

To fulfill a request.

Impact to users

🟢 No impact. It's a new prop.

QA

Verify the new prop works as expected

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)

only in EuiCallOut dismiss button for now

packages/eui/src/components/call_out/call_out.tsx

weronikaolejniczak

In Storybook, I cannot set the onDismiss value and so I cannot test this in the story. It's outside of the scope of this PR but while we're here, maybe we could fix this somehow?

I tested on the documentation website and it works well 🟢 Thank you, Arturo!

acstll · 2026-01-16T11:15:05Z

In Storybook, I cannot set the onDismiss value and so I cannot test this in the story. It's outside of the scope of this PR but while we're here, maybe we could fix this somehow?

I addressed the story missing in d7e7dd3, let me know if that's what you had in mind

thanks for reviewing! 🙏

elasticmachine · 2026-01-16T11:29:24Z

💚 Build Succeeded

History

💚 Build #2407 succeeded 613ad56
💚 Build #2406 succeeded c8f7296
💔 Build #2277 failed 556aabc

cc @acstll

elasticmachine · 2026-01-16T11:44:42Z

💚 Build Succeeded

Buildkite Build
Commit: d7e7dd3

History

💚 Build #5586 succeeded 613ad56
💔 Build #5477 failed 556aabc

cc @acstll

## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([#9303](elastic/eui#9303)) ([#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([#9236](elastic/eui#9236))

## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([elastic#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([elastic#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([elastic#9303](elastic/eui#9303)) ([elastic#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([elastic#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([elastic#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([elastic#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([elastic#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([elastic#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([elastic#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([elastic#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([elastic#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([elastic#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([elastic#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([elastic#9236](elastic/eui#9236))

acstll self-assigned this Dec 19, 2025

acstll added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) support-duty-flywheel Label for PRs, see eui-private #310 labels Dec 19, 2025

acstll changed the title ~~[DRAFT][EuiCallOut] Add dismissButtonProps~~ [EuiCallOut] Add dismissButtonProps Dec 23, 2025

acstll added 2 commits January 13, 2026 11:43

[EuiCallOut] Add dismissButtonProps (WIP)

9e8d35f

[Common] Introduce DataAttributeProps for data-* attributes

c8f7296

only in EuiCallOut dismiss button for now

acstll force-pushed the callout-dismiss-props branch from 556aabc to c8f7296 Compare January 13, 2026 11:34

acstll added 2 commits January 13, 2026 13:02

[EuiCallOut] Simplify type for dismissButtonProps prop

f71d69e

Changelog

613ad56

acstll removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jan 13, 2026

acstll marked this pull request as ready for review January 13, 2026 12:06

acstll requested a review from a team as a code owner January 13, 2026 12:06

weronikaolejniczak self-requested a review January 14, 2026 11:46

weronikaolejniczak reviewed Jan 15, 2026

View reviewed changes

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

weronikaolejniczak approved these changes Jan 15, 2026

View reviewed changes

weronikaolejniczak mentioned this pull request Jan 16, 2026

[EuiContextMenu] Support data attributes in context menu panels #9323

Merged

16 tasks

acstll added 2 commits January 16, 2026 12:01

Clean up prop

810aa7b

Add OnDismiss story

d7e7dd3

acstll merged commit 3f4f3d3 into elastic:main Jan 19, 2026
5 checks passed

tkajtoch mentioned this pull request Jan 19, 2026

Update EUI to v112.0.0 elastic/kibana#249573

Merged

weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026

[EuiCallOut] Add dismissButtonProps (elastic#9285)

4dd785d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiCallOut] Add `dismissButtonProps`#9285

[EuiCallOut] Add `dismissButtonProps`#9285
acstll merged 6 commits intoelastic:mainfrom
acstll:callout-dismiss-props

acstll commented Dec 19, 2025 •

edited by weronikaolejniczak

Loading

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Uh oh!

acstll commented Jan 16, 2026

Uh oh!

elasticmachine commented Jan 16, 2026

Uh oh!

elasticmachine commented Jan 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

acstll commented Dec 19, 2025 • edited by weronikaolejniczak 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!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

acstll commented Jan 16, 2026

Uh oh!

elasticmachine commented Jan 16, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jan 16, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Dec 19, 2025 •

edited by weronikaolejniczak

Loading