eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiComboBox] add support for option tooltips

Open mgadewoll opened this issue 1 year ago • 2 comments

Summary

This PR is the first part of updates for #7690

This PR updates EuiComboBox to support the two props toolTipContent and toolTipProps to be passed to combobox options to display a tooltip on hover/focus.

To ensure the tooltip can be opened on focus, the EuiToolTip was updated to a support controlled behavior via isOpen.

Screenshot 2024-04-18 at 23 19 43

QA

  • [ ] review and test EuiComboBox in storybook and docs and/or checkout this PR locally via gh pr checkout 7700
    • [ ] ensure the tooltip is applied as expected (on hover as well as on keyboard navigation or click)

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

mgadewoll avatar Apr 18 '24 21:04 mgadewoll

@mgadewoll Thanks so much with your patience waiting for my review on this, and for your amazing work with granular commits that made it super easy to follow!! My largest comments I'd like to see resolved are:

  1. Firefox behavior (must fix, also not sure if this is only affecting me?)
  2. Avoiding a new API for EuiToolTip /using a class ref method instead (open to pushback on this if you feel strongly, but I do also wonder if this ties into the FF bug above)
  3. Changing the anchor position default to left instead of bottom

Everything other comment is just nice to have. I'll skip reviewing the EuiSelectable version of this PR as well (assuming it has similar-ish comments to the above) until this PR is settled and merged in if that's cool!

cee-chen avatar Apr 30 '24 20:04 cee-chen

ℹ️ I added baseline VRT references for EuiComboBox. The tooltip story currently looks the same as the playground one, I want to update it to use interactions to show an opened tooltip state instead, but I'd suggest doing it in a separate PR as I'll need to check on the setup first.

mgadewoll avatar May 03 '24 07:05 mgadewoll

I want to update it to use interactions to show an opened tooltip state instead, but I'd suggest doing it in a separate PR as I'll need to check on the setup first.

Yasss that would be amazing! I reiterate that you are the best!

cee-chen avatar May 03 '24 15:05 cee-chen

Preview staging links for this PR:

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

kibanamachine avatar May 03 '24 17:05 kibanamachine

:green_heart: Build Succeeded

History

  • :green_heart: Build #1869 succeeded 44931b0c5e5de283d7620dbf6410b0affca609a7
  • :green_heart: Build #1866 succeeded 14030c83a585066e5933e7f344d1a69a7dec5140
  • :green_heart: Build #1859 succeeded 9b7b0e68a870ebe094e871061556a2f472408a6a
  • :green_heart: Build #1855 succeeded 9e03e7702744ec0200921f7086445a8511d2e30d
  • :green_heart: Build #1854 succeeded 05695b46a85504541bfacb3fb1fb8b23924bcea2
  • :green_heart: Build #1810 succeeded c580005c9e584a6f841f753c000c72986ca6f74f

elasticmachine avatar May 03 '24 17:05 elasticmachine