Object type prop support for React Dynamic code snippet

Đang mở
  • Có gì không ổn?
#348 3 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
developer-experience

Hướng nghiên cứu

Start with the React Code Connect examples in the issue and the linked nested-properties documentation to understand how boolean mappings and generated snippets are represented. The issue gives no repository files, tests, or implementation entry point to follow, so first locate the React snippet generation code and its tests. Done means a true object prop renders its nested values and a false value omits the prop, without requiring a combinatorial set of variants.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

feature request

Hello Figma team! Thanks for the Code Connect tool. We are currently setting it up for new Design System in our company to help developers and LLMs to better understand how components work in code. While Dynamic Code Snippets solve most of the cases for us, I have one feature request related to the mapping of object type props. I know this was already discussed, but I did not see my particular case, so wanted to bring it up.

Use case:
Imagine Checkbox component that can conditionally render Hint component. In our Design System we follow props composition approach where you can pass props of underlying component to the parent component. Looks something like this when implemented (all non-related props are omitted here and in rest of request):

const Checkbox = ({ hint, ...rest }) => 
  <div>
    {hint && <Hint {...hint} />}
    {/* rest of the component */}
  </div>

And when implemented it can be used like this:
With hint: <Checkbox hint={{ children: "Hint text" }} />
Without hint: <Checkbox />

In Figma, there is a hint boolean that controls if Hint component is rendered and (consequentially) if this components props are available for editing. I tried all three variants in the spoiler below and none of them worked:

Dynamic Code Snippets generating incorrect code

In nested properties example, Figma docs suggest using figma.nestedProperties with figma.boolean. While it works well with generic values, it fails when we need to pass a whole object as a prop.

We want hint: true case to generate snippet like this:
<Checkbox hint={{ children: "some text" }} />
While hint: false have hint prop in code completely omitted:
<Checkbox />
We can try to approach it in several ways using figma.boolean.
First option:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={props.hint}
    />
  ),
});

This example won’t work because of Figma Code Connect limitations. Example function here is just a template for Code Connect to put variables in, and it does not evaluate any JS inside of it. While it has access to the props.hint object, it does not know how to put the whole object in the snippet, resulting in next example generated:
<Checkbox />

Second option:
Knowing that Figma cannot put object into snippet, you might want to try something like this:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={{ children: props.hint?.children }}
    />
  ),
});

This example will work correct for the hint: true case and it will generate something like this:
<Checkbox hint={{ children: "some text" }} />
However, for the hint: false case, it will generate this snippet:
<Checkbox hint={{ children: undefined }} />
Which is not what we want.

Third version:
At the end you might want to try something like this:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={ props.hint ? { children: props.hint?.children } : undefined }
    />
  ),
});

But unfortunately, (since Figma does not evaluate any JS), it will only generate snippet like this for hint: true
<Checkbox hint={undefined ? { children: “some text” } : undefined}
and like this for hint: false:
<Checkbox hint={undefined ? { children: undefined } undefined} />

Considering all the options above does not work, the only option is to use variant:

// Variant: without hint
figma.connect(Checkbox, FIGMA_URL, {
  variant: { hint: false },
  props: {...},
  example: (props) => (
    <Checkbox ... />
  ),
});
// Variant: with hint
figma.connect(Checkbox, FIGMA_URL, {
  variant: { hint: true },
  props: {
    ...
    hint: figma.nestedProps("Hint", {
      text: figma.string("hint"),
    }),
  },
  example: (props) => (
    <Checkbox ...
      hint={{
        children: props.hint.text,
      }}
    />
  ),
});

This generates correct snippets and solves the problem for components that have only one of such nested components.

Problem:
We have components like FormField that has multiple nested components. variant approach does not scale well for such components because the number of variants grows exponentially with every new conditionally rendered component added.

Component:

const FormField = ({ hint, validationMessage ...rest }) => 
  <div>
    {hint && <Hint {...hint} />}
    {/* rest of the component */}
    {validationMessage && <ValidationMessage {...validationMessage} />}
  </div>

Code Connect file:

figma.connect(FormField, FIGMA_URL, {
  variant: {hint: false, validation: "none"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: true, validation: "none"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: false, validation: "invalid"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: true, validation: "invalid"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: false, validation: "valid"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: true, validation: "valid"},
  ...
});

While template files solve the issue, it's really cumbersome to write them only for such simple conditional cases.

Desired behaviour:
Ideally, we would have preferred objects to be rendered in the snippets correctly. Below is the example of desired behaviour with Checkbox component.

Code Connect file:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={props.hint}
    />
  ),
});

hint: true case:

<Checkbox hint={{ children: "text from figma" }} />

hint: false case:

 <Checkbox />

Sorry for the long post, just wanted to make sure we tried all other options and explain why it would be valuable to have it. Happy to discuss further.

Ngôn ngữ chính
TypeScript
Star
1.6k
Fork
126
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của figma/code-connect

Tất cả issue của figma/code-connect

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.