feat(field): horizontal field layout improvements - #10865
Conversation
🦋 Changeset detectedLatest commit: dabe8ae The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| export interface FieldInputElementProps | ||
| extends HTMLChakraProps<"input">, UnstyledProp {} | ||
|
|
||
| export const FieldInputElement = withContext< | ||
| HTMLDivElement, | ||
| FieldInputElementProps | ||
| >("input", "inputElement") |
There was a problem hiding this comment.
This is the type mismatch I mentioned, the ref is typed HTMLDivElement, but the props and base tag are "input", so they don't line up. And in practice this is always an asChild grid wrapper (it wraps Switch.Root too, which is a div), so it isn't really an input. A neutral div keeps the ref/tag/props consistent and matches how it's used:
| export interface FieldInputElementProps | |
| extends HTMLChakraProps<"input">, UnstyledProp {} | |
| export const FieldInputElement = withContext< | |
| HTMLDivElement, | |
| FieldInputElementProps | |
| >("input", "inputElement") | |
| export interface FieldInputElementProps | |
| extends HTMLChakraProps<"div">, UnstyledProp {} | |
| export const FieldInputElement = withContext< | |
| HTMLDivElement, | |
| FieldInputElementProps | |
| >("div", "inputElement") |
| group: { | ||
| flexDirection: "row", | ||
| }, |
There was a problem hiding this comment.
The group here doesn't have a matching slot in the field anatomy, so this block never renders.
| group: { | |
| flexDirection: "row", | |
| }, |
| containerType?: ConditionalValue<CssProperties["containerType"] | undefined | AnyString> | undefined | ||
| content?: ConditionalValue<CssProperties["content"] | undefined | AnyString> | undefined | ||
| contentVisibility?: ConditionalValue<CssProperties["contentVisibility"] | undefined | AnyString> | undefined | ||
| // cornerShape?: ConditionalValue<CssProperties["cornerShape"] | undefined | AnyString> | undefined |
There was a problem hiding this comment.
Could we also remove this?
There was a problem hiding this comment.
I explained this problem here https://chakraui.slack.com/archives/C049UEYUK7S/p1782042834416699?thread_ts=1781767849.968099&cid=C049UEYUK7S
If I remove this completely, it will appear again on the next code gen. If I uncomment it, we will have TS issue.
I think we need to contribute to the csstype and add cornerShape type definition.
There was a problem hiding this comment.
How did I miss that? 🤦
There was a problem hiding this comment.
I've figured it out and added local CornerShape augmentation for now
dabe8ae
Maybe we should consider migrating to https://github.com/dev-five-git/csstype-extra or do the same auto-gen ourselves
Automatically generated, up-to-date TypeScript definitions for CSS based on Mozilla's MDN data. Inspired by csstype
…nd custom-string support
📝 Description
Implement horizontal field layout with proper label-to-input alignment using CSS Grid.
Storybook:
Docs:
⛳️ Current behavior (updates)
Horizontal field layouts had helper and error text appearing on the same line as the label and input, making it difficult to manage multiple rows of information.
🚀 New behavior
<Field.InputElement>is added, it's optional and used just for styling purposes💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
What changed:
<Field.Group>approach that we discussed internally, but it didn't work because there was no simple way to align the label with the input.InputElementslot that wraps the input and sets the root to a grid layout. This solved all alignment issues.alignSelf: centerto vertically center to input height, input elements usejustifySelf: endfor right alignment (useful for switches), and helper/error text flows naturally in the second column based on HTML order.