-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature request: add ability to concat string props within example snippet #80
Comments
just to try and make this crystal clear, the variants that are supported inside the codebase look like: export type ButtonVariant =
| "primary"
| "primary/fatal"
| "primary/inverse"
| "secondary"
| "secondary/fatal"
| "tertiary"
| "tertiary/inverse"; |
Hey @glomotion, thanks for the feedback -- As you've correctly identified, Code Connect only parses the code so conditionals inside of the template will not render correctly -- The team is currently exploring potential APIs so that we can support scenarios like this where more custom transformations are required to render your components correctly. In the meantime, if this is blocking you this can technically be achieved using variant restrictions , so you could set up a separate import { figma } from "@figma/code-connect";
import { Button } from "./";
figma.connect(
Button,
"https://www.figma.com/design/oHsoXoDsvnhjlbpzSIbHvU/BIOME?node-id=2-3486&m=dev",
{
variant: { Variant: "Primary" }, // This code connect will only be shown for nodes with `Variant` = 'primary'
props: {
children: figma.string("Label"),
fullVariant: figma.enum("Type", {
Fatal: "primary/fatal",
Inverse: "primary/inverse",
Default: "primary",
}),
...
},
imports: ["import { Button } from '@biom3/react'"],
example: ({ fullVariant, children, size }) => {
return (
<Button variant={fullVariant} size={size}>
{children}
</Button>
);
},
},
);
figma.connect(
Button,
"https://www.figma.com/design/oHsoXoDsvnhjlbpzSIbHvU/BIOME?node-id=2-3486&m=dev",
{
variant: { Variant: "Secondary" }, // This code connect will only be shown for nodes with `Variant` = 'Secondary'
props: {
children: figma.string("Label"),
fullVariant: figma.enum("Type", {
Fatal: "secondary/fatal",
Inverse: "secondary/inverse",
Default: "secondary",
}),
...
},
imports: ["import { Button } from '@biom3/react'"],
example: ({ fullVariant, children, size }) => {
return (
<Button variant={fullVariant} size={size}>
{children}
</Button>
);
},
},
); |
Oh thank you kindly for the prompt reply and the code snippet @jyyang0 !! |
FWIW - i've also found that expressions inside example snippets, could be quite handy to work around type issues when converting props between figma and code (especially given that code-connect files must be TSX). |
Hey @glomotion! This sounds like something we might want to look closer into if you're running into issues here, do you have an example of this? |
apologies @karlpetersson - I think the issues i mentioned yesterday were actually due to other more complicated issues regarding how to render subcomponents (new issue here: #86). If i think of any other examples were this might be useful, ill come back and update this thread. :) |
Describe the feature you'd like:
We have a Button component in figma, which has a bunch of properties (including specifically "variant" & "type") - some of which are merged into a single "variant" prop inside of the coded Button component eg:
this example code-connect snippet above fails to render anything inside of figma:
After reading through your docs, i found some info which tells me why FIGMA might not like this code snippet:
So Im just here wondering, what would be the best way to try and achieve the above?
The text was updated successfully, but these errors were encountered: