figma / code-connect

A tool for connecting your design system components in code with your design system in Figma
MIT License
486 stars 44 forks source link

`figma.string` is causing TypeScript error and rendering issues when used inside of `figma.boolean` as value mapping #32

Closed 0xa3k5 closed 3 weeks ago

0xa3k5 commented 3 weeks ago

I've been trying to set up the code-connect for our design system. Ran into a bit of an issue and I'm not sure how to resolve it.

we have a design component with these properties:

screenshot@2x

when the iconOnly prop is true, the component doesn't render the text string, however when it's false, we render the string as the children. so that is what I'm trying to achieve:

inside the figma.connect:

props: {
      iconBefore: figma.boolean('iconBefore', {
        true: figma.instance('↳ iconBefore'),
        false: undefined,
      }),
      text: figma.string('text'),
      icon: figma.instance('↳ icon'),
      iconAfter: figma.boolean('iconAfter', {
        true: figma.instance('↳ iconAfter'),
        false: undefined,
      }),
      variant: figma.enum('variant', {
        primary: 'primary',
        secondary: 'secondary',
        tertiary: 'tertiary',
        danger: 'danger',
      }),
      size: figma.enum('size', {
        large: 'large',
        medium: 'medium',
        small: 'small',
      }),
      disabled: figma.boolean('disabled'),
      iconOnly: figma.boolean('iconOnly'),
      children: figma.boolean('iconOnly', {
        true: figma.instance('↳ icon'),
        false: figma.string('text'), // this gives type error
      }),
    }

the false value here throws type error:

Type 'string' is not assignable to type 'Element'.ts(2322)

I tried to wrapping it as:

children: figma.boolean('iconOnly', {
 true: figma.instance('↳ icon'),
 false: <span>figma.string('text')</span>
})

which silences the type error but after successfully publishing (no errors in publish script) figma client stops displaying the code example in dev mode.

Any idea how to resolve it?

tomduncalf-figma commented 3 weeks ago

Hey @0xa3k5, it looks like we have an error in our typings here, sorry about that! I'll raise a bug to get it fixed.

I just tried a similar example and was able to publish. I only saw the error in my IDE. Is the CLI failing to publish for you?

tomduncalf-figma commented 3 weeks ago

@0xa3k5 I just created a fix for this so it will be in our next release!

0xa3k5 commented 3 weeks ago

hey thank you very much! @tomduncalf-figma yeah it actually works and seems like it's only a typing bug.