feat: add TooltipWrapper component with theme support #15
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's GuideThis PR introduces a reusable, theme-aware TooltipWrapper component based on Radix UI and integrates it into the Dashboard page to provide tooltips for truncated instance names and the settings icon, while adding the necessary dependency and localization entries. Class diagram for the new TooltipWrapper componentclassDiagram
class TooltipWrapper {
+content: string
+children: ReactNode
+side: "top" | "right" | "bottom" | "left"
+TooltipWrapper(props: TooltipWrapperProps)
}
class TooltipWrapperProps {
+content: string
+children: ReactNode
+side?: "top" | "right" | "bottom" | "left"
}
TooltipWrapper --> TooltipWrapperProps
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Add the “dashboard.settings” translation key to all locale files so the settings tooltip doesn’t break in other languages.
- Make non-interactive tooltip triggers (like the h3) keyboard-focusable (e.g. add tabIndex=0) to ensure the tooltip is accessible on focus.
- Consider moving Tooltip.Provider higher in the component tree (e.g. at App level) to avoid remounting it for every TooltipWrapper and improve performance.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Add the “dashboard.settings” translation key to all locale files so the settings tooltip doesn’t break in other languages.
- Make non-interactive tooltip triggers (like the h3) keyboard-focusable (e.g. add tabIndex=0) to ensure the tooltip is accessible on focus.
- Consider moving Tooltip.Provider higher in the component tree (e.g. at App level) to avoid remounting it for every TooltipWrapper and improve performance.
## Individual Comments
### Comment 1
<location> `src/components/ui/tooltip.tsx:4-8` </location>
<code_context>
+import { ReactNode } from "react";
+
+interface TooltipWrapperProps {
+ content: string; // o texto que vai aparecer no tooltip
+ children: ReactNode; // o trigger (qualquer elemento)
+ side?: "top" | "right" | "bottom" | "left"; // posição opcional
+}
</code_context>
<issue_to_address>
**suggestion:** Tooltip content type could be more flexible.
Consider changing the content prop type to ReactNode to support tooltips with rich formatting or icons.
```suggestion
interface TooltipWrapperProps {
content: ReactNode; // conteúdo do tooltip (pode ser texto, ícone, ou formatação rica)
children: ReactNode; // o trigger (qualquer elemento)
side?: "top" | "right" | "bottom" | "left"; // posição opcional
}
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull Request
📋 Description
Add tooltip on card title and cog icon, truncate long titles
🔗 Related Issues
🧪 Type of Change
🧪 Testing
Test Environment
Test Cases
Test Instructions
📸 Screenshots
Before
After
✅ Checklist
Code Quality
npm run lintand fixed any issuesTesting
Documentation
Internationalization
Breaking Changes
🔄 Migration Guide
Before
// Old code exampleAfter
// New code example📝 Additional Notes
🤝 Reviewer Guidelines
Focus Areas
Testing Checklist for Reviewers
Thank you for contributing to Evolution Manager! 🚀
Summary by Sourcery
Introduce a reusable TooltipWrapper component for themed tooltips and apply it to dashboard card titles and settings icons while truncating long titles.
New Features:
Enhancements:
Build: