feat(eui): add tooltipProps prop to EuiCopy

[weronikaolejniczak]

Summary

Important

This is a breaking change.

Closes #8382

On this PR, I:

• feat(eui): add tooltipProps prop to EuiCopy
• chore(eui): rewrite EuiCopy tests to RTL
• chore(eui): add a test for tooltipProps in EuiCopy
• refactor(website): use tooltipProps for EuiCopy

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]

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

[weronikaolejniczak]

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 50c00e9
• Documentation website

History

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

cc @weronikaolejniczak

[elasticmachine]

💚 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 👍