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

How get "code connect" of nested component

Open jongjunpark opened this issue 1 year ago • 11 comments

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 image

  • Icon Component Code Connect image

  • TO-BE

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

jongjunpark avatar Jul 29 '24 09:07 jongjunpark

+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

quantizor avatar Jul 29 '24 18:07 quantizor

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

rrabherufigma avatar Jul 30 '24 15:07 rrabherufigma

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} />,
  },
);

jongjunpark avatar Aug 01 '24 02:08 jongjunpark

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!

tomduncalf-figma avatar Aug 05 '24 10:08 tomduncalf-figma

hi, @tomduncalf-figma

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

jongjunpark avatar Aug 08 '24 11:08 jongjunpark

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 image

  • at Inspect image

jongjunpark avatar Aug 09 '24 06:08 jongjunpark

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!

tomduncalf-figma avatar Aug 09 '24 09:08 tomduncalf-figma

Any update on a fix for this bug @tomduncalf-figma?

dstondin-mdsol avatar Nov 14 '24 10:11 dstondin-mdsol

Hey @dstondin-mdsol, we haven't fixed the bug in the playground yet. Will chat to the team and see if we can prioritize it.

slees-figma avatar Nov 14 '24 11:11 slees-figma

Running into this as well. Any timelines?

cgatian avatar Mar 14 '25 13:03 cgatian

+1 Running into this as well! Code connect for a nested component looks fine outside of the playground but not when in it.

chishancircle avatar Jul 17 '25 13:07 chishancircle