feat: add support for using tooltips on buttons that are inside a but… #336
Conversation
WalkthroughThe changes in this pull request involve enhancements to the tooltip component documentation and its associated examples. A new example component, Changes
Poem
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
CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🧹 Outside diff range and nitpick comments (3)
src/components/FwbButtonGroup/FwbButtonGroup.vue (1)
11-22: LGTM! Consider documenting the tooltip support.The CSS selectors correctly handle buttons within tooltips, maintaining consistent button group styling. Consider adding a comment to document this support for future maintainers.
+/* Support for buttons wrapped in tooltips while maintaining button group styling */ .fwb-button-group > button, .fwb-button-group > .fwb-tooltip button { @apply rounded-none; }docs/components/tooltip/examples/FwbTooltipExampleGroup.vue (1)
1-23: Consider enhancing the example with more variations.The example effectively demonstrates the basic usage. Consider adding variations to showcase:
- Different tooltip placements (left/right/bottom)
- Multiple tooltips in the same button group
- Different themes (light/dark)
Example enhancement:
<fwb-button-group> <fwb-button> Normal Button </fwb-button> <fwb-tooltip> <template #trigger> <fwb-button> Button With Tooltip </fwb-button> </template> <template #content> Tooltip content </template> </fwb-tooltip> + <fwb-tooltip placement="bottom" theme="light"> + <template #trigger> + <fwb-button> + Another Tooltip + </fwb-button> + </template> + <template #content> + Light theme tooltip + </template> + </fwb-tooltip> </fwb-button-group>docs/components/tooltip.md (1)
123-123: Consider enhancing the documentation with additional details.The description could be more comprehensive. Consider adding:
- Any styling considerations or limitations
- Examples of different tooltip placements within button groups
- Best practices for accessibility
Example enhancement:
-You can use the tooltip component inside of the button group component. +You can use the tooltip component inside of the button group component while maintaining proper button grouping and styling. This is particularly useful for adding explanatory tooltips to specific buttons within a group while preserving the group's visual cohesion. Note that tooltip triggers work independently for each button in the group.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
docs/components/tooltip.md(2 hunks)docs/components/tooltip/examples/FwbTooltipExampleGroup.vue(1 hunks)src/components/FwbButtonGroup/FwbButtonGroup.vue(1 hunks)src/components/FwbTooltip/FwbTooltip.vue(1 hunks)
🔇 Additional comments (3)
src/components/FwbTooltip/FwbTooltip.vue (1)
2-2: LGTM! Verify class usage across codebase.
The addition of the fwb-tooltip class is appropriate for styling integration with button groups.
✅ Verification successful
LGTM! The fwb-tooltip class is correctly used
The fwb-tooltip class is properly integrated and serves a specific purpose in the component system:
- It's used in FwbTooltip component to provide the base structure
- FwbButtonGroup styles specifically target this class to handle button border radius when tooltips are used within button groups
- The implementation is consistent with the component's intended functionality
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Verify the fwb-tooltip class usage
rg "fwb-tooltip" --type vue
Length of output: 55
Script:
#!/bin/bash
# Search for fwb-tooltip class usage in all files
rg "fwb-tooltip"
# Also search for files with .vue extension to ensure we're searching in the right place
fd "\.vue$"
Length of output: 19349
Script:
#!/bin/bash
# Let's check the content of FwbButtonGroup.vue to understand how fwb-tooltip is used
cat src/components/FwbButtonGroup/FwbButtonGroup.vue
# Also check the content of FwbTooltip.vue to see the complete implementation
cat src/components/FwbTooltip/FwbTooltip.vue
Length of output: 2663
docs/components/tooltip.md (2)
5-5: LGTM! Import statement follows established patterns.
The import statement for FwbTooltipExampleGroup is well-structured and consistent with other example imports.
121-148: LGTM! Well-structured documentation for the new feature.
The new section effectively demonstrates how to use tooltips within button groups, with clear examples and implementation details.
When a button is wrapped in the
<fwb-tooltip>component, it broke the grouping previously.Summary by CodeRabbit
New Features
Bug Fixes
Documentation