refactor(components)!: drop the .sf-card auto-shrink of nested button labels - #602
Conversation
… labels
The `.sf-card .sf-btn { --sf-btn-font-size--size: var(--sf-card-btn-font-size,
var(--sf-text-s)) }` rule silently pinned every button nested in a card to the
text-s label size, so the same .sf-btn rendered smaller inside a card than
outside it (and a .sf-btn--xl in a footer lost its size). This context-dependent
restyling — one component quietly overriding another — was surprising and is the
only rule of its kind in the framework, so it is removed.
Buttons in cards now render at their own size (default = text-m), like anywhere
else — the Bootstrap/Tailwind model. Add .sf-btn--s explicitly for a compact
card action, or scope a size tier on a card variant to shrink them in bulk.
- Remove the .sf-card .sf-btn rule (optional/components.css).
- Remove the now-orphaned --sf-card-btn-font-size token, its annotation, its
llm-guide entry, and the configurator "Nested button size" control.
- Regenerate registry/docs/demos/api-index (755 tokens, was 756); update the
token-api snapshot, audit report and coverage list.
- Document the break in docs/migration.md and CHANGELOG (Breaking Changes).
Verified in Chromium: a default .sf-btn in a card footer now measures text-m
(19.4px), identical to outside a card; an explicit .sf-btn--s stays text-s.
BREAKING CHANGE: buttons nested in .sf-card no longer auto-shrink to text-s;
add .sf-btn--s for a compact card action. The --sf-card-btn-font-size token is
removed.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w
|
Warning Review limit reached
Next review available in: 43 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?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 reviews. How do review 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 refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe card component no longer shrinks nested button labels or exposes ChangesCard button sizing
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: 🚥 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 |
Greptile SummaryThis PR removes the only context-dependent component override in the framework: the
Confidence Score: 5/5Safe to merge — the change is a clean removal with no residual references, full artifact regeneration, and clear migration documentation. The CSS deletion is minimal and surgical; the token is consistently removed from every generated artifact (registry, snapshot, docs, audit report, configurator, demos, LLM guide). The migration guide provides actionable replacement patterns. The token-registry correctly marks ID 725 as removed to avoid future ID collision. No stale references remain. No files require special attention — all generated outputs are updated in lockstep with the source change. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[".sf-btn inside .sf-card"] --> B["Before this PR"]
A --> C["After this PR"]
B --> D[".sf-card .sf-btn rule fires\nlocks font-size to text-s\nignores explicit size modifiers"]
C --> F["No scoped override\nbutton uses its own size tier"]
F --> G["Default .sf-btn = text-m\n.sf-btn--xl = text-xl"]
G --> H["Want compact? Add .sf-btn--s explicitly"]
G --> I["Want all smaller? Set --sf-btn-font-size--size on card variant"]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[".sf-btn inside .sf-card"] --> B["Before this PR"]
A --> C["After this PR"]
B --> D[".sf-card .sf-btn rule fires\nlocks font-size to text-s\nignores explicit size modifiers"]
C --> F["No scoped override\nbutton uses its own size tier"]
F --> G["Default .sf-btn = text-m\n.sf-btn--xl = text-xl"]
G --> H["Want compact? Add .sf-btn--s explicitly"]
G --> I["Want all smaller? Set --sf-btn-font-size--size on card variant"]
Reviews (1): Last reviewed commit: "refactor(components)!: drop the .sf-card..." | Re-trigger Greptile |
![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
🧹 Nitpick comments (1)
docs/test-coverage-6-token-reference.html (1)
112-112: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider generating
TOKENSfrom the same source of truth.The token list is correctly updated here, but it's a hardcoded literal array duplicated across multiple artifacts (this file,
docs/registry.json,docs/api-index.json,docs/api-index.md). Each token addition/removal (like this PR's) requires manually syncing all of them. Generating this array at build time fromdocs/registry.jsonwould eliminate that drift risk going forward.🤖 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 `@docs/test-coverage-6-token-reference.html` at line 112, Update the TOKENS initialization in the generated test-coverage artifact to derive its values from the shared docs/registry.json source during the build, rather than maintaining a duplicated hardcoded array. Adjust the artifact-generation flow so docs/registry.json remains the single source of truth and the related docs/api-index outputs stay synchronized automatically.
🤖 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/components.css`:
- Around line 403-404: Update the card button documentation in
docs/components.md to reflect that nested .sf-btn no longer auto-shrinks. Remove
or rewrite the --sf-card-btn-font-size token-table entry and describe using the
explicit .sf-btn--s class for compact card actions.
---
Nitpick comments:
In `@docs/test-coverage-6-token-reference.html`:
- Line 112: Update the TOKENS initialization in the generated test-coverage
artifact to derive its values from the shared docs/registry.json source during
the build, rather than maintaining a duplicated hardcoded array. Adjust the
artifact-generation flow so docs/registry.json remains the single source of
truth and the related docs/api-index outputs stay synchronized automatically.
🪄 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: b7bfdb91-8154-4a16-81cf-64511522f76e
⛔ Files ignored due to path filters (1)
dist/css-custom-data.jsonis excluded by!**/dist/**
📒 Files selected for processing (21)
CHANGELOG.mdconfigurator/src/components/panels/ComponentsPanel.svelteconfigurator/src/data/api-index.generated.jsonconfigurator/src/data/token-registry.generated.jsondemos/full-api-demo-with-overrides.htmldemos/full-api-demo.htmldocs/api-index.jsondocs/api-index.mddocs/llm-guide.mddocs/migration.mddocs/registry.jsondocs/test-coverage-6-token-reference.htmldocs/token-annotations.jsondocs/token-index.jsondocs/token-index.mddocs/tokens.mdoptional/components.cssoptional/tokens.components.cssreports/full-api-audit/results/tokens-report.jsontests/token-api.snapshot.jsontoken-registry.json
💤 Files with no reviewable changes (4)
- docs/llm-guide.md
- configurator/src/components/panels/ComponentsPanel.svelte
- tests/token-api.snapshot.json
- docs/token-annotations.json
Address CodeRabbit review on PR #602: docs/components.md (hand-authored, not gated by check:llm-guide) still described nested .sf-btn as auto-shrinking to --sf-card-btn-font-size and listed the removed token in the card token table. Rewrite the prose to point at explicit .sf-btn--s and drop the table row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w
tests/card.spec.js asserted the old behaviour ("a nested .sf-btn shrinks
relative to a standalone one"), which the Regression suite flagged after the
.sf-card .sf-btn rule was removed (nested == standalone: 19.11 == 19.11). Rewrite
it to the new contract: a plain nested .sf-btn matches a standalone one (no
auto-shrink), and .sf-btn--s opts into a compact card action.
Verified in Chromium against the exact markup: loose == nested == 19.41px;
compact (.sf-btn--s) == 14.68px < loose.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w
2 participants
Why
.sf-card .sf-btn { --sf-btn-font-size--size: var(--sf-card-btn-font-size, var(--sf-text-s)) }silently pinned every button nested in a card to thetext-slabel size. So the same.sf-btnrendered smaller inside a card than outside, and a.sf-btn--xlin a footer lost its size.This is context-dependent restyling — one component quietly overriding another — and an audit of the whole framework found it's the only rule of its kind. It's surprising (it caused a real preview bug in #601) and unpredictable, so we remove it in favour of the Bootstrap/Tailwind model: an element looks the same regardless of its container; you opt into a smaller button explicitly.
What
.sf-card .sf-btnrule (optional/components.css).--sf-card-btn-font-sizetoken, its annotation, itsllm-guideentry, and the configurator's "Nested button size" control.docs/migration.mdandCHANGELOG.md.Migrating
Buttons in cards now render at their own size (default
.sf-btn=text-m). For a compact card action, size the button explicitly — as you would anywhere:Or shrink every button in a card variant in bulk:
Verification
Measured in Chromium (built dist):
.sf-btnoutside a card.sf-btnin.sf-card__footer.sf-btn--sin a cardAll green: 10 CSS gates (incl.
check:dead-knobs— no orphan token,audit755 tokens), 109 node unit tests, configuratortsc/svelte-check/check:curation/ 164 vitest + 25 component tests.Notes
!commit +BREAKING CHANGE:footer);docs/migration.mdupdated so the migration-docs gate passes. No version bump here — the release process owns that.main(v0.7.15, includes fix(configurator): size-scale preview flattened button label font (card backdrop) #601) — fresh PR.🤖 Generated with Claude Code
Generated by Claude Code
Summary by CodeRabbit
Breaking Changes
.sf-btn--sor an explicit size override for compact card actions.--sf-card-btn-font-sizetoken.Documentation