fix: Background color of the Card component #385 #386
Conversation
Added support for an optional class prop in FwbCard component to allow for custom styling. Updated useCardsClasses to conditionally apply background classes based on the provided class prop.
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant FwbCard
participant useCardClasses
ParentComponent->>FwbCard: Passes class prop (optional)
FwbCard->>useCardClasses: Calls with props (including class)
useCardClasses-->>FwbCard: Returns computed cardClasses
FwbCard-->>ParentComponent: Renders with merged classes (internal + external)
Possibly related PRs
Suggested labels
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
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: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/FwbCard/FwbCard.vue(2 hunks)src/components/FwbCard/composables/useCardClasses.ts(2 hunks)
🧰 Additional context used
🪛 ESLint
src/components/FwbCard/composables/useCardClasses.ts
[error] 17-17: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 27-27: Extra semicolon.
(@stylistic/semi)
🪛 GitHub Check: lint (18.x)
src/components/FwbCard/composables/useCardClasses.ts
[failure] 27-27:
Extra semicolon
[failure] 17-17:
Trailing spaces not allowed
🪛 GitHub Actions: Node.js CI
src/components/FwbCard/composables/useCardClasses.ts
[error] 17-17: ESLint: Trailing spaces not allowed (@stylistic/no-trailing-spaces)
🔇 Additional comments (6)
src/components/FwbCard/composables/useCardClasses.ts (3)
8-8: Good addition of optional class prop to the interface.The Ref type is correctly applied, allowing for reactive class strings to be passed from components.
19-24: Clean refactoring of variant class assignment.The refactoring improves readability by consolidating the variant-based class assignments into a single conditional block with clear variant-specific classes.
30-32: Good conditional hover state handling.The hover state classes are now correctly applied only when:
- A link (href) is present, making the card interactive
- No custom class is provided that might include conflicting hover states
This prevents style conflicts when using custom classes.
src/components/FwbCard/FwbCard.vue (3)
4-4: Good implementation of class composition.Using the array syntax for
:classis the correct approach to merge the computed internal classes with the externally provided class prop.
44-47: Well-structured class prop definition.The new class prop is properly defined with appropriate type and default value. This implementation allows users to pass custom classes to the card component while maintaining the component's base styling.
50-50: Make sure to provide the new class prop to the composable.The line correctly passes all props to the composable using
toRefs(props), which includes the newly added class prop. The composable will now have access to the class property and can apply the conditional background logic.
…enation in useCardsClasses
Added support for an optional class prop in FwbCard component to allow for custom styling. Updated useCardsClasses to conditionally apply background classes based on the provided class prop.
Please check and give feedback. I will be waiting, good day. @Sqrcz @cogor @zoltanszogyenyi
Summary by CodeRabbit