K
KoreUI

Changelog

v2.2

Qué ha cambiado desde la 1.7, y qué hay que mirar antes de actualizar.

Cómo actualizar

La 2.0 es una versión mayor: hay cambios visibles que no se pueden desactivar.

Terminal 
composer require kore-ui/kore-ui:^2.2.0
composer require kore-ui/kore-ui:^2.2.0

Ninguno de los cambios de abajo es gratuito: cada uno arregla algo que estaba medido y roto. Si tienes tests que buscan por el texto de la interfaz, empieza por ahí — la 2.0 pasó todos los textos a español.

v2.2.0 — La documentación, y los once defectos que sacó a la luz

No había plan de tocar código: el trabajo era cerrar el hueco entre lo que hacen los componentes y lo que cuentan sus páginas. Pero comprobar prop a prop si la tabla dice la verdad es justo lo que destapa las promesas que no se cumplen.

Cambia: form.translations.star y stars desaparecen. El nombre de cada estrella del rating sale ahora de rating_stars, que es la frase entera con dos marcadores (':n de :total estrellas'): por trozos no se traduce, porque en otro idioma el orden no es el mismo. Y las filas de un repeater con size="md" quedan 2 px más altas, ahora que size llega a alguna parte.

Ajustes que no se aplicaban jamás

Las props traían su valor por defecto escrito, así que el ?? config(...) de la vista no llegaba a mirar: el ?? solo dispara si el valor es null. Si tenías alguno de estos puestos en config/kore-ui.php y no notabas nada, ahora empezarán a hacer efecto:

  • form.maskable.slot_char, auto_clear y emit_formatted
  • form.color_picker.allow_custom
  • shell.sidebar.smart y navigate — el prop en la etiqueta sí funcionaba; lo que no llegaba a los items era la configuración

Textos que no se podían traducir

  • El medidor de fuerza de password hablaba en inglés —«Weak», «One uppercase letter»— y su botón del ojo decía «Show password». Vivían dentro del JavaScript y de una expresión de Alpine, que es donde no miraba el cepo de textos. Los once salen ahora de form.translations.
  • «Ordenar por», «Quitar filtro», «Quitar orden» y el «de» que separaba los números de las estrellas: los cuatro iban pegados a una interpolación, que es justo lo que el cepo daba por bueno.
  • toggle_period («Cambiar entre AM y PM») llevaba dos versiones en la configuración sin que la leyera nadie: los botones AM/PM se anunciaban «AM» y ya.

Y lo demás

  • size en repeater y los atributos de range en modo doble no llegaban a ninguna parte.
  • Seis botones de solo icono seguían sin nombre accesible, y el chevron que despliega una fila del DataTable tampoco decía si estaba abierta.
  • Dos props declaradas que no leía nadie —inline en field, perPage en table.pagination— fuera de la vista y de su documentación.

v2.1.0 — El editor

Texto enriquecido sin dependencias, y la cosecha de compararnos con TallStackUI 4.x.

  • editor — 6,5 kB gzip, sin una sola dependencia. El saneado vive también en el servidor (HtmlSanitizer, un cast de Eloquent y dos reglas de validación), y puede guardar markdown en vez de HTML, con lo que el problema del XSS desaparece de raíz. Trix, la alternativa que barajábamos, pesa 49 kB.
  • prose — el otro lado: publica lo que guardó el editor, saneando y con los estilos puestos.
  • Siluetas por componente — card, stats, table, stepper y chart saben dibujarse vacíos con skeleton.
  • Banderas de aspecto en cascada — bordered, shadow, padding y compact, hasta dejar la librería entera en plano desde la configuración.
  • Cuatro formas de pie en el DataTable — default, simple, compact y minimal.
  • readonly en once componentes que no lo tenían.

Al actualizar a la 2.1

  • dist/ tiene ahora dos archivos. Quien copie el bundle a mano necesita también dist/kore-ui-editor.js; con no hay que tocar nada.
  • bordered en <x-kore::table> ahora hace algo: era un prop declarado que no leía nadie, así que quien lo tuviera escrito verá aparecer las líneas verticales.
  • En esa misma tabla, density manda sobre compact. Solo cambia si escribes los dos a la vez.

v2.0.0 — La auditoría

