Conversation
- Input, CheckBox, RadioButton, StepInput, MessageStrip, Select, SegmentedButton (Web Components + React variants) - MessageStrip: full ColorSet1/2 + color-scheme mapping from the single Figma Color axis (Indication 1..10 / 1b..10b) - concise bulleted FIGMA_CODE_CONNECT.md; drop exhaustive API map - Icon kept as .todo (unpublishable: node is a frame, not a component set)
Adds Web Components + React Code Connect mappings for 3 more SAP Web UI Kit components (published to nodes 24087:10369, 187:305, 573:3623): - Switch: checked, disabled, design (Type→Textual/Graphical) - Link: design, disabled, label text - Avatar: size, color-scheme (Color 1..10→Accent1..10), initials Doc updated with the per-component works/doesn't-map/how-to-fix blocks.
- add disabled ← Interaction State=Disabled (was missing) - shape ← Content verified by screenshot (Person=circle, Object=square); document the coupling misalignment (Figma couples shape to content, WC treats shape as independent) - note initials emits regardless of Type (cross-axis parser limit)
…ment - FIGMA_CODE_CONNECT_FINDINGS.md: per-component, per-public-prop cross-reference vs live Figma props, with verdict+evidence. Deliverable captures every misalignment (Figma-only props, WC-only props, concept mismatches, parser asymmetry, instance-swap/slot gaps). - Switch: remove incorrect Type→design mapping. Screenshot of node 24087:10369 shows all switches render icons (all 'Graphical'); Figma 'Type' is colour-semantics (no ui5-switch prop). design not derivable.
Evidence-based api-by-api pass: every component set screenshot-verified, mappings confirmed against renders. MessageStrip ColorSet1/2 direction confirmed via WC CSS-token names (Indication N→ColorSet1, Nb→ColorSet2). No new defects beyond the Avatar/Switch fixes already applied.
Reads the readable ✏️ Text from the nested 'Input Message Popover' instance (via figma.nestedProps) and emits it as a valueStateMessage slot, gated on the Message Popover boolean. WC: slot resolved into a figma.boolean value (HTML parser rejects template ternaries). React: same, gated JSX in the boolean's true branch. Note: Message Popover is only present in Active interaction-state variants in Figma, so the slot appears there.
- Counter Badge is a Figma VARIANT (True/False), not a boolean — was figma.boolean (silently didn't match → badge never showed). Now figma.enum. - badge text '1' → '72' to match the Figma nested layer. - React was missing the Attention Badge; React can only express one badge (parser rejects compound placeholders) so it drives from Counter Badge — documented asymmetry. WC emits both. - findings doc rewritten to Works/Doesn't work/Assumed/Misalignment format.
Clarify in findings + code comments that badge text is hardcoded to '72' and NOT read from Figma (count lives in an unexposed nested layer), so it won't track changes to the number in the design. Comment-only; no mapping change, no republish needed. React keeps badge on Counter Badge (attention badge unreachable in React, by design).
Design rule per kit owners: Compact → InlineText, Cozy → OverlayText. Badge design was hardcoded OverlayText; now driven by the Form Factor axis (cross-axis: presence from Counter Badge enum, design from Form Factor enum nested in the badge template). Applied in WC + React. Documented as an assumption (not visually re-verified). text=72 stays hardcoded (unreadable nested layer).
The nested-popover text can't be emitted into a <div slot=…> wrapper: a figma.* call nested in a template literal / JSX emits VERBATIM (Dev Mode printed the figma.nestedProps(...) source instead of the value). It also only exists on Active-state variants. Reverted to the clean Input mapping; documented as not-mappable + added a general parser lesson to the findings doc.
…ern) Dev-Mode-confirmed working in WC + React. The nested 'Input Message Popover' text is read via a TOP-LEVEL figma.nestedProps prop and referenced as the resolved value — the earlier failure was from inlining the figma.* call (emits verbatim). Slot is always emitted (gating + resolved-text can't coexist). Corrected the parser-lesson note in the findings doc accordingly.
Same top-level figma.nestedProps pattern as Input, Dev-Mode-confirmed in both WC + React. Select's popover is deeply nested (Drop-Down > Value Message > Input Message Popover) — figma.nestedProps resolves it by name. Slot always emitted; text resolves empty on non-popover variants.
…/icon Switch: restore Type→design (Non-Semantic→Textual, Semantic→Graphical). Earlier pass wrongly removed it — 'Textual' renders neutral icons (not text) so Non-Semantic=Textual is correct; Semantic=Graphical (green/red icons) per WC docs. SegmentedButton: Type axis now switches each item between text and icon form (icon name is placeholder 'home' — instance-swap, unreadable); selected kept on item 1 as representative default.
Per user: the useful direction is Figma properties that can't be reflected in code, not WC props missing from Figma. Removed readonly / textOn/textOff / min/max/step / name/value bullets and the 'WC props absent from Figma' cross-cutting class. Fixed the stale Switch entry (design DOES map now).
Icon Position (Left/Right/N/A) → icon (Left) / end-icon (Right) / none.
Position is now dynamic; icon name stays a placeholder ('inspect', the
kit default) since the Icon instance-swap name isn't readable. WC + React.
Dev-Mode-confirmed: the Initials text layer only exists on Type=Initials variants, so initials is emitted only there and omitted on Image/Icon avatars — no gating needed. Removed the assumption; updated open items.
- Avatar: Type=Icon -> icon="employee" (WC default placeholder; name is instance-swap, unreadable). WC + React. - Delete stale FIGMA_CODE_CONNECT.md; FIGMA_CODE_CONNECT_FINDINGS.md is the single authoritative doc. - Sweep all .figma.ts/.tsx header references to the findings doc name.
Per user: keep only what does not work and what is mapped-but-assumed, per component. Dropped verified-works lists, misalignment prose, and fixed-history. Added two global notes at top: why icon NAMES are never readable (instance-swap), and the figma.* must-be-top-level-prop rule.
Type=Image -> slotted <img> with placeholder URL; Badge boolean -> <ui5-avatar-badge icon=edit> placeholder. Actual image fill / badge content arent readable, so these are representative placeholders the consumer edits (same philosophy as icon/initials/options). WC + React.
Read the Text Message layer via figma.textContent instead of hardcoding Information message (WC + React). WC maps the full ColorSet1/2 palette via the single Color axis; React reaches ColorSet1 + color-scheme only (parser cant merge two axes into design) — documented limitation.
<ui5-icon slot=icon name=information> (WC) / Icon slot (React) when the Figma Icon variant is True. Name is a placeholder (instance-swap, unreadable); presence maps. Clarified React ColorSet2 trade-off in findings.
Two complementary fixes: (A) owner adds an Icon Name text property per component (figma.string, quick, drift risk); (B) generate one Code Connect entry per icon from @ui5/webcomponents-icons so figma.instance resolves the selected icons name (durable, no drift). Explains the root cause: no figma.* primitive reads an instance-swap selection as a string.
…on prototype - Button badge design CANNOT be driven by Form Factor (nested figma.enum AND cross-prop refs both emit verbatim) — reverted to hardcoded design=OverlayText (WC + React). Removed the icon diagnostic probe. - Icons.figma.ts: prototype proving individual icons can be Code-Connected (Option B). figma.instance resolved <ui5-icon name=globe> on Button (a host with a mainComponent link); empty on MessageStrip (no link). - Findings doc: add How-to-connect runbook (file/configs/token/command + the 11 connected nodes) at top.
Old note claimed the swapped icon can never be read. The prototype disproved the absolute: name-as-STRING is unreadable (attribute icons stay hardcoded), but the selected icon as an ELEMENT resolves via figma.instance() when the icon library is Code-Connected AND the host instance carries a mainComponent link (tested: worked on Button, empty on MessageStrip).
Onboarding-style: (1) clone + yarn install, (2) config files explained, (3) generate token via Settings→Security, (4) create the two mapping files, (5) dry-run, (6) publish with --force, (7) verify in Dev Mode. All steps anchored to packages/main.
install @figma/code-connect and create the config files are real steps (a fresh main checkout has neither); note the PR branch has them pre-done.
ilhan007
had a problem deploying
to
netlify-preview
August 13, 2026 12:14 — with 
GitHub Actions
Failure
GitHub Actions
Failure
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.
Draft — for exploration, not merge
Figma Code Connect mappings for 11
@ui5/webcomponentscomponents in theSAP Web UI Kit (fileKey
SILcWzK5uFghKun9jx6D7c), published under two labels:Web Components (
src/*.figma.ts) and React (src/*.figma.tsx).What is in here
MessageStrip, Select, SegmentedButton, Switch, Link, Avatar.
packages/main/FIGMA_CODE_CONNECT_FINDINGS.md— onboarding runbook (clone →install → config → token → connect → publish → verify) + per-component list of
what does NOT map and what is assumed.
packages/main/FIGMA_ICON_NAME_PROPOSAL.md— proposal for making icon namesreadable (Option A text prop / Option B Code-Connect the icon library).
packages/main/src/Icons.figma.ts— prototype proving individual icons can beCode-Connected (
figma.instanceresolves the selected icon on link-carrying hosts).How to play with it
yarnfrom root.FIGMA_CODE_CONNECT_FINDINGS.md.packages/mainwith--force, verify in Dev Mode.Notes / known gaps (see findings doc)
icon="…") stay hardcoded (instance-swap not readableas a string); slot icons can resolve via
figma.instanceonly if the icon libraryis Code-Connected and the host instance carries a mainComponent link.
Button second badge are WC-only.