fix(popover): correct initial animation direction to match fallback placement #4460
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: e0962a8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Warning Rate limit exceeded@ryo-manba has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 11 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughThe pull request introduces changes to the Popover component's placement handling in two files: Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/components/popover/src/use-popover.ts (1)
226-226: Complete dependency array for the callback.Listing all relevant dependencies (
slots,state.isOpen,placement, etc.) ensures the popover content is recalculated correctly when any input changes.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/components/popover/src/use-popover.ts(7 hunks)packages/components/popover/stories/popover.stories.tsx(2 hunks)
🔇 Additional comments (8)
packages/components/popover/src/use-popover.ts (6)
17-17: Import usage is consistent with the code updates.
The getArrowPlacement import is now used to dynamically compute the arrow position, which aligns well with the revised placement logic.
84-85: Good introduction of a named default placement constant.
Defining DEFAULT_PLACEMENT as "top" is clear and reduces magic strings, making the code more maintainable. This also helps ensure consistency across the component.
115-115: Maintains consistency for default placement.
Referencing DEFAULT_PLACEMENT here improves clarity and ensures a single source of truth for the default placement value.
209-209: Appropriate usage of getArrowPlacement.
Passing both the resolved placement and placementProp ensures the arrow is positioned correctly, even if a fallback placement is used.
223-223: Consistent approach to arrow placement.
Using the same getArrowPlacement logic here confirms that arrow rendering remains predictable and in sync with the component’s final placement.
310-310: Ensures a valid placement in all scenarios.
Falling back to DEFAULT_PLACEMENT here further guarantees that the popover is always placed consistently and avoids potential undefined placement errors.
packages/components/popover/stories/popover.stories.tsx (2)
130-134: Flexible labeling for the popover trigger button.
By adding a label prop to the Template, you effectively allow story authors to reuse the same template with different button labels without duplicating code.
584-609: Comprehensive fallback placement demo.
The WithFallbackPlacements story thoroughly illustrates how different placements behave under real-world positioning scenarios. This should help confirm the new popover logic aligns with user expectations, especially regarding fallback placement animation.
Closes #4290
📝 Description
When the fallback placement is used, the animation did not follow the final placement.
As a result, the popup position and its animation did not match.
⛳️ Current behavior (updates)
The popup shows in the correct place, but the initial animation starts from the wrong direction, causing a flicker.
popover-animation-before.mov
🚀 New behavior
The animation now correctly aligns with the final placement.
popover-animation-after.mov
💣 Is this a breaking change (Yes/No):
No.
📝 Additional Information
Related PR: #4288
Summary by CodeRabbit
New Features
Improvements