eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiButtonGroup] Add support for showing `EuiTooltip` for button titles

Open davismcphee opened this issue 1 year ago • 5 comments

Summary

This PR adds support to EuiButtonGroup for displaying button titles as EuiTooltip components instead of using the default browser behaviour: tooltip

Notes:

  • Tooltips are only shown when isIconOnly is true, since the button will have visible text otherwise, and the EuiTooltip seemed redundant. This is a change from the previous behaviour where default browser tooltips were also shown for buttons with visible text.
  • Tooltips will either display a button's hidden text content (same as existing behaviour) or a custom title if overridden.
  • Custom tooltip positions and delays are also supported. It seemed like these would make sense so I included them, but we don't actually need them for our Discover use case, so I could exclude them is preferred.
  • Clicking a button dismisses its tooltip until the button is rehovered or refocused, otherwise the tooltip would remain open when a button's state is toggled until manually unfocused, which felt like it would get in the way.
  • Some of the style changes are breaking and may require changes to Kibana-specific overrides. I wasn't sure how to implement these changes without changing how some of the CSS selectors work.

Resolves #6313.

QA

General checklist

  • Browser QA
    • [x] Checked in both light and dark modes
    • [x] Checked in mobile
    • [x] Checked in Chrome, Safari, Edge, and Firefox
    • [x] Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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
    • [ ] Updated the Figma library counterpart

davismcphee avatar Jan 14 '24 02:01 davismcphee

@davismcphee I know I'm asking for larger/higher level changes, so LMK at any point if you'd prefer us to simply take over the PR instead of going through tedious feedback rounds! We're happy with whatever works for you ❤️‍🔥 This is a super amazing starting point either way!

cee-chen avatar Jan 22 '24 23:01 cee-chen

toolTipContent and toolTipProps and their typings look perfect - thanks Davis!! ❤️ No rush on this at all, feel free to take all the time you need on this! And if something comes up on your end and you find yourself busy with other work, no worries at all, just give us a ping and we're happy to help out!

cee-chen avatar Jan 24 '24 16:01 cee-chen

Moving this back to draft for triage purposes while it's still in progress!

cee-chen avatar Feb 05 '24 16:02 cee-chen

@cee-chen Well, apparently my couple of days turned into a month... But I finally got around to making the requested changes, and updated the documentation with a new section for button group tooltips. Just in time for us all to be gone to EAH for a week 😄

davismcphee avatar Feb 24 '24 06:02 davismcphee

Sorry for the wait Davis! I'm planning on reviewing this PR this week. Any objections if I push up changes directly to this branch/PR?

cee-chen avatar Mar 04 '24 19:03 cee-chen

No problem, and no objections at all!

davismcphee avatar Mar 04 '24 23:03 davismcphee

Preview staging links for this PR:

  • Docs site: https://eui.elastic.co/pr_7461/
  • Storybook: https://eui.elastic.co/pr_7461/storybook

kibanamachine avatar Mar 14 '24 19:03 kibanamachine

:green_heart: Build Succeeded

History

  • :green_heart: Build #1491 succeeded 85983311f3caebf29a1ea265c6f53eb754138fce
  • :green_heart: Build #1464 succeeded d1c076a332f6013ef96215cbc19c05411218d962
  • :green_heart: Build #1429 succeeded 2a3872d47a65a55c06de238d73e6e306d2daf12f
  • :green_heart: Build #1428 succeeded a1a583500cfae96ae6c2249e413882c936d9701a
  • :green_heart: Build #1295 succeeded 0f392d5a6be63601e21740f641c30e47c91cac9f
  • :broken_heart: Build #1276 failed 4a8925940fbff7a9a3afe79936d29e393e1747ae

cc @cee-chen

elasticmachine avatar Mar 14 '24 19:03 elasticmachine