feat(apollo-react): densify the add-node panel and enrich toolbox rows

[BenGSchulz]

Summary

Visual layer of the add-node menu redesign (MST-11860): denser rows plus optional per-row content for the canvas Toolbox / ListView. Everything new is additive — existing consumers get only the density/geometry change; the new fields render nothing unless set. (The menu structure itself is built in the companion flow-workbench PR.)

• Denser rows: 32px single-line (44px with an inline second line), 20x20 icon glyphs in 24x24 tiles (was 24px in 32x32), 16px chevrons. TOOLBOX_HEIGHT 440 → 410 so the root menu cuts the last row to hint at scrolling. Icon tiles default to transparent (items keep explicit color / colorDark).
• New optional ListItem fields:
  • description — inline second line under the name
  • detail — extra text shown only in the row's hover tooltip
  • badge — uppercase tag at the trailing edge (e.g. TRIGGER / WAIT)
  • dividerBefore — thin separator above the row; suppressed at the list head and in flat search results
  • contentColor / trailingIcon — color the name + leading icon and add a trailing icon; together they form the "Create new …" affordance
• One tooltip per row: a single popover merges name + description + detail and appears only when it adds something the row can't show (a hidden detail, or a clipped name / description), revealing just those pieces. Centered above the row with a slight overlap; width capped via a merged content class. CanvasTooltip gains sideOffset, contentClassName, and disableHoverableContent (closes as the pointer leaves the row, so it never blocks neighbouring rows).
• Section headers: spaced uppercase labels, no bordered rule. Section + divider rows are presentation-only (no listbox option ARIA). Per-item row heights via getRenderItemHeight.
• Story: menu-structure demo (banded root, badges, In this solution / Published submenus, styled create rows) plus a "Tooltip scenarios" group covering each popover path.

Test plan

• ListView / CanvasTooltip unit tests: badges, dividers (emit + suppress), inline description vs tooltip-only detail, truncation-gated popover, contentColor / trailingIcon, section headers, getRenderItemHeight
• Full apollo-react suite green (1911 tests)
• tsc + Biome clean
• Visual verification in Storybook

Notes for reviewers

• Density (row heights, icon sizes, panel height) applies to all Toolbox consumers by design; the new per-row fields stay inert unless set.
• Companion PR UiPath/flow-workbench#2386 builds the menu tree and sets these fields; it renders once this ships and the dependency is bumped.

🤖 Generated with Claude Code

[github-actions]

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

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

[github-actions]

Dependency License Review

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

License distribution

License	Packages
MIT	1718
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

[Copilot]

Pull request overview

This PR updates the canvas add-node panel’s Toolbox/ListView presentation to match the new dense menu design, introducing optional per-item UI affordances (badges, meta line, and dividers) while keeping the underlying data shape backward-compatible for existing consumers.

Changes:

• Densifies ListView rows (smaller icon tile/glyph sizes, smaller chevrons) and moves description to a delayed hover tooltip on the whole row.
• Adds optional ListItem fields (meta, badge, dividerBefore) and implements a divider render item plus per-render-item row heights via a rowHeight function.
• Updates tests and Storybook to demonstrate/validate the new menu visuals and new fields.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/apollo-react/src/canvas/constants.ts	Adjusts toolbox height to align with the new dense menu’s “scroll hint” design.
packages/apollo-react/src/canvas/components/Toolbox/ListView.tsx	Implements new ListItem fields, divider render items, delayed-hover description tooltip, and variable row heights.
packages/apollo-react/src/canvas/components/Toolbox/ListView.test.tsx	Updates/extends unit tests for new rendering behavior (description no longer inline, meta/badge/dividers).
packages/apollo-react/src/canvas/components/Toolbox/ListView.styles.ts	Updates icon tile sizing to match the new density metrics.
packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.stories.tsx	Adds a Storybook scenario demonstrating the target menu structure (badges/meta/dividers).

[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	9.0%	—	43.82 MB	57.31 MB	±0
@uipath/apollo-react	34.5%	71.7% (33/46)	7.27 MB	27.61 MB	+2.8 KB
@uipath/apollo-wind	40.3%	—	395.0 KB	2.57 MB	+1 B
@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.}

[github-actions]

📦 Dev Packages

Package	Status	Updated (PT)
@uipath/apollo-react@4.58.0-pr891.f00bd0a	🟢 Published	Jul 08, 2026, 06:18:33 PM

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.