Variant based on instance swap property?

Open
#330 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript

Research direction

Start by reading the Code Connect CLI template handling and instance swap documentation or examples; the issue does not name specific files or tests. Reproduce the case where a parent accepts a child layout component’s props directly, and the case where the instance swap renders as children. Done means a template can express the desired variant and render children correctly.

Written by the indexing model from the issue text.

Description

API question
  • Code Connect CLI version: 1.3.6
  • Operating system: macOS 15.7.1

I hit a case where it would be helpful to have a variant based on the name of the component used for an instance swap prop.

The issue is for designs, there's a constraint on the Figma side so sometimes designs use a child layout component inside a parent component, but in React we accept props for that child layout component directly on the parent (the layout behavior is baked into the parent).

It's even a bit more complicated, because there are cases where we don't use that layout, and render the instance swap prop as children of the parent component.

I tried to create a template for this that doesn't use a parser, but I couldn't get children to render correctly...

Dominant language
TypeScript
Stars
1.6k
Forks
126
PR merge metrics
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from figma/code-connect

All issues in figma/code-connect

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.