Option to show boolean props as "prop={boolean}"

[cixzhang]

Hey! I'm working on Meta's internal design system with @vjeux and piloting code connect.

We have a few components where boolean props are required so the current way figma code connect displays booleans is incorrect. Some examples of this are components like switch, checkboxes, radio.

Here's an example for how we've connected up our switch:

figma.connect(
  XDSSwitch,
  'https://www.figma.com/design/qHKLpmJo1s50sJPJLiRM3C/XDS-Web-Library-(Copy)?node-id=27781-138&t=aIEXaN0VmoSYJrS2-4',
  {
    props: {
      isLabelHidden: figma.boolean('Show Label', {
        true: undefined,
        false: true,
      }),
      hasSpinner: figma.enum('State', {
        Loading: true,
      }),
      isDisabled: figma.enum('State', {
        Disabled: true,
      }),
      tooltip: figma.boolean('Show Tooltip', {
        true: 'Tooltip content goes here',
        false: undefined,
      }),
      value: figma.boolean('Value', {
        true: true,
        false: false,
      }),
      label: figma.boolean('Value', {
        true: figma.string('↪️ On Label'),
        false: figma.string('↪️ Off Label'),
      }),
      labelPosition: figma.enum('Label Position', {
        Left: 'left',
      }),
    },
    example: props => (
      <XDSSwitch
        hasSpinner={props.hasSpinner}
        isDisabled={props.isDisabled}
        isLabelHidden={props.isLabelHidden}
        label={props.label}
        labelPosition={props.labelPosition}
        tooltip={props.tooltip}
        value={props.value}
      />
    ),
  },
);

For most boolean props, showing them when true and hiding them when false is mostly fine (though the convention in our codebase is to always be explicit). However, for required boolean props we end up with incorrect results like so:

The correct code should look like this when false:

<XDSSwitch label="Off" value={false} />

And like this when true:

<XDSSwitch label="Off" value={true} />

If value is not provided, our type checker will throw an error since it's a required prop.

Is there a good way to specify that a boolean should be explicitly shown in the code snippet? Maybe an API like this?

      value: figma.boolean('Value', {
        true: figma.requiredValue(true),
        false: figma.requiredValue(false),
      }),

[vjeux]

My read on this is that there's code to not add the prop when the value is undefined but it's been implemented as !value and also catching false by mistake.

[tomduncalf-figma]

Hey @cixzhang @vjeux,

This is "by design", in that we assumed that usually a false Figma boolean mapped to a React prop should result in the prop not being output, rather than being output as false.

However, this doesn't account for cases like yours. We actually have the concept of defaultValue and hideDefault in our SwiftUI API which cover this case – I'm going to speak to the team and see if we can align on a way to solve this for you!

[cixzhang]

@tomduncalf-figma thanks for considering this use case!

We also sometimes have boolean props that default to true so in those cases, showing an explicit false assignment is also important.

[andrew-pledge-io]

I raised this here as well: #155

[ericandrewscott]

It would be awesome if there was a param on figma.boolean for an explicit return that would still return the actual false instead of nothing.