Conversation
librowski
requested review from
lukasz-jazwa,
piotrblaszczyk and
szymon-t-sc
as code owners
September 7, 2026 12:05
librowski
marked this pull request as draft
September 7, 2026 12:07
librowski
force-pushed
the
ds2-canvas-ports
branch
from
September 7, 2026 12:09
9c61131 to
39a6b4b
Compare
librowski
force-pushed
the
ds2-canvas-ports
branch
from
September 9, 2026 16:49
39a6b4b to
b86fa08
Compare
librowski
marked this pull request as ready for review
September 14, 2026 06:41
xyflow's 5px minimum applies to the content box and expands the bordered port to 9px. Reset both minimums so 4px content plus 2px borders remains 8px.
React Flow captures the pointer on the dragged handle, so the node under the cursor never receives :hover and its ports stayed at the 8px default during a connection. The connectingto state now shares the connectingfrom rule, so the target shows the same 16px active port as the source.
…try check Review follow-up. The connecting-state rule now targets .connectingto.valid, so a port rejected by isValidConnection keeps its default size while the connection line reports invalid; the comment explains the real reason the target needs its own rule (xyflow assigns connectingto by proximity within connectionRadius, so :hover cannot express it). The built-CSS geometry check is removed: it matched every rule ending in .react-flow__handle and would have failed any future state rule on the bare handle, and its exact-string comparison against minified output was fragile. The pitfalls entry records the manual check instead.
librowski
force-pushed
the
ds2-canvas-ports
branch
from
September 14, 2026 19:53
7aa64ae to
a581878
Compare
piotrblaszczyk
approved these changes
Sep 15, 2026
librowski
removed this pull request from stack #125
September 15, 2026 10:24
librowski
added this pull request to stack #151
September 15, 2026 10:24
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.
Problem
The default port declares content 4px + border 2px per side with
box-sizing: content-box, intending an 8px outer size. The base stylesheet of@xyflow/react12.10.0 imposesmin-width: 5px; min-height: 5pxon handles; with content-box the minimum applies to the content, so the effective size was 9x9px. Hover (content 12px) was already correct at 16px.Change
handle.module.css:min-width: 0; min-height: 0on the base handle rule.built-css-pitfalls.mddocuments the inherited-minimum trap and how to check it by hand. A dist check for the handle geometry was added and then removed in review: it matched every rule ending in.react-flow__handle, so any later state rule on the bare handle would have failed it, and exact-string matching against minified output was fragile.@workflowbuilder/uipatch.Verification
Build,
check:built-css(prefixes, root-scoped public variables, imports, asset URLs), ui tests and stylelint pass. Manual browser pass in the demo (Simple Workflow, 30 handles, layout px viaoffsetWidth): default andconnectionindicator8x8, handle hover 16x16, node hover indicators 16x16,connectingfrom8x8 with crosshair, top/bottom handle rules only reposition (size unchanged). jsdom cannot measure layout, so the automated part is the built-CSS contract.Follow-up in this PR: target port while connecting
xyflow assigns
connectingtoto the closest handle withinconnectionRadius, so the pointer is often not over the target and:hovercannot express the state; the target needs its own rule..connectingto.validshares the.connectingfromrule: a target accepted byisValidConnectiongrows to the 16px active port, a rejected one keeps 8px while the connection line reports invalid, other ports stay 8px, drop still creates the edge (verified in the demo with the built package). Design has Default and Hover port states only; design is asked to confirm Hover for the valid target and to say whether an invalid target needs a state of its own. Changeset:@workflowbuilder/uipatch.