feat(apollo-react)!: canvas wind integration [MST-8290]

[BenGSchulz]

Summary

Migrate the canvas package (apollo-react/canvas) from Material UI components to apollo-wind (Tailwind CSS + shadcn/Radix) primitives, eliminating the MUI runtime dependency from canvas components.

What changed

Icon system — All ApIcon (Material Icons) usages replaced with CanvasIcon (Lucide icons via the canvas icon registry). NodeIcon renamed to CanvasIcon with a deprecated alias for backwards compatibility.

Typography — ApTypography with FontVariantToken replaced with plain <span> elements using Tailwind utility classes (text-sm, font-bold, truncate, etc.).

Buttons — ApButton and ApIconButton replaced with Button from @uipath/apollo-wind using appropriate variant/size props.

Tooltips — ApTooltip replaced with a new CanvasTooltip wrapper component around Radix Tooltip from apollo-wind. Preserves the existing API surface (smartTooltip, delay, placement, hide, isOpen). A TooltipProvider is now injected at the CanvasProviders level.

Dropdown menus — ApMenu replaced with a new CanvasDropdownMenu wrapper around Radix DropdownMenu. This significantly simplifies NodeContextMenu and TaskMenu — manual keyboard/click-away handling removed in favor of Radix's built-in behavior. Uses modal={false} to work correctly inside React Flow's foreignObject.

Other component swaps:

MUI Component	apollo-wind Replacement
ApSkeleton	Skeleton
ApCircularProgress / ApProgressSpinner	Spinner
ApBadge	Badge
ApLink	Button variant="link"
CssBaseline / GlobalStyles	Removed (no longer needed)

MUI breakpoint removal — useTheme().breakpoints.values.sm replaced with a new CANVAS_COMPACT_BREAKPOINT constant (600px), removing the last useTheme() call from canvas code.

Tailwind build integration

• New tailwind.canvas.css entry point pre-compiles only the Tailwind utilities used by canvas components and their apollo-wind dependencies. Auto-imported via canvas/index.ts so consumers need no Tailwind setup.
• New build:css:canvas script uses @tailwindcss/cli to emit dist/canvas/styles/tailwind.canvas.css as part of the package build.
• Storybook configured with @tailwindcss/vite plugin and source-directory aliases for apollo-wind HMR during development.

apollo-wind enhancements

• Badge: Added error, warning, info, success semantic variants with corresponding theme tokens.
• Tooltip: Exported TooltipPortal for portal-based rendering.
• Skeleton / DropdownMenuSeparator: Changed background from bg-muted to bg-surface-overlay for better theme consistency.
• tailwind.consumer.css: Added --error-background, --info-background, --success-background, --warning-background CSS custom properties.

Test updates

• Assertions updated to match new component patterns (e.g., skeleton-icon test ID, .animate-pulse class, role="status" for spinners, .lucide-chevron-right selector).
• Removed tests for "prevents task click when menu is open" — Radix dropdown menus handle focus trapping and outside-click dismissal natively.

[github-actions]

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

Project	Deployment	Review	Updated (PT)
apollo-canvas	🟢 Ready	Preview, Logs	Apr 10, 2026, 11:25:20 AM
apollo-landing	🟢 Ready	Preview, Logs	Apr 10, 2026, 11:22:51 AM
apollo-ui-react	🟢 Ready	Preview, Logs	Apr 10, 2026, 11:24:01 AM
apollo-vertex	🟢 Ready	Preview, Logs	Apr 10, 2026, 11:23:49 AM
apollo-wind	🟢 Ready	Preview, Logs	Apr 10, 2026, 11:23:21 AM

[github-actions]

Dependency License Review

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

License distribution

License	Packages
MIT	1708
ISC	89
Apache-2.0	61
BSD-3-Clause	28
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	5
MIT OR Apache-2.0	3
MIT-0	3
CC0-1.0	3
LGPL-3.0-or-later	2
Unknown	2
(MIT OR Apache-2.0)	2
Unlicense	2
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	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
@img/sharp-libvips-linuxmusl-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
@uipath/proteus-client	0.1.10	Unknown	UiPath internal package, Proprietary license
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[Copilot]

Pull request overview

Migrates @uipath/apollo-react’s canvas package away from Material UI primitives to apollo-wind (Tailwind + shadcn/Radix), aiming to remove the MUI runtime dependency while keeping the existing Canvas API surface largely intact.

Changes:

• Replaces MUI-based UI primitives (icons, typography, buttons, tooltips, menus, skeleton/spinner/badge) with apollo-wind equivalents and new Canvas wrappers (CanvasTooltip, CanvasDropdownMenu).
• Adds Tailwind build + Storybook integration to support canvas Tailwind utilities and apollo-wind styling.
• Updates tests and mocks to reflect Radix/shadcn behaviors and new DOM output.

