Nested props not syncing to code

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

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

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
developer-experience

Hướng nghiên cứu

Start by tracing how Code Connect 1.4.0 resolves figma.nestedProps for the conditional Badge in the supplied IconButton example. Reproduce the issue by changing Content or Variant in Figma and checking whether the generated code updates; done when both nested prop changes appear correctly in the generated code.

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

Mô tả

API question

While integrating Figma with Code Connect, I encountered an issue with prop synchronization for nested components.

I have an IconButton component that conditionally renders a nested Badge component when the Show Badge property is set to true.

The Badge component has the following props:

  • Variant (Standard / Dot)
  • Content (only displayed when Variant is set to Standard)

Issue
When updating any of the Badge props in Figma:

  • Changing the Content value
  • Switching the Variant between Standard and Dot

…the changes are not reflected in the generated code via Code Connect (the changes are reflected in Figma).

Expected behavior
Changes made to the nested Badge component props should be propagated and correctly reflected in the generated code.

Actual behavior
The Badge props remain unchanged in the code, even though they are updated in Figma.

Code Connect version: 1.4.0
OS: Ubuntu

Code snippet:

figma.connect(
  IconButton,
  "figma_url",
  {
    props: {
      disabled: figma.enum("State", {
        Disabled: true,
      }),
      showBadge: figma.boolean("Show badge"),
      badge: figma.boolean("Show badge", {
        true: figma.nestedProps("<Badge>", {
          variant: figma.enum("Variant", {
            Standard: "standard",
            Dot: "dot",
          }),
          badgeContent: figma.enum("Variant", {
            Standard: figma.string("Content"),
            Dot: undefined,
          }),
        }),
        false: { variant: undefined, badgeContent: undefined },
      }),

      icon: figma.nestedProps("<Icon>", {
        name: figma.instance<string>("Icon instance"),
      }),
    },
    example: (props) => (
      <IconButton
        disabled={props.disabled}
        showBadge={props.showBadge}
        badgeContent={props.badge.badgeContent}
      >
        <Icon>{props.icon.name}</Icon>
      </IconButton>
    ),
  },
);
Image
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.