cadence-ui/docs/exec-plans/2026-03-25-input-group-affixes.md

Input Group Affixes

• Status: completed
• Owner: codex
• Date: 2026-03-25

Goal

Add a reusable input-affix composition layer so search icons, badges, and suffix actions stop being page-level absolute-position wrappers and instead ship as a stable Cadence UI pattern.

Scope

• In scope:
  • add a public InputGroup companion pattern with prefix and suffix slots
  • keep the existing Input API intact while letting it compose cleanly inside the new group
  • update at least one real docs surface that currently hand-rolls affix layout
  • add Storybook coverage and unit tests for the new slot and field wiring behavior
• Out of scope:
  • redesigning Field or introducing a second label/help-text abstraction
  • broad visual restyling of all text-entry surfaces
  • migrating every existing search field in one pass

Constraints

• Preserve the existing Input ref and prop contract for non-grouped usage.
• Follow the current Field state inheritance rules for disabled, invalid, readonly, and required behavior.
• Expose stable data-slot hooks for the new affix anatomy.
• Keep the new pattern token-driven and visually aligned with the current input chrome.

Affected Surfaces

• docs/exec-plans/2026-03-25-input-group-affixes.md
• packages/ui/src/lib/contracts.ts
• packages/ui/src/components/input.tsx
• packages/ui/src/components/input-group.tsx
• packages/ui/src/components/input-group.variants.ts
• packages/ui/src/components/input-group.test.tsx
• packages/ui/src/components/data-table.tsx
• packages/ui/src/components/command.tsx
• packages/ui/src/components/command.test.tsx
• packages/ui/src/index.ts
• apps/docs/src/components/input-group.stories.tsx
• apps/docs/src/revenue-dashboard.stories.tsx
• registry/index.json

Plan

1. Add the execution plan and define the new input-affix pattern against the existing Input/Field contract.
2. Implement InputGroup plus grouped-input behavior without regressing standalone Input.
3. Migrate the most obvious repeated search wrapper surfaces to the new composition layer.
4. Add stories, tests, and registry updates, then run the narrowest useful validation passes.

Validation

• pnpm --filter @ai-ui/ui test -- --run packages/ui/src/components/input-group.test.tsx packages/ui/src/components/input.test.tsx packages/ui/src/components/command.test.tsx
• pnpm --filter @ai-ui/ui typecheck
• pnpm harness:validate:docs
• pnpm registry:build

Orchestration Task Sketch

• T1: implement the input group component and integrate standalone input behavior
• T2 -> T1: migrate docs usage and command/data-table composition to the new slots
• T3 -> T1: add tests, stories, and registry updates

Status Log

• 2026-03-25 14:29 Read the system-of-record files and confirmed the current Input contract has no affix composition layer.
• 2026-03-25 14:35 Chose a sibling InputGroup pattern over mutating Input into a wrapped root so the existing input API stays stable outside grouped usage.
• 2026-03-25 15:17 Implemented InputGroup, grouped input behavior, and the first consumer migrations in CommandInput, DataTableSearch, and the revenue dashboard story.
• 2026-03-25 15:24 Verified pnpm --filter @ai-ui/ui test -- --run packages/ui/src/components/input-group.test.tsx packages/ui/src/components/input.test.tsx packages/ui/src/components/command.test.tsx packages/ui/src/components/data-table.test.tsx, pnpm --filter @ai-ui/ui typecheck, pnpm harness:validate:docs, and pnpm registry:build.