From 33f7c3dc0558cd6445ebee3238cfab19cbbdc66c Mon Sep 17 00:00:00 2001 From: Jan Librowski Date: Mon, 14 Sep 2026 09:07:07 +0200 Subject: [PATCH] fix(sdk): apply the design body spacing to node sections and rows Sections (Decision branches, AI Agent tools) use 8px padding and gap and the content radius role; rows use 8px padding and a 4px radius. Values bind to the space/100 and radius/50 primitives with missing-token markers until the node.body roles land in the token export. The derived row width becomes 205px. --- .changeset/node-body-spacing.md | 5 +++++ .../node-info-wrapper/node-wrapper-info.module.css | 8 ++++---- .../connectable-item-width.decision-log.md | 8 ++++++++ .../connectable-item/connectable-item.module.css | 6 +++--- .../nodes/components/node-section/node-section.module.css | 6 +++--- 5 files changed, 23 insertions(+), 10 deletions(-) create mode 100644 .changeset/node-body-spacing.md diff --git a/.changeset/node-body-spacing.md b/.changeset/node-body-spacing.md new file mode 100644 index 000000000..cabd67f96 --- /dev/null +++ b/.changeset/node-body-spacing.md @@ -0,0 +1,5 @@ +--- +'@workflowbuilder/sdk': patch +--- + +Decision branch rows, AI tool rows and their sections follow the design body spacing: 8px padding and gap, 4px row radius and 8px section radius (previously 12/10px, 6px and 8px). Row width derived from the node shell is now 205px. diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css index 79cf17881..7b6ca6447 100644 --- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css +++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css @@ -1,11 +1,11 @@ .container { - --wb-sdk-connectable-item-inset: calc(0.625rem + 1px); + --wb-sdk-connectable-item-inset: calc(var(--wb-ds-space-100) + 1px); display: flex; flex-direction: column; - gap: 0.75rem; - border-radius: 0.5rem; - padding: 0.625rem; + gap: var(--wb-ds-space-100); /* missing token */ + border-radius: var(--wb-ds-canvas-node-content-radius); + padding: var(--wb-ds-space-100); /* missing token */ border: 1px solid var(--wb-ds-ui-stroke-default); color: var(--wb-ds-ui-text-default); diff --git a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md index cfc7b3331..06ee96f1a 100644 --- a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md +++ b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item-width.decision-log.md @@ -67,3 +67,11 @@ adds horizontal padding without declaring it lets its rows exceed the visible wi - Provisional until the design specifies the row width (follow-up: connectable-item-design-width). The design's node body matrix (row padding 8px, radius 4px) is a separate change and does not alter this derivation. + +## Update 14.09.2026 + +Design confirmed the body matrix (DR-143): section padding and gap 8px, row padding 8px, row radius 4px, +section radius 8px (`canvas/node/content-radius`). With the section inset now `8 + 1`, the derived row width +is `241 - 2 x (8 + 1) - 2 x (8 + 1) = 205px` in both Decision and AI Agent. The formula is unchanged; only +the inset value moved. Row padding, row radius, section padding and gap bind to primitives +(`space/100`, `radius/50`) with `missing token` markers until design publishes the `node.body.*` roles. diff --git a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css index 288ceb344..01ed83b15 100644 --- a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css +++ b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css @@ -1,10 +1,10 @@ :root { - --wb-sdk-connectable-item-horizontal-padding: 0.75rem; - --wb-sdk-connectable-item-vertical-padding: 0.625rem; + --wb-sdk-connectable-item-horizontal-padding: var(--wb-ds-space-100); /* missing token */ + --wb-sdk-connectable-item-vertical-padding: var(--wb-ds-space-100); /* missing token */ --wb-sdk-connectable-item-background: var(--wb-ds-ui-bg-inset); --wb-sdk-connectable-item-border-width: 0.0625rem; --wb-sdk-connectable-item-border-color: var(--wb-ds-components-text-field-stroke-default); - --wb-sdk-connectable-item-border-radius: 0.375rem; + --wb-sdk-connectable-item-border-radius: var(--wb-ds-radius-50); /* missing token */ --wb-sdk-connectable-item-inset: 0rem; } diff --git a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css index b293a982f..4f39b6f9e 100644 --- a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css +++ b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css @@ -1,7 +1,7 @@ :root { - --wb-sdk-node-section-gap: 0.75rem; - --wb-sdk-node-section-padding: 0.625rem; - --wb-sdk-node-section-border-radius: 0.5rem; + --wb-sdk-node-section-gap: var(--wb-ds-space-100); /* missing token */ + --wb-sdk-node-section-padding: var(--wb-ds-space-100); /* missing token */ + --wb-sdk-node-section-border-radius: var(--wb-ds-canvas-node-content-radius); --wb-sdk-node-section-border-color: var(--wb-ds-ui-stroke-default); --wb-sdk-node-section-border-width: 0.0625rem; }