Bug in React children handling textContent

[vjeux]

As we are trying code-connect on the internal Meta design system, we ran into an issue with React children handling textContent. We are rendering three children: two figma.instance and one figma.textContent. If all the instances are undefined, then the text shows up just fine. If any of them exists, then the textContent doesn't appear. It looks like a bug, but unclear what is going on.

figma.connect(
 XDSLink,
 'https://www.figma.com/design/qHKLpmJo1s50sJPJLiRM3C/XDS-Web-Library-(Copy)?node-id=52518-22&m=dev',
 {
   props: {
     leftIcon: figma.enum('Show LeftIcon', {
       true: figma.instance('LeftIcon'),
       false: undefined,
     }),
     textContent: figma.textContent('Text Link'),
     rightIcon: figma.enum('Show RightIcon', {
       true: figma.instance('RightIcon'),
       false: undefined,
     }),
   },
   example: props => (
     <XDSLink href="<INSERT URI>">
       {props.leftIcon}
       {props.textContent}
       {props.rightIcon}
     </XDSLink>
   ),
 },
);

Text doesn't appear:

Text appears:

If we wrap {props.textContent} in <></> then it's always rendering, but it does show the <></> which is not what we want.

[ptomas-figma]

Thanks for reporting. This seems to be a bug on the rendering side where the component "pills" are swallowing the text content. We'll work on a fix and release it in a future release.

[vjeux]

Awesome thank you for confirming this is a real issue!

[ptomas-figma]

This should be now be fixed and the text should be rendering in the snippet

[vjeux]

Thank you!