variant restriction boolean bug

[alisonjoseph]

I'm getting the following error when trying to create a variant restriction with a boolean property
The Figma Variant "Actionable" does not have an option for true

When creating my code connect file the property comes through: figma.boolean('Actionable'), and I can see it in Figma also. Is this a bug, or is my implementation incorrect?

figma.connect(
  ActionableNotification,
  'https://www.figma.com...',
  {
    variant: { Actionable: true },
    props: sharedNotificationProps,
    example: ({ title, kind, subtitle, hideCloseButton }) => (
      <ActionableNotification
        kind={kind}
        title={title}
        subtitle={subtitle}
        hideCloseButton={hideCloseButton}
      />
    ),
  }
);

[tomduncalf-figma]

Hey @alisonjoseph, I think what could be going on here is that your property in Figma is actually a variant property with "boolean-like string values" rather than a true boolean. It might be the string "True" or "Yes" or something like that.

We automatically translate these "boolean-like" strings to boolean values when using figma.boolean, but I don't think we do the same for variant restrictions, so you'd need to specify the literal value from Figma e.g. variant: { Actionable: "True" }.

I think this is something we should fix, so that the API is consistent across props and variant restrictions.

Feel free to share a screenshot of your component's properties in Figma if you're not sure, and if this isn't the case we'd be happy to investigate further.

[alisonjoseph]

Thanks for the quick response @tomduncalf-figma , you're correct I think that's exactly what was happening. I'm no longer seeing an error, however it seems to be ignoring the variant restriction completely and just rendering the first one no matter if actionable is true or false.

const sharedNotificationProps = {
  .....
  actionable: figma.boolean('Actionable'),
};

figma.connect(
  ActionableNotification,
  'https://www.figma.com...',
  {
    variant: { Actionable: 'True' },
    props: sharedNotificationProps,
    example: ({ title, kind, subtitle, hideCloseButton, actionable }) => (
      <>
        actionable: {actionable}
        <ActionableNotification
          kind={kind}
          title={title}
          subtitle={subtitle}
          hideCloseButton={hideCloseButton}
          lowContrast={lowContrast}
        />
      </>
    ),
  }
);


figma.connect(
  InlineNotification,
  'https://www.figma.com....',
  {
    variant: { Actionable: 'False' },
    props: sharedNotificationProps,
    example: ({ title, kind, subtitle, hideCloseButton, actionable }) => (
      <>
        actionable: {actionable}
        <InlineNotification
          title={title}
          kind={kind}
          subtitle={subtitle}
          hideCloseButton={hideCloseButton}
        />
      </>
    ),
  }
);