Handling components with default boolean props

[adam-dutton]

We have a <Tag/> component with a boolean rounded prop which is set by default to true.

Similarly, in Figma, we also have a rounded boolean prop defaulted to true.

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 is false:

Both of these snippets would render the same component, as rounded is defaulted to true in the React component.

I would like a way to have the code snippets to look like this for true:

import { Tag } from "../NewTag"

<Tag>Tag</Tag>

and this for false:

import { Tag } from "../NewTag"

<Tag rounded={false}>Tag</Tag>

I've tried mapping the true/false states props individually, but I haven't found a way to produce the desired result.

props: {
  rounded: figma.boolean('rounded?', {
    false: false, // Any way to make this render `rounded={false}` ?
    true: undefined
  })
}

[ptomas-figma]

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?

[adam-dutton]

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
    }
  })
}

[ptomas-figma]

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.