Skip to content

fix(Card): restore the border on the selected state#2765

Open
mnoleto wants to merge 3 commits into
mainfrom
fix/card-selected-border
Open

fix(Card): restore the border on the selected state#2765
mnoleto wants to merge 3 commits into
mainfrom
fix/card-selected-border

Conversation

@mnoleto

@mnoleto mnoleto commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Selected card lost its border

When you select a card, it's supposed to get a border to show it's selected — and the same when you hover a card that's already selected. Right now that border isn't there at all: selecting a card (or hovering a selected one) leaves it with no border, so there's no clear indication that it's the selected one.

This brings the selected border back, using the color-line-strong value from the design.

The selected and selected+hover states drew their border with an
undefined token (color-interactive-default), which invalidated the whole
box-shadow and left the card with no border. Use color-line-strong (the
value from the design) so the selected border is visible again.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@mnoleto mnoleto requested a review from noahwaldner June 11, 2026 08:02
@mnoleto mnoleto requested a review from a team as a code owner June 11, 2026 08:02
@changeset-bot

changeset-bot Bot commented Jun 11, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 919f1d3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@frontify/fondue-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@noahwaldner

Copy link
Copy Markdown
Contributor

can you please add a test case for it?

@netlify

netlify Bot commented Jun 11, 2026

Copy link
Copy Markdown

Deploy Preview for fondue-components ready!

Name Link
🔨 Latest commit 919f1d3
🔍 Latest deploy log https://app.netlify.com/projects/fondue-components/deploys/6a2fb8b56ecc97000887b41c
😎 Deploy Preview https://deploy-preview-2765.components.fondue-components.frontify.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

mnoleto and others added 2 commits June 15, 2026 10:29
Adds a Playwright component test verifying the selected and
selected+hover states render a border (inset box-shadow on the overlay)
in the color-line-strong token, and that a non-selected card has none.
Catches the regression where an undefined token removed the border.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Locator is not exported from @playwright/experimental-ct-react; import it
from @playwright/test (type-only) so the test type-checks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@mnoleto

mnoleto commented Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

can you please add a test case for it?

Done!

@mnoleto mnoleto enabled auto-merge (squash) June 15, 2026 08:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants