From 1bf86d15ea3cd6354f68587c0cf203546519b027 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Tue, 30 Jun 2026 14:25:13 -0700 Subject: [PATCH] FN-7303: add workflow badge icon spacing Add token-based spacing so workflow badge icons read clearly beside labels. - Add consistent column gaps to task-card and task-detail workflow badges. - Cover badge icon-label ordering and spacing expectations in dashboard tests. - Add a patch changeset for the published Fusion package. Files changed: .changeset/workflow-badge-spacing.md | 7 +++++++ packages/dashboard/app/components/TaskCard.css | 4 ++++ packages/dashboard/app/components/TaskDetailModal.css | 5 +++++ packages/dashboard/app/components/__tests__/TaskCard.test.tsx | 10 ++++++++-- .../TaskDetailModal.responsive-and-dependencies.test.tsx | 1 + 5 files changed, 25 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-7303 Fusion-Task-Lineage: 6d129e6c-0f8a-43c2-9c6d-88ff9acd520f Co-authored-by: Fusion (runfusion.ai) --- .changeset/workflow-badge-spacing.md | 7 +++++++ packages/dashboard/app/components/TaskCard.css | 4 ++++ packages/dashboard/app/components/TaskDetailModal.css | 5 +++++ .../app/components/__tests__/TaskCard.test.tsx | 10 ++++++++-- ...askDetailModal.responsive-and-dependencies.test.tsx | 1 + 5 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 .changeset/workflow-badge-spacing.md diff --git a/.changeset/workflow-badge-spacing.md b/.changeset/workflow-badge-spacing.md new file mode 100644 index 0000000000..741736a09c --- /dev/null +++ b/.changeset/workflow-badge-spacing.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Add clearer spacing between workflow badge icons and labels. +category: fix +dev: Applies token-based column gaps to dashboard task-card and task-detail workflow badges. diff --git a/packages/dashboard/app/components/TaskCard.css b/packages/dashboard/app/components/TaskCard.css index d040c45fb7..3851af6aef 100644 --- a/packages/dashboard/app/components/TaskCard.css +++ b/packages/dashboard/app/components/TaskCard.css @@ -218,6 +218,9 @@ Aggregate Board cards need a compact workflow-name badge so operators can identi FNXC:WorkflowBoard 2026-06-30-00:00: All workflows cards need workflow identity at the bottom-left below every other card icon/action/meta row, so the wrapper is rendered after those rows and left-aligns the neutral badge without adding click targets. + +FNXC:WorkflowBadges 2026-06-30-00:00: +Workflow badges need a slight token-based gap between icon and label so compact workflow identity remains readable without changing placement, clickability, or truncation behavior. */ .card-workflow-badge-row { display: flex; @@ -228,6 +231,7 @@ All workflows cards need workflow identity at the bottom-left below every other } .card-workflow-badge { + column-gap: calc(var(--space-xs) / 2); max-width: min(100%, 18ch); background: var(--surface-2); border-color: var(--border); diff --git a/packages/dashboard/app/components/TaskDetailModal.css b/packages/dashboard/app/components/TaskDetailModal.css index 632960c338..4f0b9aa716 100644 --- a/packages/dashboard/app/components/TaskDetailModal.css +++ b/packages/dashboard/app/components/TaskDetailModal.css @@ -48,7 +48,12 @@ The gray top header band (task id + column badge) was over-padded. Trim its vert text-transform: uppercase; } +/* +FNXC:WorkflowBadges 2026-06-30-00:00: +Task detail workflow badges share the board badge's slight token-based icon-to-label gap so the canonical metadata badge stays readable while preserving inline truncation and timestamp ownership. +*/ .detail-workflow-badge { + column-gap: calc(var(--space-xs) / 2); font-size: 0.6875rem; padding: calc(var(--space-xs) / 2) var(--space-sm); border-radius: var(--radius-pill); diff --git a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx index 0fd2cb264a..37435e6d28 100644 --- a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx @@ -4998,13 +4998,19 @@ describe("TaskCard workflow badges", () => { task={makeTask()} onOpenDetail={noop} addToast={noop} - workflowBadge={{ workflowId: "wf-custom", workflowName: "Custom Flow" }} + workflowBadge={{ workflowId: "wf-custom", workflowName: "Custom Flow", workflowIcon: "⚙️" }} />, ); const badge = screen.getByTestId("card-workflow-badge"); const row = screen.getByTestId("card-workflow-badge-row"); + const workflowBadgeBlock = [...loadAllAppCssBaseOnly().matchAll(/^\.card-workflow-badge\s*\{([^}]*)\}/gm)] + .map((match) => match[1]) + .join("\n"); expect(badge).toHaveTextContent("Custom Flow"); + expect(badge.querySelector(".workflow-icon")).not.toBeNull(); + expect(badge.querySelector(".workflow-icon")?.nextElementSibling).toHaveTextContent("Custom Flow"); + expect(workflowBadgeBlock).toContain("column-gap: calc(var(--space-xs) / 2);"); expect(badge).toHaveAttribute("data-workflow-id", "wf-custom"); expect(badge).toHaveAccessibleName("Workflow Custom Flow"); expect(row).toContainElement(badge); @@ -5042,7 +5048,7 @@ describe("TaskCard workflow badges", () => { })} onOpenDetail={noop} addToast={noop} - workflowBadge={{ workflowId: "wf-long", workflowName: "Very long custom workflow name for aggregate cards" }} + workflowBadge={{ workflowId: "wf-long", workflowName: "Very long custom workflow name for aggregate cards", workflowIcon: "🧭" }} />, ); diff --git a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx index ee61c3ba1e..a39723b3ef 100644 --- a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx @@ -129,6 +129,7 @@ describe("TaskDetailModal", () => { expect(workflowBadgeBlock).toContain("display: inline-flex;"); expect(workflowBadgeBlock).toContain("align-items: center;"); + expect(workflowBadgeBlock).toContain("column-gap: calc(var(--space-xs) / 2);"); expect(workflowBadgeBlock).toContain("flex: 0 1 auto;"); expect(workflowBadgeBlock).toContain("text-overflow: ellipsis;"); expect(mobileTimestampsBlock).toContain("display: flex;");