feat(eui): add tooltipProps prop to EuiCopy by weronikaolejniczak · Pull Request #8758 · elastic/eui

weronikaolejniczak · 2025-06-06T14:42:27Z

Summary

Important

This is a breaking change.

Closes #8382

On this PR, I:

Storybook

Control displays correctly:

No VRT references difference that could be a result of the changes on this PR.

Docs impact

Button guidelines (Staging link)

Production	Localhost

It set anchorClassName to eui-fullWidth so that the anchor takes the whole width of the container. Otherwise, the result would be:

Context menu (Staging link)

Production	Localhost

It set anchorClassName to eui-fullWidth so that the anchor takes the whole width of the container.

Icons (Staging link)

Production	Localhost

It set display="block" on the EuiToolTip anchor:

eui/packages/eui/src/components/tool_tip/tool_tip.tsx

Lines 345 to 358 in f319078

    
           <EuiToolTipAnchor 
        
             {...anchorProps} 
        
             ref={this.setAnchorRef} 
        
             onBlur={this.onBlur} 
        
             onFocus={this.onFocus} 
        
             onKeyDown={this.onEscapeKey} 
        
             onMouseOver={this.showToolTip} 
        
             onMouseOut={this.onMouseOut} 
        
             // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`. 
        
             id={!disableScreenReaderOutput ? id : undefined} 
        
             className={anchorClasses} 
        
             display={display!} 
        
             isVisible={visible} 
        
           >

Kibana impact

There are 3 usages that pass props other than: textToCopy (required), beforeMessage, afterMessage

src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx (content)
src/platform/packages/private/kbn-reporting/public/share/share_context_menu/reporting_panel_content/reporting_panel_content.tsx (anchorClassName)
src/platform/plugins/shared/share/public/components/url_panel_content.tsx (anchorClassName)

All usages | Update commit

Cloud UI impact

There are no usages that pass props other than: textToCopy (required), beforeMessage, afterMessage

All usages

QA

Specific checklist

The unit tests pass in CI
The doc pages have no regression (staging links above)
The EuiCopy component has no regression in Storybook (you have to run Storybook locally with: yarn workspace @elastic/eui start) or on the documentation page
The Kibana and Cloud UI affected usages lists are complete

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 (updated it)
- Props have proper autodocs (using @default if default values are missing) and playground toggles (control for the prop, by default object)
- ~~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)
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)

github-actions · 2025-06-06T14:42:42Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes:
- Search through Kibana for <EuiComponent usages (example search)
- In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
If this PR contains CSS changes:
- Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
- In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
- Using a pre-release release candidate to test Kibana CI ahead of time
- Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

packages/eui/src/components/copy/copy.tsx

packages/eui/src/components/copy/copy.test.tsx

packages/eui/changelogs/upcoming/8758.md

weronikaolejniczak · 2025-06-10T08:13:55Z

@mgadewoll thank you for the review, I applied your suggestions

elasticmachine · 2025-06-10T08:57:39Z

💚 Build Succeeded

History

💔 Build #462 failed edba984
💚 Build #416 succeeded 3a74ac4
💚 Build #415 succeeded 2fcd641

cc @weronikaolejniczak

elasticmachine · 2025-06-10T09:12:41Z

💚 Build Succeeded

Buildkite Build
Commit: 50c00e9

History

💔 Build #4140 failed edba984
💚 Build #4109 succeeded 3a74ac4

cc @weronikaolejniczak

mgadewoll

🟢 Thanks for the updates. Changes LGTM and the component works as expected 👍

