`figma connect preview` support for nested components props

Abierto
  • ¿Algo no está bien?
#412 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
54/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
figma, typescript
Área
developer-experience

Línea de trabajo

Start by locating the figma connect preview command and the code that builds the --inspect and --output json property lists. Check how nested component instances are represented in the Figma data and compare that with the current boolean output for “Assistive text.” Done means both preview formats report nested component properties accurately so they can be used to test templates.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

feature request

Recently I started to experiment with the CLI preview feature and notice it can only receive props that belong strictly to the component.

Often my team designers share components that rely on nested instances. See in the image below the "Assistive text" nested component:

Image

As you can see in the image below, the nested component value is a relevant prop for the component code:

Image

When I run the preview command with the --inspect flag, Assistive text is represented as a boolean, which is not the case - it's a nested component.

● components.figma.batch.json (198:33673)
  Name                      Type     Options                                      Default
  ------------------------  -------  -------------------------------------------  ---------
  [𝐓] Label                Text                                                  "Label"
  Trailing label (Default)  Boolean  true | false                                 true
  Assistive text            Boolean  true | false                                 false
  Leading label             Boolean  true | false                                 false
  Selection                 Variant  None | Selected | Partial                    "None"
  State                     Variant  Default | Hover | Active | Focus | Disabled  "Default"
  Error                     Variant  True | False                                 "False"

Similar output is generated with --output json:

[
  {
    "filePath": "components.figma.batch.json",
    "nodeId": "198:33673",
    "availableProperties": [
      {
        "name": "[𝐓] Label",
        "type": "TEXT",
        "default": "Label"
      },
      {
        "name": "Trailing label (Default)",
        "type": "BOOLEAN",
        "default": true
      },
      {
        "name": "Assistive text",
         "type": "BOOLEAN",
        "default": false
      },
      {
        "name": "Leading label",
        "type": "BOOLEAN",
        "default": false
      },
      {
        "name": "Selection",
        "type": "VARIANT",
        "variantOptions": [
          "None",                                                                                       "Selected",
          "Partial"
        ],
        "default": "None"
      },
      {
        "name": "State",
        "type": "VARIANT",
        "variantOptions": [
          "Default",
          "Hover",
          "Active",
          "Focus",
          "Disabled"
        ],
        "default": "Default"
      },
      {
        "name": "Error",
        "type": "VARIANT",
        "variantOptions": [
          "True",
          "False"
        ],
        "default": "False"
      }                                                                                           ]
  }
]

Being able to test the templates with the nested component values is quite relevant for our team to ensure these are working as we designed them.

Lenguaje dominante
TypeScript
Estrellas
1.6k
Forks
126
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de figma/code-connect

Todos los issues de figma/code-connect

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.