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

Single import statment with multiple components :: Nested instances

Open Meloyski opened this issue 1 year ago • 2 comments

Whenever using a nested instance of another component, the example that is pushed out provides two import statements: one for the original component and one for when the nested instance is being used. Is there a way to combine these into the same import statement?

Icon Component

import { Icon } from `@library`;

figma.connect(Icon, 'https://...', {
  props: ...,
  example: (props) => <Icon name="name" />,
});

Button Component

import { Button } from `@library`;

figma.connect(Button, 'https://...', {
  props: {
    label: figma.string('Label'),
    icon: figma.boolean('Show Icon', {
       true: figma.instance('Icon'),
       false: undefined,
    })
  }
  example: ({ label, icon }) => <Button icon={icon}>{label}</Button>,
});

Button Output in Figma

import { Button } from `@library`;
import { Icon } from `@library`;

<Button icon={<Icon name="name"} >
  Hey
</Button>

Is there a way that this can be combined into a single statement, dynamically?

import { Button, Icon } from `@library`;

...

Sorry, I couldn't find any information on it. Thanks! <3

Meloyski avatar Jun 20 '24 17:06 Meloyski

Hey @Meloyski, thanks for reporting this! There's currently no way to achieve this, just wanted to let you know that we're looking into it.

karlpetersson avatar Jun 25 '24 17:06 karlpetersson

Just commenting to +1 wanting this feature. 😃

Not a deal breaker by any means, but would be nice if this displayed Screenshot 2024-07-02 at 10 38 13 AM like this

import {
  Button,
  ContainedList,
  ContainedListItem,
  Search,
} from '@carbon/react';

alisonjoseph avatar Jul 02 '24 15:07 alisonjoseph