-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Popover
: update positionToPlacement
types
#54101
Conversation
@mirka - does it make sense to import
|
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.
changes look good to me, I'd say we're just waiting on the failing/flaky CI?
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.
LGTM 🚀
My initial reasoning for using PopoverProps[ 'placement' ]
was to avoid referencing floating-ui
directly, but I guess it doesn't make much of a difference, and it actually caused issues once the new overlay
custom placement was added to Popover
.
Could you add a CHANGELOG entry too?
Good to merge once CI passes (rebasing/mergin trunk may help)
Thank you for working on this!
40966cd
to
3c01a84
Compare
* Add ariakit dependency * Initial creation of component * Add shortcut from legacy tooltip * Replace initial tests with legacy tooltip tests * Add anchor styles for tooltip placement * Ensure tooltip renders only if one child is passed * Replace query with tooltip role and add user actions to ensure tests complete * Remove forwarding refs to match legacy tooltip * Add legacy positioning * Remove unnecessary code and add describedby id * Replace cloneElement with Radix Slot * Replace emotion with sass * Update tests and types * Updated ariakit package and update-related props and types * Remove radix-ui/react-slot related package changes * Add arrow to fix floating-ui errors * Replace zero value in temp fix to avoid NaN errors * resolve test failures after package update * Match legacy styles * Hide tooltip onBlur to match legacy behavior * Revert "resolve test failures after package update" This reverts commit 9182f1e. * Prevent leaking by ensuring tooltip is hidden after each test * Remove ‘overlay’ option to match legacy * hide on anchor interact to match legacy * Temporarily replace placement with position for rollout * Update story after storybook upgrade * Update descriptions in readme and types * Replace legacy tooltip with ariakit tooltip * Add test with modal for new Esc feature * Error for multiple children but continue to render anchor without tooltip * Update snapshots * Update assertions in failing tests * Replace waitFor with findBy * Replace workaround with utility function * Clean up variables * Update package-lock * Add cleanup to test where toBePositioned was used previously * Update Changelog * Update event handling * Fix failing test * Add cleanup for other components testing tooltip * Remove Arrow workaround after floating-ui/core update * Refine test query to avoid conflict * Update tests based on feedback * remove unnecessary type and variable * Simplify by removing unnecessary logic and adding default value to position prop * Add timeout to test for custom delay * Ensure anchor shows when Icon or multiple children * Update types and README * Update snapshots * Remove type ignore after update in #54101 * Fix link control tests by querying explicitly for the spinner --------- Co-authored-by: Marco Ciampini <[email protected]>
What?
This change is based on a diff suggested by @mirka after reviewing upcoming changes to Tooltip in #48440.
Last year, a utility function
positionToPlacement
was created to assist in converting values for the legacyposition
prop to the newerplacement
prop. #44377The
position
prop supportedoverlay
, butplacement
does not. However, @ciampo shared thatpositionToPlacement
doesn't returnoverlay
and proposed a similar diff as well.Why?
The
overlay
type fromposition
isn't part ofplacement
fromfloating-ui
, so we see TS errors in the aforementioned Tooltip. With more upcoming migrations, this may cause further TS errors in other components. Sinceoverlay
isn't returned, we can remove it.How?
Replace
PopoverProps['placement']
type withPlacement
fromfloating-ui
to remove typeoverlay
.Testing Instructions
CI checks pass