figma / code-connect

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

Need a selector traversal API for textContent #180

Open vjeux opened 1 week ago

vjeux commented 1 week ago

We have a text in a nested figma tree Selector > .Input Message > Text message. figma.textContent('Text message') does not find it. But if we move Text message at the root, then it works.

We were able to solve the issue selecting an instance by moving from .instance(), which is not recursive to using .children() which is. But there doesn't seem to be a recursive version of .textContent()

Error message doesn't work when nested

image

Error message works when not nested

image
figma.connect(
 XDSSelector,
 'https://www.figma.com/design/qHKLpmJo1s50sJPJLiRM3C/XDS-Web-Library-(Copy)?node-id=160332-120780&m=dev',
 {
   props: {
     style: figma.enum('Style', {
       Input: 'input',
     }),
     size: figma.enum('Size', {
       Compact: 'compact',
     }),
     leftIcon: figma.instance('Left Icon'),
     isLabelHidden: figma.boolean('labelIsHidden', {
       true: true,
     }),
     errorMessage: figma.enum('State', {
       Error: figma.textContent('Error message'),
     }),
     warningMessage: figma.enum('State', {
       Warning: figma.textContent('Warning message'),
     }),
     successMessage: figma.enum('State', {
       Success: figma.textContent('Success message'),
     }),
     isDisabled: figma.enum('State', {
       Disabled: true,
     }),
   },
   example: props => (
     <XDSSelector
       value="<VALUE>"
       onChange={() => {
         /* onChange set value */
       }}
       buttonSize={props.size}
       buttonUse={props.style}
       buttonIcon={props.leftIcon}
       isDisabled={props.isDisabled}
       isLabelHidden={props.isLabelHidden}
       errorMessage={props.errorMessage}
       warningMessage={props.warningMessage}
       successMessage={props.successMessage}
     />
   ),
 },
);
ptomas-figma commented 3 days ago

Hi @vjeux thanks for the feature request! The team has been thinking on ways to improve the API to select children nodes and properties (and make it consistent across the different methods) so hopefully we'll have a good solution for this soon. Will keep you posted!

vjeux commented 3 days ago

Awesome, thanks for the update! Happy to help review any API and give feedback.