Dudas sobre inconsistencias al usar el pattern empty-message

[damianpacheco]

Estamos implementando una empty screen que necesita sair a producción ASAP ya que la próxima semana comienza el lock de deploy y queremos asegurarnos de que estamos tomando la referencia correcta.

El tema es el siguiente:

Para constuir la empty screen agarramos este pattern en su vaiante with image y lo incluimos dentro del pattern page dentro de su body.

Hasta ahí todo parece estar ok, el tema es que cuando agregamos el contenido y probamos como se ve, pasan 3 cosas:

1- Una vez que el texto de la descripción pasa a ocupar 2 lineas, se centra automáticamente toda la caja de texto. Se debería centrar en función del viewport mobile/desktop y no por la extensión del contenido, cierto?

Para solucionar esto @marcosdellavecchia overrideo lo definido en el componente y al p dentro del div de arriba, le agregó textAlign: "left".

Entonces pasó de verse de esta forma:

A verse de esta otra:

2- Los tamaños definidos en el pattern disponible en storybook difieren de lo disponible en figma

En storybook el componente tiene un title que tiene el mismo tamaño que el que se utiliza para el title-page (h1/2rem) y en figma tiene un tamaño inferior (1.125rem).

El tamaño del texto para el link en storybook es de 0.875rem. En el pattern de figma, el texto para el link está definido en 1rem. Por otro lado en storybook el link para la secondary action figura en su variante underline y en el pattern de figma no tiene underline.

Storybook:

Figma:

0/8aa8a4e0-a61c-4040-a209-65a36127d82f)

3- Cuando vamos a buscar una referencia en producción, vemos que también hay inconsistencias.

En este caso cuando vemos las empty screens productivas el title tiene un tamaño de 1.5rem, esto genera una tercer variante , teniendo en cuenta que en storybook tiene definido 2rem y en figma tiene definido 1,125rem.

Ejemplo Pago Nube y Productos:

Por otro lado, relacionado a este 3er punto de las empty en producción, notamos al menos en el caso de la de Pago nube que no importan nada de Nimbus, están utilizando componentes de @tiendanube/components. ¿Que sería lo correcto?

Dicho todo esto, nosotros estamos avanzando en la implementación con los patterns disponibles en storybook, con el overrideo de css para que el texto quede alineado a la izquierda en desktop. Pero teniendo en cuenta las inconsistencias mencionadas va a diferir de lo documentado en Figma y de lo ya implementado.

Estamos ok en avanzar de esta forma? Cual es la fuente de verdad para el caso de la empty-screen? Figma? Storybook? Producción?

¿Se podrá revisar el comportamiento del centrado de la caja de texto en desktop para resolver esto a nivel componente y no necesitar overridear estilos?

[juanchigallego]

Hola @damianpacheco !

Gracias por reportar este issue. Se trata de un bug con el componente EmptyMessage. Recién lancé una nueva versión del paquete corrigiendo estos bugs. Pueden instalar @nimbus-ds/patterns@1.7.1 o @nimbus-ds/empty-message@1.2.3 para tener la última versión con los ajustes.
Ahora, tanto el texto como los botones deberían alinearse correctamente en mobile y desktop, y dependiendo de si tiene ilustración o icono.

Por otro lado, también ajusté los tamaños de texto para que sean consistentes con la versión que tenemos en Figma, que debería ser nuestra fuente de verdad, junto con Storybook. Ahora no deberías ver diferencias entre ambas versiones.

Las diferencias que se ven con el layout de la versión que viene del paquete @tiendanube/components son porque ese paquete corresponde a Nimbus 1, y deberíamos actualizarlas para que usen la versión de Nimbus 2, @nimbus-ds/patterns.