Icon instance type not being respected

オープン
#314 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
react, typescript

調査の方向性

Start by tracing how figma.instance<React.FunctionComponent> is rendered in the Code Connect preview, then compare it with the handling of icon instances passed as props. The issue does not name source files or tests, so locate the relevant preview and instance handling first. Done means the nested icon is shown as {ArrowRightMedium} instead of <ArrowRightMedium />.

索引モデルが issue の本文から書いたものです。

説明

API question

Hello,

I've setup my icon's example code to be react components. In the majority of my connections when icon's are being used in a prop it shows correctly as a react component but when its a child of a component it shows as a JSX element. I need it to always show as a react component not jsx.

Icon:

figma.connect(
    'https://www.figma.com/design/OMITTED/%E2%9D%96-00-Assets?node-id=OMITTED',
    {
        variant: {
            size: 'medium-24px',
            direction: '← left',
        },
        example: () => ArrowLeftMedium,
    }
);

Component connection:

figma.connect(
    IconButton,
    'https://www.figma.com/design/OMITTED/%E2%9D%96-02-Elements?node-id=OMITTED,
    {
        props: {
            ...other code,
            children: figma.nestedProps('icon-label-icon', {
                IconPrefix: figma.boolean('show-icon-L', {
                    true: figma.instance<React.FunctionComponent>('icon-left'),
                    false: undefined,
                }),
                IconSuffix: figma.boolean('show-icon-R', {
                    true: figma.instance<React.FunctionComponent>('icon-right'),
                    false: undefined,
                }),
            }),
        },
        example: ({ children, ...props }) => (
            <IconButton {...props}>
                {children.IconPrefix}
                {children.IconSuffix}
            </IconButton>
        ),
    }
);

In the code connect preview window:

Image

What I would like to be shown based on this example is the icon as {ArrowRightMedium} not <ArrowRightMedium />

Could I be directed on how to correct this? Thank you

主要言語
TypeScript
スター
1.6k
フォーク
126
PR マージ指標
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

figma/code-connect のほかの issue

figma/code-connect の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。