La librería entera, probada en un navegador de verdad.

Seis lotes de componentes probados uno a uno en Chrome de escritorio y en WebKit sobre iPhone, midiendo el comportamiento real en vez de asertar clases: 67 defectos corregidos, dos barridos transversales y una suite E2E que pasa de 0 a 460 pruebas.

Tres hilos recorren casi todos los defectos:

  1. Lo que el JavaScript escribe y el servidor no emite, el morph se lo lleva. Costó un árbol muerto, un splitter deshecho, un carrusel en blanco y varios componentes que dejaban de enterarse de sus propios datos.
  2. Un id que cambia en cada render rompe el morph, y de ahí salieron siete defectos del lote de formulario a la vez: el desplegable, el calendario y el selector de color se cerraban solos en cuanto cualquier otro componente de la página hablaba con el servidor.
  3. El color de la paleta es un color de FONDO. Usado como texto sobre su propio tinte no llega a AA, y así estaba en media librería.

Qué rompe al actualizar

Lo que hay que mirar antes de subir a la 2.0.

Todos los textos por defecto pasan a español y salen de la configuración. Search... → Buscar..., No options found → Sin resultados, Light / Dark / System → Claro / Oscuro / Sistema… Están en kore-ui.form.translations, kore-ui.ui.translations y kore-ui.datatable.translations, así que se revierten por configuración sin publicar vistas. Si tenías tests que buscaban el texto en inglés, hay que actualizarlos.

  • Las variantes soft, outline, ghost y link cambian de tono en toda la librería: usan los tokens -text nuevos, más oscuros en claro y más claros en oscuro. Es el cambio visible más extendido. Se revierte apuntando los tokens -text al color base.
  • Un modal ya no centra el texto de su contenido. No hay interruptor: se arregla poniendo text-center en el propio contenido.
  • El velo de los overlays usa --kore-backdrop. Quien lo personalizara sobrescribiendo --kore-fg tiene que mover el cambio al token nuevo.
  • <x-kore::tab> y <x-kore::stepper> sin selected ya seleccionan el primer item. Antes salían sin contenido.
  • Un Escape con un panel abierto dentro de un modal ya no cierra las dos capas. Hacen falta dos pulsaciones.
  • La raíz de <x-kore::tree> lleva wire:ignore. Quien pintara contenido propio dentro del árbol contando con que el servidor lo actualizara tiene que sacarlo fuera.
  • <x-kore::alert> ya no lleva role="alert" por defecto — interrumpía al lector aunque la alerta llevara ahí desde el principio. Para pedirlo: live="assertive".
  • <x-kore::loading> es role="status" y añade un texto oculto cuando no tiene uno visible. Con :announce="false" se calla.
  • Los indicadores del carrusel ya no son role="tab", y el panel del tooltip ya no lleva role="tooltip". Quien los localizara por rol en sus tests tiene que cambiar el selector.
  • <x-kore::shell> pinta un enlace de «Saltar al contenido» como primer elemento, y su <main> recibe id y tabindex="-1". Se quita con :skip-link="false".
  • Las estrellas de <x-kore::rating> ocupan 24×24 —el mínimo táctil de la WCAG 2.2— y el conjunto envuelve si no cabe: un rating de diez estrellas es más ancho que antes.
  • <x-kore::boolean> dice «Sí» y «No» en vez de «true» y «false».
  • Nada anima con prefers-reduced-motion activo: ni stats, ni los puntos, ni el pulso, ni el brillo del esqueleto. El spinner es la excepción — se ralentiza en vez de apagarse, porque es la única señal de que algo pasa.

Correcciones

v2.0.1 y v1.7.1.

  • v2.0.1 — La búsqueda global del DataTable moría en MySQL. La cláusula salía como ESCAPE '\', y dentro de un literal de MySQL esa barra escapa la comilla siguiente y deja la cadena sin cerrar: se caía toda tabla con columnas searchable. No se veía porque la suite corría contra SQLite. El carácter de escape pasa a ser !, que no significa nada en ninguno de los tres motores.
  • v1.7.1 — El bundle iba un día por detrás de las fuentes. repeater, key-value, transfer y order-list existían en el paquete y no en el navegador. Ahora el CI compara el dist/ versionado con el entry.
Cargando