-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
APP-2206: break apart tooltip component for custom usage #384
Conversation
* TODO: Determine why this is being interpreted as an `any` type by the | ||
* linter when it is of `() => Promise<void>`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This appears to be a limitation of the Svelte ESLint plugin; it's a little buggy when it comes to correctly manipulating the parse tree when TS is involved (e.g. sveltejs/eslint-plugin-svelte#583).
I've been moving type exports to separate pure TS files to work around the issue. It's a little irritating to move the interfaces out of the component that uses them; but it's worth it to avoid losing type safety
# Conflicts: # packages/core/src/lib/tooltip/tooltip.svelte
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✅
Once last fix caught by @ehhong: if |
Overview
Following up on #381, as I went to integrate the updated Tooltip, I saw that several Svelte usage sites of this tooltip would benefit from the "separate target from described element" work I mentioned in that ticket.
This PR breaks the
<Tooltip>
into its constituent parts:<TooltipContainer>
- a stateful wrapper<TooltipTarget>
- a wrapper that attaches mouse/focus event listeners<TooltipText>
- a presentational tooltip text componentYou can continue to use
<Tooltip>
, or if that doesn't work for the UI in question, assemble the three parts however you need. In practice, I think this will mostly be "the visual target is different that the element on which we need to setaria-describedby
.I also upgraded the style calculation logic to automatically adjust scrolls/resizes/moves via floating-ui's
autoUpdate
.Change log
TooltipContainer
,TooltipTarget
, andTooltipText
components that can be composed to create custom tooltipsautoUpdate
so therecalculateStyle
component export isn't neededReview requests
I have updated the playground and the Storybook, which are good places to start with this PR. The actual positioning logic is hard to test without Playwright, but if you do see anything that could use unit testing that isn't currently tested, please call it out!
The best way to test the
autoUpdate
functionality:<SliderInput>