Skip to content

fix(frontend): pass fill-type separately instead of baking it into icon names - #15

Merged
LukasHirt merged 1 commit into
mainfrom
fix/node-icon-fill-type
Jul 24, 2026
Merged

fix(frontend): pass fill-type separately instead of baking it into icon names#15
LukasHirt merged 1 commit into
mainfrom
fix/node-icon-fill-type

Conversation

@LukasHirt

@LukasHirt LukasHirt commented Jul 24, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Every <oc-icon> usage across the workflow builder (node cards, node picker, details panel, executions panel, back button) passed the icon name with the style baked in, e.g. chat-3-line, close-line, play-circle-line.
  • OcIcon (design-system, provided by the oCIS Web host at runtime) builds the SVG asset path as ${name}-${fillType}.svg, with fillType defaulting to 'fill' when not passed. That produced nonexistent paths like chat-3-line-fill.svg, which 404'd — so every one of these icons silently rendered OcIcon's hardcoded info fallback instead of the intended icon.
  • Fix: strip the -line suffix from every icon name (frontend/src/nodeTypes.ts and the few hardcoded fallbacks in TriggerNode.vue/ActionNode.vue/WorkflowBuilder.vue/panels) and pass fill-type="line" explicitly on each <oc-icon>, matching the convention used elsewhere in ownCloud Web (e.g. CreateLinkModal.vue, SideBar.vue).

Test plan

  • pnpm exec vue-tsc --noEmit passes
  • pnpm test:unit run passes (4/4)
  • Visual check in a running dev stack that node cards/picker/panels now show their correct icons instead of the info fallback

…on names

Every oc-icon usage passed names like 'chat-3-line' or 'close-line' directly as
the `name` prop, but design-system's OcIcon builds the asset path as
`${name}-${fillType}.svg` with fillType defaulting to 'fill'. That produced
malformed, nonexistent paths (e.g. 'chat-3-line-fill.svg'), so every node card
and panel icon silently fell back to OcIcon's default 'info' icon instead of
its intended one.

Strip the baked-in '-line' suffix from every icon name (in nodeTypes.ts and
the few hardcoded ones) and pass fill-type="line" explicitly, matching the
convention used elsewhere in ownCloud Web.

Signed-off-by: Lukas Hirt <info@hirt.cz>
@LukasHirt
LukasHirt requested a review from a team as a code owner July 24, 2026 13:13
@LukasHirt LukasHirt self-assigned this Jul 24, 2026
@LukasHirt
LukasHirt merged commit ddbce64 into main Jul 24, 2026
5 checks passed
@LukasHirt
LukasHirt deleted the fix/node-icon-fill-type branch July 24, 2026 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants