feat(nodes-2): advanced-inputs affordance overhaul (stacked on #12678)#12725
Draft
comfydesigner wants to merge 3 commits into
Draft
feat(nodes-2): advanced-inputs affordance overhaul (stacked on #12678)#12725comfydesigner wants to merge 3 commits into
comfydesigner wants to merge 3 commits into
Conversation
added 3 commits
June 5, 2026 20:55
- Drop body font from text-sm to text-xs; header chevron and pin to 16px - Header padding 8/12/8 → 4 all sides (height 40 → 24 px) - Header text color matches widget labels (text-node-component-slot-text) - Footer height 36 → 44 px (visible 16 → 24 px); single 12 px corner radius - Footer subgraph/advanced text uses grey token; error stays white - Widget row 28 → 24 px; stepper buttons 32 → 24 px square - Slot dot 12 → 8 px; socket row 24 → 20 px; slot row padding 24 → 8 px - Label column 80 px, label↔input gap 8 px - Select trigger p-0 + pl-7 to align values with number widget x-position - Drop-shadow on the node root for combined body+footer silhouette - Softer header surface tokens for default themes - Drop unused body-border overlay element
The previous pl-7 (28 px) was designed to align dropdown values with number input values across a widget row — number values start at x = 28 px from the widget left (24 px stepper button + 4 px padding), so dropdowns padded to the same x position read as a vertical column in mixed-widget nodes like KSampler. For nodes that have no number widgets (e.g. Video Stitch, with only a dropdown and a toggle), the 28 px padding looked like wasted space: no values to align with, just a visible empty column on the left of every dropdown. The proper fix would be context-aware padding: the parent node detects whether any sibling widget is a stepper-input, and propagates that down. Tracked separately. For now, revert to the visually consistent 8 px (gap-2 rhythm used elsewhere on the node — header content gap, widget label↔input gap, etc.). This trades the cross-row column alignment in mixed-widget nodes for a cleaner standalone appearance.
The global settings panel called this 'Show advanced parameters' while the per-node footer button calls it 'Show advanced inputs'. Same underlying state (widget.options.advanced), different label, no good reason — pick one and use it consistently. Going with 'advanced inputs' because: - All internal symbols already agree: showAdvancedInputsButton, hideAdvancedInputsButton, showAdvanced state on the litegraph node, Comfy.Node.AlwaysShowAdvancedWidgets setting key. - 'Inputs' is unambiguous (parameter could mean input or output). - Renaming one i18n string is safer than renaming code. Touches only the English locale. Other locales already differed and will need their own pass; not in scope here.
Contributor
📝 WalkthroughWalkthroughThis PR is a comprehensive design system refinement that updates color tokens for light/dark themes, refactors node component styling to use smaller rounded corners, adjusts spacing and sizing across slots and widgets, replaces PrimeIcons with Lucide icons, and updates related test assertions. ChangesDesign System and Component Styling Update
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 7✅ Passed checks (7 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
🎨 Storybook:
|
🎭 Playwright: ⏳ Running... |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/renderer/extensions/vueNodes/components/NodeFooter.test.ts (1)
201-209: ⚡ Quick winAdd a left-tab radius assertion in dual-tab mode
This case only checks enter-tab rounding. Add an assertion for the error tab so
the dual-tab seam/corner regression is caught in tests.As per coding guidelines, "Write tests for all changes, especially bug fixes to catch future regressions."
Example assertion add-on
it('enter tab uses right-only rounding in dual-tab mode (Case 1)', () => { renderFooter({ isSubgraph: true, hasAnyError: true, showErrorsTabEnabled: true }) + const errorBtn = screen.getByText('Error').closest('button') const enterBtn = screen.getByTestId('subgraph-enter-button') + expect(errorBtn?.className ?? '').not.toMatch(/rounded-br-xl/) expect(enterBtn.className).toMatch(/rounded-br-xl/) })🤖 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 `@src/renderer/extensions/vueNodes/components/NodeFooter.test.ts` around lines 201 - 209, The test currently only asserts the right-side rounding for the enter tab; add an assertion that the error tab has the left-side radius in dual-tab mode by calling screen.getByTestId for the error tab (e.g., 'subgraph-error-button' or the existing error tab test id used elsewhere) after renderFooter(...) and assert its className matches the left-only rounding regex (e.g., /rounded-bl-xl/) so the dual-tab seam/corner regression is covered.Source: Coding guidelines
🤖 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 `@src/renderer/extensions/vueNodes/components/NodeFooter.vue`:
- Around line 257-271: The computed errorRadiusClass uses getBottomRadius(shape)
which lacks a left-side option and can incorrectly round the inner seam; update
getBottomRadius to accept a 'left' corners option (extend the type to 'both' |
'right' | 'left') and return 'rounded-bl-xl' when corners === 'left' (respecting
the existing RenderShape.BOX and CARD logic), then set errorRadiusClass =
computed(() => getBottomRadius(shape, 'left')) so the error button rounds the
outer left corner correctly.
---
Nitpick comments:
In `@src/renderer/extensions/vueNodes/components/NodeFooter.test.ts`:
- Around line 201-209: The test currently only asserts the right-side rounding
for the enter tab; add an assertion that the error tab has the left-side radius
in dual-tab mode by calling screen.getByTestId for the error tab (e.g.,
'subgraph-error-button' or the existing error tab test id used elsewhere) after
renderFooter(...) and assert its className matches the left-only rounding regex
(e.g., /rounded-bl-xl/) so the dual-tab seam/corner regression is covered.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 8ca33e84-88f7-4080-b3cb-98aa1fa8226a
📒 Files selected for processing (15)
packages/design-system/src/css/style.csssrc/components/common/ScrubableNumberInput.vuesrc/locales/en/main.jsonsrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/components/NodeFooter.test.tssrc/renderer/extensions/vueNodes/components/NodeFooter.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/renderer/extensions/vueNodes/components/SlotConnectionDot.vuesrc/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vuesrc/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vuesrc/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/index.ts
Comment on lines
257
to
+271
| function getBottomRadius( | ||
| nodeShape: RenderShape | undefined, | ||
| size: '17px' | '20px', | ||
| corners: 'both' | 'right' = 'both' | ||
| ): string { | ||
| if (nodeShape === RenderShape.BOX) return '' | ||
| const prefix = | ||
| nodeShape === RenderShape.CARD || corners === 'right' | ||
| ? 'rounded-br' | ||
| : 'rounded-b' | ||
| const key = | ||
| `${prefix}-${size === '17px' ? '17' : '20'}` as keyof typeof RADIUS_CLASS | ||
| return RADIUS_CLASS[key] | ||
| return nodeShape === RenderShape.CARD || corners === 'right' | ||
| ? 'rounded-br-xl' | ||
| : 'rounded-b-xl' | ||
| } | ||
|
|
||
| const footerRadiusClass = computed(() => | ||
| getBottomRadius(shape, hasAnyError ? '20px' : '17px') | ||
| ) | ||
| const footerRadiusClass = computed(() => getBottomRadius(shape)) | ||
|
|
||
| const errorRadiusClass = computed(() => getBottomRadius(shape, '20px')) | ||
| const errorRadiusClass = computed(() => getBottomRadius(shape)) | ||
|
|
||
| const enterRadiusClass = computed(() => getBottomRadius(shape, '20px', 'right')) | ||
| const enterRadiusClass = computed(() => getBottomRadius(shape, 'right')) |
Contributor
There was a problem hiding this comment.
Fix corner selection for dual-tab error button
At Line 269, errorRadiusClass uses getBottomRadius(shape) which can
apply right-side rounding to the left tab in dual-tab layouts. That rounds the
inner seam instead of the outer edge.
Proposed fix
-function getBottomRadius(
- nodeShape: RenderShape | undefined,
- corners: 'both' | 'right' = 'both'
-): string {
+function getBottomRadius(
+ nodeShape: RenderShape | undefined,
+ corners: 'both' | 'left' | 'right' = 'both'
+): string {
if (nodeShape === RenderShape.BOX) return ''
- return nodeShape === RenderShape.CARD || corners === 'right'
- ? 'rounded-br-xl'
- : 'rounded-b-xl'
+ if (nodeShape === RenderShape.CARD) {
+ return corners === 'right' || corners === 'both' ? 'rounded-br-xl' : ''
+ }
+ if (corners === 'left') return 'rounded-bl-xl'
+ if (corners === 'right') return 'rounded-br-xl'
+ return 'rounded-b-xl'
}
const footerRadiusClass = computed(() => getBottomRadius(shape))
-const errorRadiusClass = computed(() => getBottomRadius(shape))
+const errorRadiusClass = computed(() => getBottomRadius(shape, 'left'))
const enterRadiusClass = computed(() => getBottomRadius(shape, 'right'))🤖 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 `@src/renderer/extensions/vueNodes/components/NodeFooter.vue` around lines 257
- 271, The computed errorRadiusClass uses getBottomRadius(shape) which lacks a
left-side option and can incorrectly round the inner seam; update
getBottomRadius to accept a 'left' corners option (extend the type to 'both' |
'right' | 'left') and return 'rounded-bl-xl' when corners === 'left' (respecting
the existing RenderShape.BOX and CARD logic), then set errorRadiusClass =
computed(() => getBottomRadius(shape, 'left')) so the error button rounds the
outer left corner correctly.
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
1 participant
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
Make the advanced-inputs controls discoverable and consistent. The global setting was buried 3 clicks deep, and we were calling the same concept "advanced parameters" in one place and "advanced inputs" in another. This PR aligns the naming and (in follow-up commits) restructures the per-node footer affordance into a popover that surfaces the global option contextually.
Changes
Review Focus
Screenshots
(pending)