feat(configurator): rebuild the Components live-preview tab from scratch - #593
Conversation
The right-hand live preview for the Components category was rewritten. The old size-scale row read as near-identical buttons (the per-rung ladder was invisible) and its note still described the removed flatten-all globals as the primary sizing surface. New Components tab (src/lib/preview/sections.ts): - Size scale is baseline-aligned so the xs→xl min-height/padding/label ladder reads as a clear staircase, with an accurate note pointing at the per-size knobs + Label-size multiplier (not the retired flatten-all globals). - Styles shown on a brand family and a neutral (fill/soft/outline/gradient). - New Full-width section (sf-btn--block / sf-btn--block-cq). - New rich card exercising the full slot API — sf-card__media, __avatar, __title, __body, __footer — with token-driven gradient media/avatar (no external asset, re-tints live), beside the three shipped card modifiers. Verified in both light and dark themes; tsc, svelte-check, preview-coverage and the configurator unit/component suites all pass. 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: 52 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 (1)
📝 WalkthroughWalkthroughThe Components preview updates button size and style specimens, adds full-slot and modifier card examples, and revises the rendered section descriptions. ChangesComponents preview
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
![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 `@configurator/src/lib/preview/sections.ts`:
- Around line 356-360: Add an sf-btn--block-cq button specimen alongside the
existing sf-btn--block examples in the widths section, using the same preview
structure and appropriate label so the rendered examples match the section note
and objectives. Keep the existing block specimens and note unchanged.
🪄 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: 05cbc5df-c199-4db7-ac93-bc98ab8d6959
📒 Files selected for processing (1)
configurator/src/lib/preview/sections.ts
Greptile SummaryThe
Confidence Score: 4/5Single display-only file rewrite with no token, CSS, or version changes — safe to merge. The rewrite is clean and well-structured; the only concerns are cosmetic demo gaps in the preview page. The second block button omits a family class and may render with unexpected default colors. The sf-btn--block-cq class is documented in a note but has no visual specimen. Neither issue touches the framework CSS or any shipped token. configurator/src/lib/preview/sections.ts — the Full width section could use a second look at the outline block button's missing family modifier and the undocumented sf-btn--block-cq specimen. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[components] --> B[families: BTN_FAMILIES fill buttons]
A --> C[styles: styleRow primary + styleRow neutral]
A --> D[sizes: staircase xs s M l xl]
A --> E[widths: sf-btn--block buttons]
A --> F[states: default disabled loading]
A --> G[mediaCard: media avatar title body footer]
A --> H[cardModifiers: base bordered elevated+interactive]
B --> Z[page Components]
C --> Z
D --> Z
E --> Z
F --> Z
G --> Z
H --> Z
%%{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[components] --> B[families: BTN_FAMILIES fill buttons]
A --> C[styles: styleRow primary + styleRow neutral]
A --> D[sizes: staircase xs s M l xl]
A --> E[widths: sf-btn--block buttons]
A --> F[states: default disabled loading]
A --> G[mediaCard: media avatar title body footer]
A --> H[cardModifiers: base bordered elevated+interactive]
B --> Z[page Components]
C --> Z
D --> Z
E --> Z
F --> Z
G --> Z
H --> Z
Reviews (1): Last reviewed commit: "feat(configurator): rebuild Components p..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| section("Button families", families, `${BTN_FAMILIES.length} shipped colour families`), | ||
| section("Styles", styles, "fill · soft · outline · gradient"), | ||
| section("Size scale (xs · s · default · l · xl)", sizes, "Each rung has its own font-size, padding and min-height knob (Components panel ▸ Per-size); the Label-size multiplier scales the whole ladder proportionally."), | ||
| section("Full width", widths, "sf-btn--block stretches to the container; sf-btn--block-cq does so only in a narrow query container."), |
There was a problem hiding this comment.
sf-btn--block-cq mentioned but never shown
The section note promises that sf-btn--block-cq "does so only in a narrow query container," yet neither button in widths carries that class. A developer inspecting the preview to understand how sf-btn--block-cq differs from sf-btn--block gets no visual example — just a prose claim they cannot verify in-page.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| const widths = well(stack("s", | ||
| `<button class="sf-btn sf-btn--primary sf-btn--block">Block — full width</button>`, | ||
| `<button class="sf-btn sf-btn--outline sf-btn--block">Block — outline</button>`, | ||
| )); |
There was a problem hiding this comment.
sf-btn--outline is a style modifier; without a companion family class (e.g. sf-btn--neutral) it will render with whatever the stylesheet's unresolved default is. The first block button correctly pairs sf-btn--primary with sf-btn--block, so this looks like an accidental omission rather than an intentional bare-outline demo.
| const widths = well(stack("s", | |
| `<button class="sf-btn sf-btn--primary sf-btn--block">Block — full width</button>`, | |
| `<button class="sf-btn sf-btn--outline sf-btn--block">Block — outline</button>`, | |
| )); | |
| const widths = well(stack("s", | |
| `<button class="sf-btn sf-btn--primary sf-btn--block">Block — full width</button>`, | |
| `<button class="sf-btn sf-btn--neutral sf-btn--outline sf-btn--block">Block — outline</button>`, | |
| )); |
…block button a family Address CodeRabbit + Greptile review on PR #593 (Components preview tab): - Full-width section now shows sf-btn--block-cq in both contexts it's built for: auto width in the wide well, and stretched to 100% inside a 16rem query container (dashed) — the note promised it but no specimen existed. The stack uses align-items:flex-start so only --block (explicit 100%) and the querried block-cq actually stretch, keeping the contrast honest. - The outline block button now carries a family class (sf-btn--neutral) instead of a bare sf-btn--outline that fell back to the default family. Verified visually in light + dark; tsc, svelte-check, preview-coverage and the configurator unit/component suites pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w
…ript _s.mjs was a local Playwright screenshot helper that slipped into c2ac24e when a cleanup rm targeted the wrong path. It is not part of the codebase. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w
2 participants
Why
Follow-up to the per-size
.sf-btnwork (#590, #591). The big right-hand live preview for the Components category had two problems:Rather than patch it, the tab was rewritten from scratch.
What
Rebuilt
configurator/src/lib/preview/sections.ts→components(), built entirely from real.sf-btn/.sf-cardclasses (nothing re-implemented):sf-btn--block/sf-btn--block-cq.sf-card__media,__avatar,__title,__body,__footer, with token-driven gradient media/avatar (no external asset — re-tints live with the Colors panel), beside the three shipped card modifiers.Verification
tscclean,svelte-check0 errors.preview-coveragegate (every public class/token still appears across the tabs) + full configurator unit (164) and component (25) suites pass.Notes
main(v0.7.14) since feat(components,configurator): per-size .sf-btn padding + min-height knobs; move flatten-all to Advanced #591 merged — this is a fresh PR.🤖 Generated with Claude Code
Generated by Claude Code
Summary by CodeRabbit