feat(ui): add input group - #9654
Conversation
🦋 Changeset detectedLatest commit: 46e7b53 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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.
|
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueComment |
a521f67 to
0297a34
Compare
0297a34 to
86e6b32
Compare
86e6b32 to
7d4f1ba
Compare
7d4f1ba to
46e7b53
Compare
| ref, | ||
| forwardedRef, | ||
| ) { | ||
| const inputGroup = useOptionalInputGroupContext(); |
There was a problem hiding this comment.
can we just use presence of this to determine if it should be the headless variant?
| const setInput = React.useCallback((node: HTMLInputElement | null) => { | ||
| inputRef.current = node; | ||
| }, []); |
There was a problem hiding this comment.
idc too much about semantics, but since this is just a standard callback ref, would be cool with it just being like inputRef or something. the set makes me feel like it's holding it in state somewhere
| const setInputRef = React.useCallback( | ||
| (node: HTMLInputElement | null) => { | ||
| setGroupInput?.(node); | ||
| if (typeof forwardedRef === 'function') { | ||
| forwardedRef(node); | ||
| } else if (forwardedRef) { | ||
| forwardedRef.current = node; | ||
| } | ||
| }, | ||
| [forwardedRef, setGroupInput], | ||
| ); |
There was a problem hiding this comment.
do we have a combine refs util? feels like it'd be worth adding one if we don't already so we can just do:
ref: combineRefs(forwardedRef, inputGroup?.inputRef),
| onPointerDown: (event: React.PointerEvent<HTMLSpanElement>) => { | ||
| onPointerDown?.(event); | ||
| if (!event.defaultPrevented) { | ||
| event.preventDefault(); | ||
| group.focusInput(); | ||
| } | ||
| }, |
There was a problem hiding this comment.
wdyt about just making this pointer-events: none and adding an onclick to the group that focuses the input?
| }, | ||
| text: { | ||
| alignItems: 'center', | ||
| color: colorVars['--cl-color-neutral-faded'], |
There was a problem hiding this comment.
almost like the color of this more in the disabled state 🤔 . This almost feels too emphasized, or at least a little off with the placeholders in dark mode.
There was a problem hiding this comment.
maybe we just match the color of the placeholder for this?
| ); | ||
| }); | ||
|
|
||
| export const InputGroup = { Root, Text, Action }; |
There was a problem hiding this comment.
wdyt about adding like an addon container to this like shadcn?
https://ui.shadcn.com/docs/components/base/input-group#button
2 participants
Description
https://swingset-git-austin-input-group.clerkstage.dev/components/input-group
Adds Mosaic
InputGroupfor composing text and controls inside shared field chrome. It coordinates sizing, field state, and focus behavior with a headlessInput.