feat: add animations to popper#1594
feat: add animations to popper#1594shinokada merged 1 commit intothemesberg:mainfrom jjagielka:popper-animations
Conversation
|
@jjagielka is attempting to deploy a commit to the Themesberg Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe Popper.svelte component was refactored to use Svelte's transition system for popover animations, introducing customizable transition props and shifting visibility control from imperative DOM methods to reactive state and Svelte lifecycle events. Documentation for tooltips was updated to include a new section on configuring tooltip animations using Svelte transitions. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TriggerElement
participant PopperComponent
participant SvelteTransition
User->>TriggerElement: Interact (e.g., hover, click)
TriggerElement->>PopperComponent: Event triggers isOpen = true
PopperComponent->>SvelteTransition: Start transition (e.g., fade, slide)
SvelteTransition-->>PopperComponent: onintrostart event
PopperComponent->>PopperComponent: showPopover()
User->>TriggerElement: Stop interaction
TriggerElement->>PopperComponent: Event triggers isOpen = false
PopperComponent->>SvelteTransition: Start outro transition
SvelteTransition-->>PopperComponent: onoutroend event
PopperComponent->>PopperComponent: hidePopover()
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
CodeRabbit Configuration File (
|
![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 (2)
src/lib/utils/Popper.svelte (1)
27-29: Consider improving transition parameter defaults.The default transition duration of 100ms might be too quick for smooth animations in some cases.
-const paramsDefault = { duration: 100, easing: sineIn }; +const paramsDefault = { duration: 150, easing: sineIn };src/routes/docs/components/tooltip.md (1)
151-163: Comprehensive examples of different transition types.The examples demonstrate a good variety of transition types (blur, slide, scale) and show how to customize transition parameters, which is very helpful for users.
Consider adding a brief explanation of common transition parameters like
duration,delay, andeasingto make it more beginner-friendly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (2)
src/lib/utils/Popper.svelte(4 hunks)src/routes/docs/components/tooltip.md(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (7)
src/lib/utils/Popper.svelte (6)
5-7: Good addition of Svelte transition imports.The imports for Svelte transitions and easing functions are appropriate for implementing the animation functionality.
11-11: Good implementation of transition props with sensible defaults.The addition of
transitionandtransitionParamsprops with appropriate defaults (fade transition with no custom parameters) allows for customizable animations while maintaining backward compatibility.
17-17: Appropriate conversion to reactive state.Converting
popoverandarrowParamsto reactive state variables is a good practice that aligns with Svelte's reactivity system and makes the state management more consistent.Also applies to: 21-25
66-74: Simplified state management in open_popover.Good refactoring by removing direct DOM manipulation and using reactive state management instead. This approach is more aligned with Svelte's declarative patterns.
109-117: Improved toggle handling with centralized state updates.The refactored toggle handler now centralizes the state management, making the code more maintainable and easier to understand.
166-175: Great implementation of conditional rendering with transitions.The conditional rendering approach with Svelte transitions is a significant improvement over the previous implementation:
- It follows Svelte's paradigm of declarative UI
- It properly integrates with the component lifecycle
- It enables customizable animations
- It correctly synchronizes with the popover API using lifecycle events
The
onintrostartandonoutroendevents are used appropriately to call the native popover methods.src/routes/docs/components/tooltip.md (1)
146-149: Good addition of animations documentation section.The new section on animations is a valuable addition to help users understand how to apply transitions to tooltips.
|
This should fix no.3 of #1588 as well. |
|
That was the purpose. |
|
I will add animation examples to popover. |
2 participants
📑 Description
Add possibility to use transitions on all
Popperdescendants.Status
✅ Checks
ℹ Additional Information
Summary by CodeRabbit