fix: card no pointer events none if no link #2943
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the F0Card component by improving pointer event handling for card content and adding comprehensive documentation and test scenarios. The key change ensures that children elements within cards are only non-interactive when an overlay link is active.
- Modified pointer-events logic to conditionally apply based on overlay link state
- Added interactive button example to SlotComponent demonstrating clickable children
- Enhanced Storybook documentation with component descriptions and argTypes details
- Added new story
WithChildrenAndLinkto test cards with both children and links
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react/src/components/F0Card/CardInternal.tsx | Updated pointer-events logic on CardContent and CardHeader to conditionally disable interactions based on link and disableOverlayLink props |
| packages/react/src/components/F0Card/stories/Card.stories.tsx | Added F0Button import, enhanced SlotComponent with interactive button, added component documentation, argTypes descriptions, and new WithChildrenAndLink story |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <CardContent className="pointer-events-none"> | ||
| <CardContent | ||
| className={cn( | ||
| (disableOverlayLink || link) && "pointer-events-none" |
There was a problem hiding this comment.
The logic for applying pointer-events-none appears incorrect. Currently, it applies when disableOverlayLink is true OR when link exists. However, based on the context:
- When
disableOverlayLinkis true, the overlay link is disabled, so children SHOULD be clickable - When
linkexists (anddisableOverlayLinkis false), the overlay link is active, so children should NOT be clickable
The condition should be (!disableOverlayLink && link) to only disable pointer events when there's a link AND the overlay is enabled.
| (disableOverlayLink || link) && "pointer-events-none" | |
| (!disableOverlayLink && link) && "pointer-events-none" |
Coverage Report for packages/react
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
🔍 Visual review for your branch is published 🔍Here are the links to: |
size-limit report 📦
|
Description
Removes the
pointer-events: nonefrom the card when no link to allow click on children elementsScreenshots (if applicable)
[Link to Figma Design](Figma URL here)
Implementation details