feat(apollo-react): add Toolbox quickActions slot#637
Merged
venkateshcherukuri merged 2 commits intomainfrom May 1, 2026
Merged
feat(apollo-react): add Toolbox quickActions slot#637venkateshcherukuri merged 2 commits intomainfrom
venkateshcherukuri merged 2 commits intomainfrom
Conversation
Adds an optional `quickActions` prop to Toolbox that renders a row of icon shortcuts inside the popover chrome with a leading group and an optional trailing group separated by a vertical divider. Lets canvas consumers absorb fast-access icon strips into the existing Toolbox padding rather than stacking them above the popover where they get clipped against canvas edges. Lowers AnimatedContainer/AnimatedContent min-height from 300 to 200 so the inner list can shrink when quickActions push other content. No behavior change for existing Toolbox consumers — flex:1 still gives them more than 200 of available space at the standard 440px height. Adds ConnectorHandleIcon (BPMN-style sequence-flow arrow) used by the PO.Frontend canvas-element picker for the trailing "Connect" action.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
CalinaCristian
approved these changes
May 1, 2026
Per reviewer feedback. Drops the styled-components wrappers (Container, Separator) in favor of static Tailwind class strings on plain divs, following the migrate-canvas-styled-to-tailwind skill's Pattern A. Inline style is used only for paddingInline/marginInline which are parameterized by the TOOLBOX_PADDING_X constant (Pattern D).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an optional
quickActionsprop toToolboxthat renders a row of icon shortcuts inside the popover chrome — a leading group plus an optional trailing group separated by a vertical divider. Canvas consumers can now absorb fast-access icon strips into the existing Toolbox padding rather than stacking them above the popover where they get clipped against canvas edges.Motivation: PO.Frontend's BPMN canvas-element picker (
HandleQuickAddPopover) currently renders an icon strip outside<Toolbox>via a separate<IconRowBorder>wrapper. When the picker opens near the top of the canvas, that extra row gets clipped by the canvas'soverflow: hidden. Pulling the row into Toolbox's chrome reduces total popover height by ~50 px and lets floating-ui's flip placement fit more often.Demo
What's in the diff
Toolbox.tsx— new optional propquickActions?: ToolboxQuickAction[]. When set, renders<QuickActionsRow>inside the existing<Column>above the title. No-op when omitted.QuickActionsRow.tsx— new component. Renders an apollo-wind ghost-Buttonper action wrapped inCanvasTooltip. Trailing actions render after a vertical separator; leading-only and trailing-only configurations are both supported.Toolbox.styles.ts—min-height: 300px → 200pxonAnimatedContainer+AnimatedContent. The 300 floor was never enforced for current consumers (Toolbox at 440 px height has 324 px available for the inner list — flex:1 already exceeds 300). 200 only matters whenquickActionsare added; existing consumers see no functional change.ConnectorHandleIcon.tsx— new BPMN-style sequence-flow arrow (dot + line + arrowhead, 36×24 viewBox). Used by the trailing "Connect" action in the BPMN picker.Toolbox.stories.tsx— newDefaultandWithQuickActionsstories so the slot is discoverable in the design system.QuickActionsRow.test.tsx— 10 tests covering leading-only, trailing-only, separator presence, click/hover wiring, disabled state.Backwards compatibility
quickActionsis optional — existing consumers (e.g.AddNodePanelin apollo-ui, multiple Toolbox usages in PO.Frontend) are unaffected.min-heightreduction is functionally a no-op for current consumers sinceflex: 1always provides ≥ 300 px at the standardTOOLBOX_HEIGHTof 440 px. 200 only kicks in when quickActions add ~56 px above the inner list.Test plan
pnpm testinpackages/apollo-react— 1452/1452 passingDefaultandWithQuickActionsvariants