Reviewed changes

Copilot reviewed 60 out of 61 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updates lockfile for Tailwind tooling and related dependency graph changes.
packages/apollo-wind/src/styles/tailwind.consumer.css	Adds semantic background variables and adjusts canvas token bridging.
packages/apollo-wind/src/components/ui/tooltip.tsx	Exports TooltipPortal for portal-based tooltip rendering.
packages/apollo-wind/src/components/ui/skeleton.tsx	Adjusts skeleton background token.
packages/apollo-wind/src/components/ui/dropdown-menu.tsx	Adjusts separator background token.
packages/apollo-wind/src/components/ui/badge.tsx	Adds semantic badge variants (error/warning/info/success).
packages/apollo-react/src/test/canvas-mocks.ts	Adds Radix tooltip mocks for canvas tests.
packages/apollo-react/src/canvas/utils/icon-registry.tsx	Renames NodeIcon to CanvasIcon and adds deprecated alias.
packages/apollo-react/src/canvas/utils/adornment-resolver.tsx	Swaps MUI icons/tooltips to CanvasIcon/CanvasTooltip.
packages/apollo-react/src/canvas/styles/tailwind.canvas.css	Introduces a Tailwind “input” entrypoint for canvas utility compilation.
packages/apollo-react/src/canvas/storybook-utils/decorators.tsx	Wraps stories with apollo-wind TooltipProvider.
packages/apollo-react/src/canvas/storybook-utils/components/StoryInfoPanel.tsx	Migrates panel UI to apollo-wind Button + Tailwind typography.
packages/apollo-react/src/canvas/index.ts	Auto-imports the new canvas Tailwind entrypoint alongside variables.
packages/apollo-react/src/canvas/controls/Breadcrumb/Breadcrumb.tsx	Migrates typography/tooltips to Tailwind + CanvasTooltip.
packages/apollo-react/src/canvas/constants.ts	Adds CANVAS_COMPACT_BREAKPOINT constant.
packages/apollo-react/src/canvas/components/TriggerNode/TriggerNode.tsx	Migrates tooltip + icon usage to canvas wind stack.
packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx	Replaces MUI icons with CanvasIcon.
packages/apollo-react/src/canvas/components/Toolbox/ListView.tsx	Migrates list view to Tailwind typography, Skeleton, CanvasTooltip, CanvasIcon.
packages/apollo-react/src/canvas/components/Toolbox/ListView.test.tsx	Updates assertions to match Tailwind/shadcn output.
packages/apollo-react/src/canvas/components/Toolbox/Header.tsx	Replaces MUI header controls with apollo-wind Button + Tailwind text.
packages/apollo-react/src/canvas/components/Toolbar/shared/ToolbarButton.tsx	Replaces MUI tooltip/icon with CanvasTooltip/CanvasIcon.
packages/apollo-react/src/canvas/components/Toolbar/shared/toolbar.types.ts	Updates icon prop doc to match icon registry semantics.
packages/apollo-react/src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx	Migrates overflow button/icon to CanvasTooltip/CanvasIcon.
packages/apollo-react/src/canvas/components/StickyNoteNode/StickyNoteNode.tsx	Migrates toolbar icons from NodeIcon to CanvasIcon.
packages/apollo-react/src/canvas/components/StickyNoteNode/FormattingToolbar.tsx	Migrates tooltips/icons to CanvasTooltip/CanvasIcon.
packages/apollo-react/src/canvas/components/StageNode/TaskMenu.tsx	Replaces MUI menu with CanvasDropdownMenu wrapper.
packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx	Migrates badge/spinner/buttons/typography to apollo-wind + Tailwind.
packages/apollo-react/src/canvas/components/StageNode/StageNode.tsx	Broad migration away from MUI to wind primitives and CanvasTooltip.
packages/apollo-react/src/canvas/components/StageNode/DraggableTask.tsx	Migrates entry-condition tooltip to CanvasTooltip; removes menu-open click guard.
packages/apollo-react/src/canvas/components/StageNode/DraggableTask.test.tsx	Removes menu-open click guard test; keeps other interactions.
packages/apollo-react/src/canvas/components/StageNode/AdhocTask.tsx	Removes menu-open click guard and related plumbing.
packages/apollo-react/src/canvas/components/StageNode/AdhocTask.test.tsx	Updates spinner assertions and removes menu-open click guard test.
packages/apollo-react/src/canvas/components/shared/CanvasDropdownMenu.tsx	New Radix dropdown wrapper used across canvas menus.
packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.tsx	Migrates pin/unpin button to apollo-wind Button + CanvasIcon.
packages/apollo-react/src/canvas/components/NodeInspector.tsx	Migrates typography to Tailwind spans.
packages/apollo-react/src/canvas/components/NodeContextMenu/NodeContextMenu.tsx	Replaces MUI menu with CanvasDropdownMenu and simplifies close logic.
packages/apollo-react/src/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.tsx	Migrates control panel buttons/typography to wind + CanvasIcon.
packages/apollo-react/src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx	Migrates spinner + breadcrumb icons to wind + CanvasIcon.
packages/apollo-react/src/canvas/components/GroupNode/GroupNode.tsx	Migrates icons to CanvasIcon.
packages/apollo-react/src/canvas/components/FloatingCanvasPanel/PanelChrome.tsx	Migrates header typography + close button to Tailwind + wind Button.
packages/apollo-react/src/canvas/components/ExecutionStatusIcon/ExecutionStatusIcon.tsx	Replaces MUI icons/spinner with CanvasIcon + wind Spinner.
packages/apollo-react/src/canvas/components/CodedAgent/CodedAgentFlow.tsx	Migrates icons/spinner/typography to CanvasIcon + wind Spinner + Tailwind text.
packages/apollo-react/src/canvas/components/CanvasTooltip.tsx	Adds CanvasTooltip wrapper over Radix Tooltip to preserve prior tooltip API.
packages/apollo-react/src/canvas/components/CanvasPositionControls.tsx	Migrates controls to wind Button + CanvasTooltip + CanvasIcon.
packages/apollo-react/src/canvas/components/ButtonHandle/SmartHandle.tsx	Migrates add icon and label typography to CanvasIcon + Tailwind spans.
packages/apollo-react/src/canvas/components/ButtonHandle/ButtonHandle.tsx	Migrates tooltip/icon/typography to CanvasTooltip + CanvasIcon + Tailwind spans.
packages/apollo-react/src/canvas/components/BlankCanvasNode/BlankCanvasNode.tsx	Migrates add icon to CanvasIcon.
packages/apollo-react/src/canvas/components/BaseNode/NodeLabel.tsx	Switches tooltip implementation to CanvasTooltip.
packages/apollo-react/src/canvas/components/BaseNode/BaseNode.tsx	Migrates error icon and loading skeleton semantics for wind stack.
packages/apollo-react/src/canvas/components/BaseNode/BaseNode.test.tsx	Updates skeleton test id and mocks wind Skeleton.
packages/apollo-react/src/canvas/components/BaseNode/BaseNode.styles.ts	Switches skeleton base component to wind Skeleton.
packages/apollo-react/src/canvas/components/BaseCanvas/CanvasProviders.tsx	Injects Radix TooltipProvider and provider marker at canvas root.
packages/apollo-react/src/canvas/components/AgentCanvas/nodes/ResourceNode.tsx	Migrates resource icons/adornments to CanvasIcon.
packages/apollo-react/src/canvas/components/AgentCanvas/nodes/AgentNode.tsx	Migrates add-instructions icon to CanvasIcon.
packages/apollo-react/src/canvas/components/AgentCanvas/components/TimelinePlayer.tsx	Migrates controls to wind Button + Tailwind text.
packages/apollo-react/src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx	Removes MUI breakpoint dependency and migrates buttons/icons to wind + CanvasIcon.
packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePreview.tsx	Migrates preview icon to CanvasIcon.
packages/apollo-react/package.json	Adds canvas CSS build step and Tailwind CLI devDependency.
apps/storybook/package.json	Adds Tailwind + Tailwind Vite plugin deps for canvas Storybook.
apps/storybook/.storybook/preview.tsx	Removes MUI baseline/global styles and apollo-wind styles import for canvas-only Storybook.
apps/storybook/.storybook/main.ts	Adds Tailwind Vite plugin and aliases apollo-wind to source for HMR.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

packages/apollo-react/src/canvas/utils/icon-registry.tsx:122

• The PR description mentions a deprecated alias for backwards compatibility, but only the NodeIcon value is aliased. The exported NodeIconProps type was renamed to CanvasIconProps, which can break TS consumers importing NodeIconProps. Consider re-exporting NodeIconProps as a deprecated alias of CanvasIconProps to keep the compatibility story consistent.

[Copilot]

Pull request overview

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

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[Copilot]

Pull request overview

Copilot reviewed 64 out of 65 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[github-actions]

📦 Dev Packages

Package	Status	Updated (PT)
@uipath/apollo-react@3.70.3-pr482.0415bcf	🟢 Published	Apr 10, 2026, 11:25:25 AM

[Copilot]

Pull request overview

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

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported