-
Notifications
You must be signed in to change notification settings - Fork 47
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
Mapping an enum in Figma to a boolean prop in React code #14
Comments
I'd love to know this as well, basically have the same use case 👀 |
I think this was called out in the demo. You only need to map the states you're interested in to the props you need in code, like this: props: {
variant: figma.enum("Variant", {
Primary: "primary",
Secondary: "secondary",
Plain: "plain",
}),
disabled: figma.enum("State", {
Disabled: true, // map "Disabled" state to boolean `true`
// ignore other "State" values, so `disabled` will be undefined
}),
busy: figma.enum("State", {
Busy: true, // map "Busy" state to boolean `true`
// ignore other "State" values, so `busy` will be undefined
}),
},
example: (props) => (
<Button
variant={props.variant}
disabled={props.disabled}
busy={props.busy}
>
{props.label}
</Button>
), Essentially, the |
@andreiduca that did the trick, thank you so much! I didn't get to catch the demo so have been trying to piece things together from the docs. Also I just noticed this from the docs which is helpful in explaining why my conditional rendering approach wasn't working:
|
Good call. I saw this behavior but wasn't sure how exactly it was working 😅 So in general, if you need to map stuff, this should be done via the You can also do some neat stuff, like this: props: {
iconOnly: figma.boolean("Icon Only"),
label: figma.boolean("Icon Only", {
false: figma.string("↳ Label"),
true: undefined,
}),
icon: figma.boolean("Has icon", {
true: figma.children("Icon"),
false: undefined,
}),
} where you map an Similarly, you can conditionally map a child instance property ( Then you just use them in the example block: example: (props) => (
<Button iconOnly={props.iconOnly}>
{props.icon}
{props.label}
</Button>
) |
Hey @chsmc-stripe! Thanks for the question and thanks everybody for the discussion. Seems like the original question is solved, right? Would be ok for me to resolve this issue? |
@ptomas-figma yes, go for it! |
Our (Stripe's) Button component in Figma has a
state
enum like this:In code the hovered, pressed, and focused states are based on CSS pseudo states and cannot be set via a prop. However, the disabled state can be manually set:
I'm not entirely sure how to model this in my Code Connect file to get the right syntax. It seems like I'd have to do this:
which of course does not result in the correct or even working code in Figma:
I tried to do this sort of thing:
But for some reason the code in Figma always shows up as
<Button disabled />
no matter which enum is selected.Would appreciate some guidance on how to handle this—thanks in advance!
The text was updated successfully, but these errors were encountered: