Conversation
github-actions
bot
added
the
Scope: Frontend
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| !config.components.includes(lowerName) && | ||
| !subgroupComponents.has(lowerName) && | ||
| !folderNode.children[name] | ||
| ) { |
There was a problem hiding this comment.
Sort overrides intended component ordering in subgroups
Medium Severity
The buildComponentTree function carefully adds top-level components in config.components order (e.g., form, fields, autosavefield), but sortTreeRecursively later re-sorts all children with folders before files, then alphabetically. This causes the _subgroup_Primitives folder to appear before the main form documentation entries, and the remaining items to be alphabetized (autosavefield, fields, form) rather than following the configured display order. The explicit ordering from config.components is effectively discarded.
Additional Locations (1)
There was a problem hiding this comment.
The side-effect of this is that the in-page navigation no longer matches the sidebar
natemoo-re
left a comment
natemoo-re
left a comment
There was a problem hiding this comment.
Docs look great, very happy with this overall! Just a few comments/questions.
| <form.AppField name="color"> | ||
| {field => ( | ||
| <field.Layout.Row label="Terms of Service:"> | ||
| <field.Layout.Row label="Brand Color:"> |
There was a problem hiding this comment.
Can we drop the : labels? Don't want to give Claude incorrect patterns.
| <field.Layout.Row label="Brand Color:"> | |
| <field.Layout.Row label="Brand Color"> |
| title: CompactSelect | ||
| description: A versatile dropdown select component for non-form contexts, supporting sections, search, multi-select, custom triggers, and performance optimizations. | ||
| category: forms | ||
| category: buttons |
There was a problem hiding this comment.
I understand wanting to separate these from the primitives connected to a <Form>, but I'm not sure if button is the right category?
There was a problem hiding this comment.
yeah, do you have an alternative grouping idea? compactSelect gets triggered by a button, and we never use it in a form, so it can’t even be used as a formField. segmentedControl is really just buttons with multiple states.
how about “controls” ?
There was a problem hiding this comment.
The __stories__ pattern is nice! We currently have static/app/stories/playground but colocation makes more sense (short of fixing the issue with prettier)
There was a problem hiding this comment.
yeah it already exists somewhere that’s why knip categorizes it correctly:
Lines 62 to 64 in 1448df5
|
|
||
| ## Select | ||
|
|
||
| Single-value select dropdown. |
There was a problem hiding this comment.
Might be nice to mention that this uses react-select? Just to avoid confusion among our many implementations.
| <form.AppField | ||
| name="secret" | ||
| validators={{ | ||
| onDynamic: z.string().min(1, 'Secret is required'), |
There was a problem hiding this comment.
Would be nice to link to https://tanstack.com/form/latest/docs/framework/react/guides/dynamic-validation here—onDynamic is likely a new concept for most people
| > [!TIP] | ||
| > Prefer using a string for `disabled` so users understand why the field is not editable. |
There was a problem hiding this comment.
We should ideally only document the good pattern :)
|
|
||
| // String — disabled with a reason shown as tooltip | ||
| <field.Input | ||
| disabled="This feature requires a Business plan" |
| <form | ||
| data-test-id={form.formId} | ||
| id={form.formId} | ||
| style={{width: '100%'}} |
| !config.components.includes(lowerName) && | ||
| !subgroupComponents.has(lowerName) && | ||
| !folderNode.children[name] | ||
| ) { |
There was a problem hiding this comment.
The side-effect of this is that the in-page navigation no longer matches the sidebar
| "@tanstack/react-devtools": "^0.9.3", | ||
| "@tanstack/react-form": "^1.28.0", | ||
| "@tanstack/react-form-devtools": "^0.2.13", |
There was a problem hiding this comment.
yes, I’ll make a new PR to add tanstack devtools and also integrate the query one.
2 participants
new pages:
other form related fields have been moved to
primitivesso the sidebar is now this: