code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Mapping from figma.enum / variant property to enum in React code does not work as expected

Open AHumphriesPD opened this issue 1 year ago • 1 comments

I'm not sure if I'm misunderstanding the documentation or if this is a bug or limitation of some kind.

Based on this example from the React README:

// maps the 'Options' variant in Figma to enum values in code
figma.enum('Options', {
  'Option 1': Option.first,
  'Option 2': Option.second,
})

Here's a stripped down version of the code connect file to try to isolate the issue:

figma.connect(
  ButtonPrimary,
  "https://www.figma.com/design/this-is-not-a-real-link",
  {
    props: {
      text: figma.string("text"),
      iconLocation: figma.enum("iconLocation", {
        left: IconLocation.LEFT,
        right: IconLocation.RIGHT,
        none: IconLocation.NONE
      })
    },
    example: (props) => <ButtonPrimary
      buttonText={props.text}
      iconSide={props.iconLocation}
    />,
  },
)

and the output in Figma's dev mode for a button with the iconLocation variant property set to "left":

  <ButtonPrimary
      buttonText="label"
      iconSide="IconLocation.LEFT"
  />

I would expect the output to look like this, so that if it were copied and pasted into another React component, it would use the actual enum from the code, rather than using a string:

  <ButtonPrimary
      buttonText="label"
      iconSide={IconLocation.LEFT}
  />

I have tried this with the enum being imported, with it being local to the code connect file, with the enum's type being number, and with it's type being string, and they all result in the same output described above.

AHumphriesPD avatar May 17 '24 16:05 AHumphriesPD

Hey @AHumphriesPD, thanks for the report! -- The team is aware of this issue and it should be fixed in the next release.

jyyang0 avatar May 22 '24 16:05 jyyang0

@AHumphriesPD we just released 0.2.1 that should fix this issue. I'll close it for now, but feel free to reopen if that's not the case.

ptomas-figma avatar Jun 19 '24 10:06 ptomas-figma