[DS 2.0] Render the default canvas port at the designed 8px - #122
Draft
librowski wants to merge 2 commits into
Draft
[DS 2.0] Render the default canvas port at the designed 8px#122librowski wants to merge 2 commits into
librowski wants to merge 2 commits into
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
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.
librowski
force-pushed
the
ds2-canvas-ports
branch
from
September 9, 2026 16:49
39a6b4b to
b86fa08
Compare
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.
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
1 participant
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.check-built-css.ts: the built base.react-flow__handlerule must carry the complete geometry (width/height, border, box-sizing, zero minimums), so a regression fails the build check;built-css-pitfalls.mddocuments the inherited-minimum trap.@workflowbuilder/uipatch.Verification
Build,
check:built-css, 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
React Flow captures the pointer on the dragged handle, so the node under the cursor never gets
:hoverand its ports stayed at 8px during a connection while the source showed 16px..connectingtonow shares the.connectingfromrule: the target grows to the 16px active port, 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 that Hover is the intended look for the connecting target. Changeset:@workflowbuilder/uipatch.