feat(apollo-wind): give read-only Input a distinct visual state

[andreea-ene]

A read-only Input looked the same as an editable one: the only difference was the cursor on hover. Sighted users had no way to tell a field was read-only until they tried to type. This gives it its own visual state.

Context: Slack thread

What's different

Design decisions

A muted fill instead of a border. Read-only sits on bg-muted in Light and Dark, and on surface-raised in the Future themes, one step below the page and quieter than the editable surface-overlay fill. The value keeps full contrast and the field keeps the standard focus ring, because it is information the user is meant to read and it stays reachable by keyboard. That is what separates read-only from disabled, which dims the text and is skipped by Tab. Invalid read-only inputs keep the error border (Light, Dark) and error ring (Future). Ghost inputs already fill with surface-overlay, which muted aliases in Light, so a read-only ghost steps down to surface-raised in every theme instead.

Keyed off the readOnly prop, not :read-only. The :read-only pseudo-class also matches file, color and range inputs, which do not take readonly at all.

Scoped to standalone inputs. The style does not apply when the input is effectively disabled, by its own disabled or by a disabled InputGroup around it (it keeps the disabled look), or when it is the control inside an InputGroup, where the group draws the box. QuickFormField's locked fields render through InputGroupInput, so they are unchanged.

Inline validation story. It set readOnly on an input whose error asks the user to enter a unique name, only to silence React's controlled-input warning. It now uses defaultValue, so the example stays editable.

Testing

• Unit tests cover the Light/Dark and Future fills, the error border and ring, the ghost variant's surface-raised fill, the standard focus ring, the disabled and InputGroup exclusions, and an axe check.
• Input, InputGroup and QuickFormField suites pass (280 tests), and the type check is clean.
• Checked visually in Light, Dark, Future Light and Future Dark, at rest and with an error.

🤖 Generated with Claude Code

[github-actions]

Apollo Coded App preview deployments finished with failures.

Project	Status	Preview	Updated (PT)
apollo-design	Ready	Preview · Logs	Oct 15, 2026, 09:04:03 AM
apollo-docs	Ready	Preview · Logs	Oct 15, 2026, 09:04:03 AM
apollo-landing	Failed	Logs	Oct 15, 2026, 09:04:03 AM
apollo-vertex	Ready	Preview · Logs	Oct 15, 2026, 09:04:03 AM

[Copilot]

🟡 Changes recommended

Inherited disabled state is not excluded from the new read-only styling.

1 open finding

• Exclude effectively disabled inputs from read-only border styling · New

What changed in this PR

Adds a distinct visual treatment for standalone read-only inputs.

Changes:

• Adds theme-aware read-only styling.
• Adds state, exclusion, and accessibility tests.
• Makes the inline-validation story editable.

File	Description
input.tsx	Applies read-only visual classes.
input.test.tsx	Tests read-only behavior and accessibility.
input.stories.tsx	Updates validation and read-only examples.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Dependency License Review

• ✅ 1957 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1721
ISC	91
Apache-2.0	57
BSD-3-Clause	28
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
CC0-1.0	4
MIT-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.3.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

[Copilot]

🟡 Changes recommended

Future-themed read-only inputs lose their error border when invalid.

1 open finding

• Preserve invalid border state in Future themes · New

1 resolved since last review

• Exclude effectively disabled inputs from read-only border styling

🧠 Review effort: Balanced

[github-actions]

📊 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	—	—	42.02 MB	50.17 MB	±0
@uipath/apollo-react	51.7%	—	8.01 MB	31.60 MB	±0
@uipath/apollo-ui-icons	—	—	2.86 MB	6.97 MB	±0
@uipath/apollo-vertex	—	—	—	—	—
@uipath/apollo-wind	79.1%	100.0% (1/1)	787.6 KB	4.57 MB	+110 B
@uipath/ap-chat	85.8%	—	40.37 MB	45.58 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.}

[Copilot]

🟢 Approval recommended

The implementation is narrowly scoped, consistent with existing class-merging behavior, and comprehensively tested.

1 open finding

• Preserve invalid border state in Future themes

🧠 Review effort: Balanced

[Copilot]

🟢 Approval recommended

The scoped styling is correctly prioritized and comprehensively tested across relevant states.

0 open findings

1 resolved since last review

• Preserve invalid border state in Future themes

🧠 Review effort: Balanced

[github-actions]

Storybook visual diff

⚠️ Visual changes detected: 11 changed, 2 added (of 528 compared, 515 unchanged). View report

Baseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs

Updated (PT): Oct 20, 2026, 02:55:55 AM

[Copilot]

🟢 Approval recommended

The implementation is correctly scoped, preserves existing state precedence, and includes comprehensive tests.

0 open findings

🧠 Review effort: Balanced

[Copilot]

🟢 Approval recommended

The focused styling change has regression coverage and no identified blocking issues.

No open issues 🎉

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

Light-theme ghost inputs still look identical when editable and read-only.

1 open issue

• Read-only ghost inputs remain visually indistinguishable in Light theme · New

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

The localized changes have focused test coverage and no unresolved findings; tests were not executed during this review.

No open issues 🎉

1 resolved since last review

• Read-only ghost inputs remain visually indistinguishable in Light theme

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

The focused styling change has targeted regression coverage and no unresolved blocking findings.

No open issues 🎉

_{Review effort: Balanced}