How get "code connect" of nested component

figma / code-connect

A tool for connecting your design system components in code with your design system in Figma

MIT License

946 stars 67 forks source link

How get "code connect" of nested component #108

Open jongjunpark opened 3 months ago

jongjunpark commented 3 months ago

My Button leadingIcon or trailingIcon has Icon component (this is nested component) but, I want to see the "code connect" of Icon component without clicking this.

My code

figma.connect(
Button,
"https://www.figma.com/...",
{
props: {
  text: figma.string("text"),
  icon: figma.enum("icon", {
    leading: "leading",
    trailing: "trailing",
  }),
  iconName: figma.instance("iconName"),
},
example: ({ text, icon, iconName }) => (
  <Button
    text={text}
    variant="accent"
    leadingIcon={iconName}
    trailingIcon={iconName}
    icon={icon}
  />
),
},
);

Button Component Code Connect
Icon Component Code Connect

TO-BE

<Button
...
leadingIcon={<Plus />}
trailingIcon={<Plus />}
/>

quantizor commented 3 months ago

+1 to this, there are some other ticket comments that have said connecting the icon components would cause the Dev Mode view of when they're used to be updated, but I haven't seen this in practice.

Example: https://github.com/figma/code-connect/issues/98#issuecomment-2243084557

rrabherufigma commented 3 months ago

Hi @jongjunpark , can you share the Code Connect code for the icon please? If you prefer to keep private, please share via Figma support

jongjunpark commented 3 months ago

Hi @jongjunpark , can you share the Code Connect code for the icon please? If you prefer to keep private, please share via Figma support

Hi @rrabherufigma , This is the only code for the icon Code Connect.

figma.connect(
  Plus,
  "https://www.figma.com/...",
  {
    props: {},
    example: (props) => <Plus {...props} />,
  },
);

tomduncalf-figma commented 3 months ago

Hey @jongjunpark, are you on the latest version of Code Connect (1.0.3)? I'd expect this to work if you are. I can help you debug if not!

jongjunpark commented 3 months ago

hi, @tomduncalf-figma

I am using version Code Connect ~~(1.0.3)~~ (1.0.4)

jongjunpark commented 3 months ago

I resolved the issue. I confirmed that what appears as a "nested component" only occurs in the "component playground". Please compare the attached screenshots. It would be great if this could be fixed to display the same in the "component playground" as well.

at component playground
at Inspect

tomduncalf-figma commented 3 months ago

Ah, looks like we have a bug in the component playground! Thanks for raising this and sorry for the confusion, we will get it fixed!