`103.1.0` ⏩ `104.0.2` [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 - updates flat tooltip prop usages on **EuiCopy** to use new `tooltipProp` ## Package updates ### `@elastic/eui` ## [`v104.0.2`](https://github.com/elastic/eui/releases/v104.0.2) **Bug fixes** - Fixed missing JSON token exports for `euiColorBackgroundBaseInteractiveSelectHover` and `euiColorBorderStrongText` ([#8819](elastic/eui#8819)) ## [`v104.0.1`](https://github.com/elastic/eui/releases/v104.0.1) **Bug fixes** - Fixed a wrong path in the module declaration for the JSON token exports that would trigger typescript errors ([#8818](elastic/eui#8818)) ## [`v104.0.0`](https://github.com/elastic/eui/releases/v104.0.0) - Added data vis text color tokens: ([#8793](elastic/eui#8793)) - `colors.vis.euiColorVisText0` - `colors.vis.euiColorVisText1` - `colors.vis.euiColorVisText2` - `colors.vis.euiColorVisText3` - `colors.vis.euiColorVisText4` - `colors.vis.euiColorVisText5` - `colors.vis.euiColorVisText6` - `colors.vis.euiColorVisText7` - `colors.vis.euiColorVisText8` - `colors.vis.euiColorVisText9` - Updated and aligned background hover styles for `EuiTable` and `EuiDataGrid` ([#8769](elastic/eui#8769)) **Deprecations** - Deprecated `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` palettes. Use the newly added data vis color tokens instead. ([#8793](elastic/eui#8793)) **Breaking changes** - Removed tokens: ([#8793](elastic/eui#8793)) - `colors.vis.euiColorVisAsTextLight1` - `colors.vis.euiColorVisAsTextLight0` - `colors.vis.euiColorVisAsTextLight2` - `colors.vis.euiColorVisAsTextLight3` - `colors.vis.euiColorVisAsTextLight4` - `colors.vis.euiColorVisAsTextLight5` - `colors.vis.euiColorVisAsTextLight6` - `colors.vis.euiColorVisAsTextDark1` - `colors.vis.euiColorVisAsTextDark0` - `colors.vis.euiColorVisAsTextDark2` - `colors.vis.euiColorVisAsTextDark3` - `colors.vis.euiColorVisAsTextDark4` - `colors.vis.euiColorVisAsTextDark5` - `colors.vis.euiColorVisAsTextDark6` - Removed `xl` size from `EuiTabs` ([#8762](elastic/eui#8762)) - Added `tooltipProps` to `EuiCopy` which replaces spreading all props to `EuiToolTip` ([#8758](elastic/eui#8758))  --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`103.1.0` ⏩ `104.0.2` [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 - updates flat tooltip prop usages on **EuiCopy** to use new `tooltipProp` ## Package updates ### `@elastic/eui` ## [`v104.0.2`](https://github.com/elastic/eui/releases/v104.0.2) **Bug fixes** - Fixed missing JSON token exports for `euiColorBackgroundBaseInteractiveSelectHover` and `euiColorBorderStrongText` ([elastic#8819](elastic/eui#8819)) ## [`v104.0.1`](https://github.com/elastic/eui/releases/v104.0.1) **Bug fixes** - Fixed a wrong path in the module declaration for the JSON token exports that would trigger typescript errors ([elastic#8818](elastic/eui#8818)) ## [`v104.0.0`](https://github.com/elastic/eui/releases/v104.0.0) - Added data vis text color tokens: ([elastic#8793](elastic/eui#8793)) - `colors.vis.euiColorVisText0` - `colors.vis.euiColorVisText1` - `colors.vis.euiColorVisText2` - `colors.vis.euiColorVisText3` - `colors.vis.euiColorVisText4` - `colors.vis.euiColorVisText5` - `colors.vis.euiColorVisText6` - `colors.vis.euiColorVisText7` - `colors.vis.euiColorVisText8` - `colors.vis.euiColorVisText9` - Updated and aligned background hover styles for `EuiTable` and `EuiDataGrid` ([elastic#8769](elastic/eui#8769)) **Deprecations** - Deprecated `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` palettes. Use the newly added data vis color tokens instead. ([elastic#8793](elastic/eui#8793)) **Breaking changes** - Removed tokens: ([elastic#8793](elastic/eui#8793)) - `colors.vis.euiColorVisAsTextLight1` - `colors.vis.euiColorVisAsTextLight0` - `colors.vis.euiColorVisAsTextLight2` - `colors.vis.euiColorVisAsTextLight3` - `colors.vis.euiColorVisAsTextLight4` - `colors.vis.euiColorVisAsTextLight5` - `colors.vis.euiColorVisAsTextLight6` - `colors.vis.euiColorVisAsTextDark1` - `colors.vis.euiColorVisAsTextDark0` - `colors.vis.euiColorVisAsTextDark2` - `colors.vis.euiColorVisAsTextDark3` - `colors.vis.euiColorVisAsTextDark4` - `colors.vis.euiColorVisAsTextDark5` - `colors.vis.euiColorVisAsTextDark6` - Removed `xl` size from `EuiTabs` ([elastic#8762](elastic/eui#8762)) - Added `tooltipProps` to `EuiCopy` which replaces spreading all props to `EuiToolTip` ([elastic#8758](elastic/eui#8758))  --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit efedad1) # Conflicts: # package.json # src/dev/license_checker/config.ts # yarn.lock

weronikaolejniczak added 4 commits June 6, 2025 13:54

feat(eui): add tooltipProps prop to EuiCopy

6f12545

chore(eui): rewrite EuiCopy tests to RTL

9fc6b39

chore(eui): add a test for tooltipProps in EuiCopy

6a78cfd

refactor(website): use tooltipProps for EuiCopy

2fcd641

weronikaolejniczak self-assigned this Jun 6, 2025

weronikaolejniczak added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Jun 6, 2025

weronikaolejniczak mentioned this pull request Jun 6, 2025

chore: update pre-release link for breaking changes #8759

Merged

chore: add changelog

3a74ac4

weronikaolejniczak marked this pull request as ready for review June 6, 2025 15:30

weronikaolejniczak requested a review from a team as a code owner June 6, 2025 15:30

mgadewoll reviewed Jun 9, 2025

View reviewed changes

weronikaolejniczak added 3 commits June 10, 2025 10:08

fix(eui): update tooltipProps type in EuiCopy

2696186

chore(eui): update EuiCopy tooltipProps test

455520a

chore(eui): update changelog

edba984

weronikaolejniczak requested a review from mgadewoll June 10, 2025 08:13

chore(eui): remove unused queryByAttribute import

50c00e9

mgadewoll approved these changes Jun 10, 2025

View reviewed changes

mgadewoll merged commit 84890ea into elastic:main Jun 23, 2025
5 checks passed

mgadewoll mentioned this pull request Jun 23, 2025

Upgrade EUI to v104.0.2 elastic/kibana#224855

Merged

weronikaolejniczak deleted the breaking-change/eui-copy-tooltip-props branch February 10, 2026 10:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(eui): add tooltipProps prop to EuiCopy#8758

feat(eui): add tooltipProps prop to EuiCopy#8758
mgadewoll merged 9 commits intoelastic:mainfrom
weronikaolejniczak:breaking-change/eui-copy-tooltip-props

weronikaolejniczak commented Jun 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 6, 2025 •

edited by weronikaolejniczak

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Jun 10, 2025

Uh oh!

elasticmachine commented Jun 10, 2025

Uh oh!

elasticmachine commented Jun 10, 2025

Uh oh!

mgadewoll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<EuiToolTipAnchor
	{...anchorProps}
	ref={this.setAnchorRef}
	onBlur={this.onBlur}
	onFocus={this.onFocus}
	onKeyDown={this.onEscapeKey}
	onMouseOver={this.showToolTip}
	onMouseOut={this.onMouseOut}
	// `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
	id={!disableScreenReaderOutput ? id : undefined}
	className={anchorClasses}
	display={display!}
	isVisible={visible}
	>

Conversation

weronikaolejniczak commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Storybook

Docs impact

Button guidelines (Staging link)

Context menu (Staging link)

Icons (Staging link)

Kibana impact

Cloud UI impact

QA

Specific checklist

General checklist

Uh oh!

github-actions bot commented Jun 6, 2025 • edited by weronikaolejniczak Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Jun 10, 2025

Uh oh!

elasticmachine commented Jun 10, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jun 10, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

weronikaolejniczak commented Jun 6, 2025 •

edited

Loading

github-actions bot commented Jun 6, 2025 •

edited by weronikaolejniczak

Loading