Open adam-dutton opened 3 weeks ago
Hi, thanks for reaching out. This is a use case that isn't currently supported, as we won't render the fields that are set to false
.
I agree this is a case we should try to support. I'll discuss with the team. In the meantime, how would you like to see this represented in the API?
Thank you for the response. I did find a workaround by using variant restrictions.
There's a lot of redundant code, but this works for now:
import { Tag } from '../NewTag'
const sharedProps = {
label: figma.string('label'),
rounded: figma.boolean('rounded?')
}
figma.connect(
Tag,
'https://...',
{
variant: { 'rounded?': 'true' },
props: sharedProps,
example: (props) => (
<Tag>
{props.label}
</Tag>
)
}
)
figma.connect(
Tag,
'https://...',
{
variant: { 'rounded?': 'false' },
props: sharedProps,
example: (props) => (
<Tag rounded={false}>
{props.label}
</Tag>
)
}
)
As for a more ideal API, perhaps something like this:
props: {
label: figma.string('label'),
rounded: figma.boolean('rounded?', {
true: undefined,
false: {
value: false,
displayValue: true // force display of falsy value
}
})
}
Ah! Yes, I should have mentioned variant restrictions as an option. Still not ideal. Will update once we have more info on how we're thinking about implementing this.
We have a
<Tag/>
component with a booleanrounded
prop which is set by default totrue
.Similarly, in Figma, we also have a
rounded
boolean prop defaulted totrue
.I'm having trouble configuring the
Tag.figma.tsx
to output the proper code snippet.If I don't change the default true/false mappings, this is the
true
code snippet: This isfalse
:Both of these snippets would render the same component, as
rounded
is defaulted totrue
in the React component.I would like a way to have the code snippets to look like this for
true
:and this for
false
:I've tried mapping the true/false states props individually, but I haven't found a way to produce the desired result.