search

helpscout / hsds-react

Help Scout Design System (HSDS) — React Component Library
MIT License
86 stars 17 forks source link

ActionSelect: tooltip on SelectTag toggler #1051

Closed tinkertrain closed 2 years ago

tinkertrain commented 2 years ago

Feature

Adds Tooltip support to DropList's SelectTag toggler, much the same as the icon button togglers:

<SelectTag withTooltip tooltipProps={{ title: 'hello' }} />

This in turn has been added to the ActionSelect component:

<ActionSelect withTooltip tooltipProps={{ title: 'hello' }} />

withTooltip and tooltipProps will just be forwarded to SelectTag (with some sensible defaults for ActionSelect, but can be overridden)

Screen Shot 2022-04-19 at 2 02 41 PM

https://510986f6.hsds-react.pages.dev/?path=/story/phaseout-actionselect--default-story

Problems

Tooltip

  1. Adjusted the custom width and padding so that Tippy positions the tooltip accurately (the padding directly on the Tooltip was messing the calculations Tippy does, so I moved it to the title container)

CleanShot 2022-04-19 at 14 15 24@2x

  1. Positioning of the arrow was off if using the "start/end" variations of "top/bottom" (left/right are fine)

CleanShot 2022-04-19 at 13 53 37@2x

DropList "Meat Button" toggler

  1. There were some tippy props that were messing with the trigger area (making it the parent of the button instead of the button), I just removed those (can't even remember why they were there in the first place 🤷 )

CleanShot 2022-04-19 at 14 11 18

Other

cloudflare-pages[bot] commented 2 years ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 396f457
Status: ✅  Deploy successful!
Preview URL: https://2c5cb37e.hsds-react.pages.dev

View logs