Skip to content

feat(apollo-wind): add InputGroup component#890

Merged
dbacomputer merged 3 commits into
mainfrom
add-input-group-for-hitl
Jul 7, 2026
Merged

feat(apollo-wind): add InputGroup component#890
dbacomputer merged 3 commits into
mainfrom
add-input-group-for-hitl

Conversation

@dbacomputer

@dbacomputer dbacomputer commented Jul 6, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds InputGroup (InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea) to apollo-wind, ported from shadcn and restyled to match Input's real box chrome across variant/size/future-theme, so it's pixel-identical to a plain Input when no addons are used.
  • Enables icon/button add-ons on a real input, including popover-triggered selection (the original ask: a lock icon on the left of a field that opens a popover for selection) — see the LockedFieldWithPopover story.
  • Refactors Search/SearchWithSuggestions to build on InputGroup instead of hand-rolled absolute positioning, so there's one consistent pattern for icon+input in the design system. Public API and behavior unchanged.
  • Orders Input Group under Input / above Label in the Core sidebar.

Context

Requested for a canvas Property Panel HITL field-locking affordance. field-renderer.tsx wiring for the Property Panel is intentionally a separate follow-up, not included here.

Test plan

  • pnpm exec tsc --noEmit — clean
  • pnpm biome check — clean (aside from one pre-existing, unrelated formatting issue in src/index.ts present on main)
  • pnpm vitest run — 971/971 tests pass, including all existing Search tests unmodified
  • pnpm build — builds cleanly
  • Manually verified in Storybook: Input Group variants render correctly, lock icon opens popover with working selection list, focus ring renders correctly (fixed a ring-offset bug caught during review), Search/SearchWithSuggestions still work end-to-end (typing, clearing, suggestion filtering/selection)
Screenshot 2026-07-06 at 1 21 27 PM

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.
Copilot AI review requested due to automatic review settings July 6, 2026 19:43
@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (PT)
apollo-design 🟢 Ready Preview, Logs Jul 06, 2026, 01:01:44 PM
apollo-docs 🟢 Ready Preview, Logs Jul 06, 2026, 01:01:44 PM
apollo-landing 🟢 Ready Preview, Logs Jul 06, 2026, 01:01:44 PM
apollo-vertex 🟢 Ready Preview, Logs Jul 06, 2026, 01:01:44 PM

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Dependency License Review

  • 1945 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1715
ISC 89
Apache-2.0 55
BSD-3-Clause 27
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@dbacomputer dbacomputer marked this pull request as ready for review July 6, 2026 19:44

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 InputGroup primitives (InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea) and exports them from apollo-wind.
  • Refactors Search (and its internal structure used by SearchWithSuggestions) to build on InputGroup instead 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

  • SearchProps previously inherited variant/size from InputProps, but now inherits from InputGroupInputProps (which omits variant/size). This is a public API regression and also risks variant/size being forwarded to the inner <Input> at runtime (JS consumers) where they can conflict with the InputGroup chrome overrides. Consider re-adding variant/size to SearchProps and applying them to the InputGroup wrapper (and destructuring them out so they don't reach InputGroupInput).
export interface SearchProps extends Omit<InputGroupInputProps, 'onChange'> {
  value?: string;
  onChange?: (value: string) => void;
  onClear?: () => void;
  showClearButton?: boolean;

Comment thread packages/apollo-wind/src/components/ui/input-group.tsx
Comment thread packages/apollo-wind/src/components/ui/input-group.tsx
@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package Coverage New-line coverage Packed (gzip) Unpacked vs main
@uipath/apollo-core 9.0% 43.82 MB 57.31 MB ±0
@uipath/apollo-react 34.5% 7.27 MB 27.60 MB +162 B
@uipath/apollo-wind 40.3% 100.0% (22/22) 395.0 KB 2.57 MB +2.4 KB
@uipath/ap-chat 85.8% 43.41 MB 55.85 MB ±0

"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.

- 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.
@github-actions github-actions Bot added size:XL 500-999 changed lines. and removed size:L 100-499 changed lines. labels Jul 6, 2026
@dbacomputer dbacomputer merged commit 1275c0a into main Jul 7, 2026
44 checks passed
@dbacomputer dbacomputer deleted the add-input-group-for-hitl branch July 7, 2026 14:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants