feat(list-group-item): add active prop #370
Conversation
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FwbListGroupItem
participant useListGroupItemClasses
User->>FwbListGroupItem: Set props (active, hover, disabled)
FwbListGroupItem->>useListGroupItemClasses: Pass props (active, hover, disabled)
useListGroupItemClasses-->>FwbListGroupItem: Compute itemClasses (apply active styles if active and not disabled)
FwbListGroupItem-->>User: Render with computed classes reflecting active state
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 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
🧹 Nitpick comments (1)
docs/components/list-group.md (1)
45-45: Documentation updated correctly to reflect new functionality.The hover example now includes the
activeattribute on the first item, which aligns with the component example and demonstrates the new functionality to users.Consider adding a brief note in the documentation that explains the active state and its priority over hover styling, perhaps in a new section specifically for the active state.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/components/list-group.md(1 hunks)docs/components/listGroup/examples/FwbListGroupExampleHover.vue(1 hunks)src/components/FwbListGroup/FwbListGroupItem.vue(1 hunks)src/components/FwbListGroup/composables/useListGroupItemClasses.ts(2 hunks)
🔇 Additional comments (5)
src/components/FwbListGroup/composables/useListGroupItemClasses.ts (3)
8-8: Good choice of styling for active items.The Tailwind classes selected for active items (
text-white bg-blue-700 dark:bg-gray-800 cursor-pointer) align well with Flowbite's design system. The white text on blue background creates appropriate visual contrast for the active state.
13-13: LGTM! Good addition of active prop to the type definition.Adding
activeto theUseListGroupItemClassesPropstype correctly extends the component's API.
23-24: Well-implemented styling priority logic.The implementation correctly prioritizes active styling over hover styling by:
- Only applying hover styles when the item is not active and not disabled
- Applying active styles when the item is active and not disabled
This ensures a proper visual hierarchy when states are combined.
docs/components/listGroup/examples/FwbListGroupExampleHover.vue (1)
4-7: Good demonstration of the active state.The first list item now properly showcases the active state alongside hover. The multi-line format also improves code readability.
src/components/FwbListGroup/FwbListGroupItem.vue (1)
33-36: Prop implementation follows Vue best practices.The
activeprop is correctly implemented with:
- Appropriate Boolean type
- Default value of false
- Consistent style with other related props (hover, disabled)
This provides a clean API for component users.
- refactored to use newer `useMergeClasses` composable
|
@Sqrcz looks good in the netlify deploy! Thanks for the quick response :) |
2 participants
The active prop from list groups was missing so this PR adds it as a prop
Summary by CodeRabbit