feat(apollo-wind): add ReferenceChip for variables, resources and connections by dbacomputer · Pull Request #1398 · UiPath/apollo-ui

dbacomputer · 2026-10-16T21:58:36Z

Why

A product connection field (Maestro, Microsoft Outlook 365 connection) rendered its selected value as light text on a bright cyan fill, which fails contrast. Apollo already had the right colors, used by PromptEditor's variable pills, but no shared component or guidance, so each surface hand-built its own chip.

What

New: ReferenceChip (apollo-wind)

One primitive for selected variables, resources and connections: icon, label, optional remove button, readOnly, disabled, invalid, selected.
Colors come from existing tokens only, always as a pair from one family:
- valid: --color-info-background / --color-info-text / --color-info-icon
- invalid: --color-error-background / --color-error-text / --color-error-icon
getReferenceChipColors() is exported for hosts that cannot render the component (HTML strings, Emotion).

Adopted in

PromptEditor TokenPill and markdown preview (no API change for consumers)
VariableValueControl trigger (bound variable now shows as a chip)
ap-chat resource chip (shared colors, adds icon color)
Flow Send Email example (connection and body variable)
DAP Gmail connection picker example

Docs

Reference Chip stories: Usage guidance (Do/Don't), Themes (all six themes side by side), States, Connection
Token usage notes on the Future colors page; README section

Guardrails

Unit tests assert the info/error pairing and that no chip color resolves to a primary or accent token.

Not in scope

No new tokens. Classic dark keeps its existing info background (#000000); text contrast stays about 7.8:1.
Product repos (Maestro / Integration Service) still need to adopt ReferenceChip.

Testing

apollo-wind: 146 files, 2869 tests pass; ap-chat tests pass; Biome and tsc clean
Checked in Storybook: Reference Chip Themes and Usage guidance (no a11y violations), VariableValueControl, DAP connection picker

🤖 Generated with Claude Code

…nections Add a shared ReferenceChip primitive that pairs the existing info tokens (background, text, icon) for valid references and the error tokens for invalid ones. PromptEditor's TokenPill and markdown preview now render through it, and VariableValueControl shows its bound variable as a chip. Docs: usage guidance with do/don't examples, an all-themes story, README section, and token usage notes on the Future colors page. Tests lock the token pairing so chips cannot drift to primary fills. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions · 2026-10-16T22:01:14Z

Dependency License Review

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

License distribution

License	Packages
MIT	1713
ISC	91
Apache-2.0	56
BSD-3-Clause	28
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.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

🟢 Approval recommended

The focused component extraction and integrations have supporting tests and no identified blocking issues.

No open issues 🎉

What changed in this PR

Adds a shared ReferenceChip primitive to Apollo Wind, standardizing selected variables, resources, and connections with paired semantic colors.

Changes:

Adds the chip component, shared palette helper, and public exports.
Adopts shared styling in editors, variable controls, chat, and connection examples.
Adds interaction and palette tests, theme stories, and usage guidance.

File	Description
packages/apollo-wind/src/index.ts	Exports the chip and palette helper; reorders existing exports.
packages/apollo-wind/src/foundation/Future/colors.stories.tsx	Documents reference-chip token pairing.
packages/apollo-wind/src/components/ui/variable-value-control.tsx	Displays bound variables as chips.
packages/apollo-wind/src/components/ui/reference-chip.tsx	Implements the shared chip primitive.
packages/apollo-wind/src/components/ui/reference-chip.test.tsx	Tests removal, states, accessibility, and palettes.
packages/apollo-wind/src/components/ui/reference-chip.stories.tsx	Demonstrates states, themes, and usage guidance.
packages/apollo-wind/src/components/ui/reference-chip-colors.ts	Centralizes valid and invalid palettes.
packages/apollo-wind/src/components/ui/prompt-editor/types.ts	Delegates existing token colors to the shared helper.
packages/apollo-wind/src/components/ui/prompt-editor/components/TokenPill.tsx	Uses ReferenceChip for editor tokens.
packages/apollo-wind/src/components/ui/prompt-editor/components/MarkdownPreview.tsx	Uses shared colors in preview markup.
packages/apollo-wind/src/components/ui/index.ts	Exposes chip APIs through the UI barrel.
packages/apollo-wind/src/components/ui/code-editors.stories.tsx	Updates documentation copy to mention ReferenceChip.
packages/apollo-wind/README.md	Adds API usage and integration guidance.
packages/apollo-react/src/material/components/ap-chat/components/input/tiptap/resource-chip-node-view.tsx	Reuses the palette and adds semantic icon color.
packages/apollo-react/src/canvas/stories/templates/Flow.stories.tsx	Adopts chips in the Send Email example.
apps/storybook/src/patterns/DapLayoutsPage.tsx	Adopts the chip in the Gmail connection picker.

_{Review effort: Balanced}

github-actions · 2026-10-16T22:21:23Z

Storybook visual diff

⚠️ Visual changes detected: 10 changed, 10 added (of 370 compared, 350 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 16, 2026, 03:49:39 PM

github-actions · 2026-10-16T22:25:51Z

📊 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.3%	100.0% (1/1)	7.99 MB	31.45 MB	+117 B
`@uipath/apollo-ui-icons`	—	—	2.86 MB	6.97 MB	±0
`@uipath/apollo-vertex`	—	—	—	—	—
`@uipath/apollo-wind`	79.1%	100.0% (12/12)	787.5 KB	4.57 MB	+2.4 KB
`@uipath/ap-chat`	85.8%	—	40.37 MB	45.58 MB	−16 B

_{"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.}

The ap-chat resource chip now reads its background, text and icon colors from getReferenceChipColors, and the Flow Send Email example uses ReferenceChip for its connection and body variable. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Copilot

🟢 Approval recommended

Static review identified no blocking issues in the component or integrations; supplied tests were inspected but not executed.

No open issues 🎉

_{Review effort: Balanced}

Copilot AI balanced review requested due to automatic review settings October 16, 2026 21:58

github-actions Bot added the size:XL 500-999 changed lines. label Oct 16, 2026

Copilot started reviewing on behalf of dbacomputer October 16, 2026 21:59

View session

github-actions Bot temporarily deployed to preview/apollo-vertex October 16, 2026 21:59 Destroyed

github-actions Bot temporarily deployed to preview/apollo-design October 16, 2026 21:59 Destroyed

github-actions Bot temporarily deployed to preview/apollo-landing October 16, 2026 21:59 Destroyed

github-actions Bot added pkg:apollo-react app:storybook pkg:apollo-wind labels Oct 16, 2026

github-actions Bot temporarily deployed to preview/apollo-docs October 16, 2026 21:59 Destroyed

Copilot AI reviewed Oct 16, 2026

View reviewed changes

dbacomputer requested a review from CalinaCristian October 16, 2026 22:11

dbacomputer and others added 2 commits October 16, 2026 15:29

docs(storybook): use ReferenceChip in the Gmail connection picker

54c827f

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dbacomputer force-pushed the feat/reference-chip branch from 4a68289 to 54c827f Compare October 16, 2026 22:29

Copilot AI balanced review requested due to automatic review settings October 16, 2026 22:29

github-actions Bot deployed to preview/apollo-landing October 16, 2026 22:29

View deployment

github-actions Bot deployed to preview/apollo-docs October 16, 2026 22:29

View deployment

github-actions Bot deployed to preview/apollo-design October 16, 2026 22:29

View deployment

github-actions Bot deployed to preview/apollo-vertex October 16, 2026 22:29

View deployment

Copilot started reviewing on behalf of dbacomputer October 16, 2026 22:29

View session

Copilot AI reviewed Oct 16, 2026

View reviewed changes

Navigation Menu

Repository navigation

feat(apollo-wind): add ReferenceChip for variables, resources and connections - #1398

feat(apollo-wind): add ReferenceChip for variables, resources and connections#1398
dbacomputer wants to merge 3 commits into
mainfrom
feat/reference-chip

dbacomputer commented Oct 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented Oct 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 16, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

dbacomputer commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

What

Not in scope

Testing

Uh oh!

github-actions Bot commented Oct 16, 2026

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

github-actions Bot commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Storybook visual diff

Uh oh!

github-actions Bot commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Coverage + size by package

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dbacomputer commented Oct 16, 2026 •

edited

Loading

github-actions Bot commented Oct 16, 2026 •

edited

Loading

github-actions Bot commented Oct 16, 2026 •

edited

Loading