Boolean props that are `false` are not displayed in code preview

[andrew-pledge-io]

When a component has a boolean prop with a default value of true, you must explicitly pass false to disable the behavior.

However, when the prop is set to false, it doesn't appear in the code preview, which can lead to misleading or incorrect code representation.

Is there a way to configure the props or the code preview to show boolean props when their value is false?

Example

Imagine I have a "My Button" component in Figma with a boolean prop called "has icon".

In code, <MyButton> is implemented as follows:

export function MyButton({ children, hasIcon = true }: Props) {
  return (<button type="button">{children} {hasIcon ? <MyIcon /> : null}</button>);
}

const buttonWithIcon = <MyButton>Button with icon</MyButton>;
const buttonWithoutIcon = <MyButton hasIcon={false}>Button without icon</MyButton>;

And has a connect file like this:

import figma from '@figma/code-connect';

import { MyButton } from './MyButton.js';

figma.connect(MyButton, 'https://www.figma.com/design/ABC123', {
  props: { hasIcon: figma.boolean('has icon') },
  example: (props) => <MyButton hasIcon={props.hasIcon}>My button</MyButton>,
});

For a component instance where "has icon" is false in Figma, the preview looks like this:

Which is incorrect as the default value of the prop is true, meaning this will incorrectly result in the icon being displayed.

[ericandrewscott]

@andrew-pledge-io if it helps... what we often end up having to do is declare the variant and make an additional Connect statement, like:

figma.connect(MyButton, 'https://www.figma.com/design/ABC123', {
  variant: { hasIcon: true }, 
  props: { ...otherProps },
  example: (props) => <MyButton {...props}>My button</MyButton>,
});

figma.connect(MyButton, 'https://www.figma.com/design/ABC123', {
  variant: { hasIcon: false }
  props: { ...otherProps },
  example: (props) => <MyButton hasIcon={false} {...props}>My button</MyButton>,
});

[tomduncalf-figma]

Hey @andrew-pledge-io @ericandrewscott, you're right that we don't currently offer a way to express this in the React API. I'll discuss how we might solve this this with the team!

[atimofte-mdsol]

+1, it's been almost a year