feat(apollo-wind): add InputGroup component#890
Conversation
Ports shadcn's InputGroup primitive (Input/Addon/Button/Text/Textarea) restyled to match apollo-wind's real Input box chrome across variant, size, and the future theme, so a plain InputGroup renders identically to a plain Input. Enables icon/button add-ons on a real input field, including popover-triggered selection, without the styling drift seen in DatePicker's Button-as-field pattern. Slots Input Group into the Core sidebar between Input and Label.
Search hand-rolled the same icon+input+popover pattern InputGroup now provides, via absolute-positioned icon/clear-button overlays and manual pl-8/pr-8 padding on Input. Rebuilds it on InputGroup's addon slots instead, so there's one consistent way to compose icon/button affordances into a field. Public API and behavior are unchanged; all existing Search/SearchWithSuggestions tests pass without modification.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Adds a new InputGroup family of components to apollo-wind to support icon/button/text add-ons on real inputs (including popover-triggered affordances), and refactors existing Search to use the new pattern for consistent input+icon composition across the design system.
Changes:
- Introduces
InputGroupprimitives (InputGroupAddon,InputGroupButton,InputGroupText,InputGroupInput,InputGroupTextarea) and exports them fromapollo-wind. - Refactors
Search(and its internal structure used bySearchWithSuggestions) to build onInputGroupinstead of absolute positioning. - Updates Storybook ordering and adds stories demonstrating common InputGroup use cases (leading icon, clear button, locked field popover).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-wind/src/index.ts | Exports InputGroup components/types from the package entrypoint. |
| packages/apollo-wind/src/components/ui/search.tsx | Refactors Search to use InputGroup add-ons/buttons. |
| packages/apollo-wind/src/components/ui/input-group.tsx | Adds new InputGroup component family and styling/interaction behavior. |
| packages/apollo-wind/src/components/ui/input-group.stories.tsx | Adds Storybook stories showcasing key InputGroup patterns (icons, clear, popover lock). |
| packages/apollo-wind/src/components/ui/index.ts | Re-exports input-group from the UI barrel. |
| apps/storybook/.storybook/preview.tsx | Inserts “Input Group” into the Core sidebar ordering. |
Comments suppressed due to low confidence (1)
packages/apollo-wind/src/components/ui/search.tsx:24
SearchPropspreviously inheritedvariant/sizefromInputProps, but now inherits fromInputGroupInputProps(which omitsvariant/size). This is a public API regression and also risksvariant/sizebeing forwarded to the inner<Input>at runtime (JS consumers) where they can conflict with the InputGroup chrome overrides. Consider re-addingvariant/sizetoSearchPropsand applying them to theInputGroupwrapper (and destructuring them out so they don't reachInputGroupInput).
export interface SearchProps extends Omit<InputGroupInputProps, 'onChange'> {
value?: string;
onChange?: (value: string) => void;
onClear?: () => void;
showClearButton?: boolean;
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
- InputGroupAddon: compose the built-in focus-forwarding onClick with any consumer-provided onClick instead of letting the spread silently override it. - Search: restore variant/size support lost when SearchProps switched from InputProps to InputGroupInputProps, applying them to the outer InputGroup instead of the inner input. - Add input-group.test.tsx (render, a11y, variant/size on the wrapper, focus-forwarding, disabled state) matching sibling component coverage.
Summary
InputGroup(InputGroupAddon,InputGroupButton,InputGroupText,InputGroupInput,InputGroupTextarea) to apollo-wind, ported from shadcn and restyled to matchInput's real box chrome across variant/size/future-theme, so it's pixel-identical to a plainInputwhen no addons are used.LockedFieldWithPopoverstory.Search/SearchWithSuggestionsto build onInputGroupinstead of hand-rolled absolute positioning, so there's one consistent pattern for icon+input in the design system. Public API and behavior unchanged.Input GroupunderInput/ aboveLabelin the Core sidebar.Context
Requested for a canvas Property Panel HITL field-locking affordance.
field-renderer.tsxwiring for the Property Panel is intentionally a separate follow-up, not included here.Test plan
pnpm exec tsc --noEmit— cleanpnpm biome check— clean (aside from one pre-existing, unrelated formatting issue insrc/index.tspresent onmain)pnpm vitest run— 971/971 tests pass, including all existingSearchtests unmodifiedpnpm build— builds cleanlyInput Groupvariants render correctly, lock icon opens popover with working selection list, focus ring renders correctly (fixed a ring-offset bug caught during review),Search/SearchWithSuggestionsstill work end-to-end (typing, clearing, suggestion filtering/selection)