feat(card): update clickable/selectable plain card border styles - #8301
Merged
mcoker merged 1 commit intoApr 13, 2026
Merged
Conversation
Contributor
WalkthroughUpdated plain card styling to handle selectable and clickable variants. These variants now override the plain card's default border color and width tokens, while preserving plain's background and shadow behavior. Added special "current" state handling for combined selectable and clickable cards. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/patternfly/components/Card/card.scss (1)
276-279: Alignpf-m-currenttoken mapping with non-plain state split.At Line 277-Line 278, clickable-only current state is using the combined selectable+clickable token. It works now, but it couples two distinct states and can regress if those tokens diverge later.
Suggested adjustment
&.pf-m-selectable, &.pf-m-clickable { --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor); --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth); - - &.pf-m-current { - --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor); - --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth); - } + } + + &.pf-m-clickable.pf-m-current { + --#{$card}--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor); + --#{$card}--BorderWidth: var(--#{$card}--m-clickable--m-current--BorderWidth); + } + + &.pf-m-selectable.pf-m-clickable.pf-m-current { + --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor); + --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/patternfly/components/Card/card.scss` around lines 276 - 279, The .pf-m-current block maps current-state variables to the combined selectable+clickable tokens; update the mapping in the &.pf-m-current selector to use the clickable-only current tokens instead (replace references to --#{$card}--m-selectable--m-clickable--m-current--BorderColor/BorderWidth with the clickable-only equivalents, e.g., --#{$card}--m-clickable--m-current--BorderColor and --#{$card}--m-clickable--m-current--BorderWidth) so the current state for clickable cards is not coupled to the selectable token path.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/patternfly/components/Card/card.scss`:
- Around line 276-279: The .pf-m-current block maps current-state variables to
the combined selectable+clickable tokens; update the mapping in the
&.pf-m-current selector to use the clickable-only current tokens instead
(replace references to
--#{$card}--m-selectable--m-clickable--m-current--BorderColor/BorderWidth with
the clickable-only equivalents, e.g.,
--#{$card}--m-clickable--m-current--BorderColor and
--#{$card}--m-clickable--m-current--BorderWidth) so the current state for
clickable cards is not coupled to the selectable token path.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 8b920149-c52f-41b8-af3a-2a21be741d4c
📒 Files selected for processing (1)
src/patternfly/components/Card/card.scss
Collaborator
|
Preview: https://pf-pr-8301.surge.sh A11y report: https://pf-pr-8301-a11y.surge.sh |
Collaborator
|
🎉 This PR is included in version 6.5.0-prerelease.68 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This was referenced May 12, 2026
This was referenced Jul 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #8142
Summary by CodeRabbit