rename children React tag when in another component

[ericandrewscott]

Ran into a snafu (thought it's mostly how our components are built).

We connected our code for Avatar:

<Avatar text="AB" size="extra_large" />

Pretty simple, right? So for our AvatarGroup, we should just be able to do the wrapper component and then {children}, right? WRONG.

Because the code for AvatarGroup should look like:

<AvatarGroup overflow={4}>
  <AvatarGroupItem text="AB" border />
  <AvatarGroupItem text="AB" border />
  <AvatarGroupItem text="AB" border />
  <AvatarGroupItem text="AB" border />
  <AvatarGroupItem text="+3" border />
</AvatarGroup>

Any ideas on how to accommodate for that? In Figma, the child components in the Group are the same as the individual Avatar component 😢 😡

tldr; I'd like for a way to rename the component when it is specifically the child of another component.

• Code Connect CLI version 1.1.3
• Operating system OSX