Add variable picker dropdown to SliderRow for design token scales - #548
Merged
jackgranatowski merged 2 commits intoJul 6, 2026
Merged
Conversation
… resolved sliders Several dimension knobs (--sf-gap, --sf-gutter, --sf-btn-radius, --sf-touch-target, radius/space/border-width steps, ...) default to another design token via var(...), but SliderRow only surfaced that as a small "default: var(...)" caption while the slider itself showed a bare resolved number — hiding the fact that the value comes from the space/radius/border- width/size scale. SliderRow now renders a dropdown of the token's default plus its sibling scale steps whenever variable info is available, falling back to the numeric slider only behind an explicit "Custom value…" choice (or when the current override doesn't match any known option). Unrecognized CSS expressions still surface as editable raw text instead of a resolved number. Also wires up --sf-touch-target in MiscPanel, which was missing its rawDefault entirely despite aliasing --sf-size-l. configurator/scripts/check-curation.mjs already confirms every public knob has a home domain, so this is a display fix rather than a coverage gap.
|
Warning Review limit reached
Next review available in: 47 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)
📝 WalkthroughWalkthroughAdds a new ChangesVariable scale slider options
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant SliderRow
participant RangeWithNumber
User->>SliderRow: interacts with control
SliderRow->>SliderRow: compute allOptions, matchedOption
alt showPicker true
SliderRow-->>User: render select dropdown
User->>SliderRow: pickOption(value)
else showRawText true
SliderRow-->>User: render raw CSS input
User->>SliderRow: onRawSet(rawDraft)
else
SliderRow->>RangeWithNumber: render slider
User->>SliderRow: backToVariable()
end
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 |
PR Summary by QodoShow variable-backed SliderRow defaults as scale pickers
AI Description
Diagram
High-Level Assessment
Files changed (8)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
12 rules 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
![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 (2)
configurator/src/components/inputs/SliderRow.svelte (2)
105-115: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMinor: raw-text view has no direct "back to variable" affordance.
Slider view exposes an explicit "back to variable" link (Lines 156-160), but raw-text view only offers the
</>toggle (which switches to slider, not directly back to the picker) or clearing the field on blur. Consider adding the same link to the raw-text branch for consistency.Also applies to: 154-160
🤖 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 `@configurator/src/components/inputs/SliderRow.svelte` around lines 105 - 115, The raw-text branch of SliderRow.svelte lacks the same direct “back to variable” affordance that the slider branch already provides, so update the conditional UI around hasVarInfo/showPicker/manualView to surface that link in the raw view as well. Reuse the existing variable-picker action used in the slider section (the back-to-variable link logic near the manual/slider toggle) so both views offer the same path back to the picker, while keeping the current </> toggle for switching between raw and slider input.
21-23: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winImport
VarOptioninstead of redefining an inline duplicate type.The
variableOptionsprop type at Line 22 structurally duplicates theVarOptioninterface exported fromvariableScales.ts. Importing the shared type keeps both in sync as the schema evolves.♻️ Proposed fix
+ import type { VarOption } from '../../lib/variableScales'; + let { label, help, value, min, max, step, unit, overridden, onChange, onReset, rawDefault, currentRaw, onRawSet, variableOptions }: { ... /** Sibling scale steps (e.g. the space or radius scale) offered alongside rawDefault. */ - variableOptions?: { label: string; value: string }[]; + variableOptions?: VarOption[]; } = $props();🤖 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 `@configurator/src/components/inputs/SliderRow.svelte` around lines 21 - 23, The variableOptions prop on SliderRow.svelte is duplicating the shared VarOption shape instead of using the existing type. Update the component to import VarOption from variableScales.ts and use it for variableOptions in the $props() declaration so SliderRow stays aligned with the shared schema as it evolves.
🤖 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/components/inputs/SliderRow.svelte`:
- Around line 138-153: The raw CSS text field in SliderRow.svelte is committing
partial values too early through the oninput handler, which lets invalid drafts
be persisted and applied live. Update the input flow in SliderRow so rawDraft
only updates locally while typing, and call onRawSet from a commit point such as
onblur or Enter after validating the value shape. Keep the existing
backToVariable behavior for empty input, and use the same
rawDraft/rawDefault/onRawSet logic to locate and adjust the current handlers.
---
Nitpick comments:
In `@configurator/src/components/inputs/SliderRow.svelte`:
- Around line 105-115: The raw-text branch of SliderRow.svelte lacks the same
direct “back to variable” affordance that the slider branch already provides, so
update the conditional UI around hasVarInfo/showPicker/manualView to surface
that link in the raw view as well. Reuse the existing variable-picker action
used in the slider section (the back-to-variable link logic near the
manual/slider toggle) so both views offer the same path back to the picker,
while keeping the current </> toggle for switching between raw and slider input.
- Around line 21-23: The variableOptions prop on SliderRow.svelte is duplicating
the shared VarOption shape instead of using the existing type. Update the
component to import VarOption from variableScales.ts and use it for
variableOptions in the $props() declaration so SliderRow stays aligned with the
shared schema as it evolves.
🪄 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: c327b116-4954-4d30-9d8e-9ecfa87e6002
📒 Files selected for processing (8)
configurator/src/components/inputs/SliderRow.svelteconfigurator/src/components/panels/BordersPanel.svelteconfigurator/src/components/panels/ComponentsPanel.svelteconfigurator/src/components/panels/LayoutPanel.svelteconfigurator/src/components/panels/MacrosPanel.svelteconfigurator/src/components/panels/MiscPanel.svelteconfigurator/src/components/panels/SpacingPanel.svelteconfigurator/src/lib/variableScales.ts
…picker - Only show the variable dropdown when sibling scale options exist (variableOptions.length > 0). Rows that only had a rawDefault (e.g. BordersPanel's fine-tune radius steps, LayoutPanel's sticky offsets) were regressed into a dropdown with just "default" + "Custom value…" instead of a direct slider; they now render the slider with the small "default: ..." caption as before. - Commit the raw-CSS text field on blur/Enter instead of on every keystroke, so a partially-typed expression is never persisted as a live override. - Add a direct "back to variable" link in raw-text mode (only when a real picker exists to go back to). - Import the shared VarOption type instead of duplicating its shape inline.
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
2 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.
Summary
Refactors
SliderRowto display a dropdown picker when a slider's default value is a CSS variable (e.g.,var(--sf-radius-m)), allowing users to select from sibling scale steps instead of only adjusting a bare numeric slider. When a custom value is entered, the UI falls back to a raw CSS text input or numeric slider as appropriate.Key Changes
SliderRow.svelte: Completely refactored the raw CSS mode logic
userRawModeboolean with a three-statemanualView('none' | 'slider' | 'raw') to track user intent separately from derived statevariableOptionsprop to accept sibling scale steps (e.g., all space scale tokens)showPickerderived state: displays a<select>dropdown when the current value matches a known optionshowRawTextderived state: displays raw CSS text input when outside the picker and user has forced raw mode or the value is a CSS expressionprettyVar()helper to extract readable token names fromvar(--sf-*)expressionspickOption()andbackToVariable()handlers to manage transitions between picker, slider, and raw modesisEditing→isEditingRawfor clarity; syncing now respects edit statevariableScales.ts (new file): Centralized scale definitions
VarOptioninterface and scale constants:SPACE_SCALE,RADIUS_SCALE,BORDER_WIDTH_SCALE,CONTAINER_SCALE,SIZE_SCALE,SHADOW_SCALE{ label, value }pairs ready to pass to SliderRowComponentsPanel.svelte, BordersPanel.svelte, LayoutPanel.svelte, MacrosPanel.svelte, MiscPanel.svelte, SpacingPanel.svelte: Updated all SliderRow instances
variableOptionsprop to every slider that has arawDefaultpointing to a design token scaleSPACE_SCALEfor spacing tokens,RADIUS_SCALEfor radius tokens)VarOption[]typesNotable Implementation Details
currentRawisundefinedor matches one of the known options; custom expressions fall through to raw text modeonReset()and resetsmanualViewto 'none'__sf_custom__) triggers slider mode, allowing numeric entrymanualView = 'none'(auto-detect), forcing raw mode setsmanualView = 'raw', etc.--sf-scroll-shadow-size(MacrosPanel) as it has no variable default--sf-touch-target(MiscPanel) withSIZE_SCALEhttps://claude.ai/code/session_01FjJFq6kh8ujT4sdUxfeLxQ
Summary by CodeRabbit
New Features
Bug Fixes