El enfoque de trabajo
Component Canvas construye una superficie de inspección a pantalla completa alrededor de componentes ya existentes. Agrupa variantes compatibles y estados útiles para que los diseñadores comparen de un vistazo y después interactúen con los controles reales. La implementación de los componentes permanece independiente del lienzo.
El flujo define con precisión qué significa comparar. Al comparar tamaños se mantienen texto, estilo y datos; al comparar estilos cambia solo el estilo. También preserva portales nativos, foco y desplazamiento anidado, de modo que la vista previa debe funcionar más allá de una captura de su estado predeterminado.
Entregables esperados
- Una ruta o entrada de lienzo aislada con los componentes solicitados.
- Grupos de variantes con nombre, cobertura registrada y omisiones explicadas.
- Un informe de archivos modificados, controles ejecutados, decisiones y comportamientos sin probar.
Del brief a la revisión
- 01Monta un ejemplo seguro
Lee las API públicas y convenciones del proyecto. Usa datos de prueba, mocks o callbacks existentes para impedir escrituras reales antes de montar un componente.
- 02Crea grupos comparables
Añade variantes compatibles en grupos coherentes. Cambia una dimensión cada vez y conserva el comportamiento real deshabilitado, enfocado e interactivo.
- 03Verifica el lienzo alrededor de los componentes
Prueba desplazamiento, zoom, ajuste a la vista y navegación por teclado junto con scroll anidado y portales nativos. Persiste solo la cámara y confirma que restablecer preserva el estado de la vista previa.