feat(components): expand staged button/card surface - #442
Conversation
|
Warning Review limit reached
More reviews will be available in 48 minutes and 2 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughUpdates optional component CSS for ChangesButton and Card Component Enhancements
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
PR Summary by QodoExpand optional component CSS for staged button variants and card subcomponents Description
Diagram
High-Level Assessment
Files changed (2)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@optional/tokens.components.css`:
- Around line 55-58: The button token contract documents --sf-btn-min-height,
but .sf-btn does not actually use it because the staged button rule still
hardcodes var(--sf-touch-target). Update the .sf-btn styling in
optional/components.css so it consumes --sf-btn-min-height instead of the fixed
token, and keep the token definition in optional/tokens.components.css aligned
with the class implementation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1d37a616-7c30-46e2-828f-b50182acd5aa
📒 Files selected for processing (2)
optional/components.cssoptional/tokens.components.css
Code Review by Qodo
Context used✅ Compliance rules (platform):
6 rules 1. Warning hover on-color mismatch
|
Staged (commented until v0.8) additions to the optional component module, using the framework's own mechanisms — design tokens, the OKLCH palette, container queries instead of breakpoints, and explicit BEM classes instead of fragile attribute selectors. Smart-card subcomponents: - .sf-card__media (16/9 cover image, inner radius), .sf-card__avatar (round), .sf-card__title (unified heading size) - nested .sf-btn shrinks via the --sf-card-btn-font-size token Button semantic variants: - tokenize base font-size as --sf-btn-font-size - add --primary/--neutral (hover via the --hover token) and --success/--warning/--info (hover via the direction-aware -strong triplet) - fix --danger hover to use --sf-color-danger-strong instead of filter: brightness() for correct light/dark behaviour Button width (predictable 2-state model, verified in Chromium across wide/narrow/no-container contexts): - .sf-btn: intrinsic width by default (like Bootstrap/Bulma/Tailwind) - .sf-btn--block: unconditional full width, works everywhere - .sf-btn--block-cq: opt-in full width only inside a query container narrower than 20rem (needs a container ancestor: layout primitives or .sf-cq). No @media breakpoints. New staged tokens: --sf-card-media-ratio/-radius, --sf-card-heading-size, --sf-card-btn-font-size, --sf-btn-font-size. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Crh1FKPkmEzMbUQbi2Fi8H
2aa447e to
ed5c28c
Compare
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
optional/components.css (1)
212-218: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winMake
.sf-card__mediablock-level.
<img>/<video>are inline by default, so this selector will leave baseline whitespace under common card media usage. That creates a visible gap beneath the supposed edge-to-edge cover asset.Suggested fix
.sf-card__media { + display: block; inline-size: 100%; aspect-ratio: var(--sf-card-media-ratio, var(--sf-ratio-video)); object-fit: cover; border-radius: var(--sf-card-media-radius, var(--sf-card-radius, var(--sf-radius-m))); overflow: clip; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@optional/components.css` around lines 212 - 218, The .sf-card__media rule leaves inline replaced elements like img and video at inline layout, which can create unwanted baseline whitespace under card media. Update the .sf-card__media selector in components.css to make the media block-level while preserving the existing sizing, aspect-ratio, object-fit, border-radius, and overflow behavior so edge-to-edge card media renders flush.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@optional/components.css`:
- Around line 212-218: The .sf-card__media rule leaves inline replaced elements
like img and video at inline layout, which can create unwanted baseline
whitespace under card media. Update the .sf-card__media selector in
components.css to make the media block-level while preserving the existing
sizing, aspect-ratio, object-fit, border-radius, and overflow behavior so
edge-to-edge card media renders flush.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: dd357d41-111e-4b03-b7c3-9a367415fc45
📒 Files selected for processing (2)
optional/components.cssoptional/tokens.components.css
✅ Files skipped from review due to trivial changes (1)
- optional/tokens.components.css
- .sf-btn consumes --sf-btn-min-height (fallback --sf-touch-target) so the documented token contract matches the class implementation - .sf-card__media is display:block to avoid inline baseline whitespace under cover images/video Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Crh1FKPkmEzMbUQbi2Fi8H
2 participants
Staged (commented until v0.8) additions to the optional component module,
keeping the framework's own mechanisms — design tokens, the OKLCH palette,
container queries instead of breakpoints, and explicit BEM classes instead
of fragile attribute selectors.
Smart-card subcomponents:
(round), .sf-card__title (unified heading size)
Button semantic variants:
--success/--warning/--info (hover via the direction-aware -strong
triplet)
filter: brightness() for correct light/dark behaviour
Full-width:
(threshold is a literal — query conditions cannot read var())
New staged tokens: --sf-card-media-ratio/-radius, --sf-card-heading-size,
--sf-card-btn-font-size, --sf-btn-font-size.
Co-Authored-By: Claude Opus 4.8 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01Crh1FKPkmEzMbUQbi2Fi8H
Summary by CodeRabbit