parent
85ff2eaaf5
commit
b81ffeaf41
@ -0,0 +1,69 @@
|
||||
---
|
||||
title: UIX — auditoría individual de Progress y Meter
|
||||
type: notes
|
||||
audience: human + agent
|
||||
authority: process — evaluación, no contrato de componente
|
||||
status: reviewed
|
||||
---
|
||||
|
||||
# Progress y Meter — auditoría de la fase 6
|
||||
|
||||
Fecha: 2026-09-23. Alcance autorizado por la continuidad del plan de calidad:
|
||||
evaluar duplicación y defectos sin cambiar la dinámica de los componentes. Se
|
||||
releyeron las cuatro guías de pre-flight indicadas en `AGENTS.md`. El árbol
|
||||
`web/` queda excluido.
|
||||
|
||||
## Pre-flight y referencias
|
||||
|
||||
| Aspecto | Progress | Meter | Decisión |
|
||||
| ----------------- | -------------------------------------- | -------------------------------------- | ---------------------------------------- |
|
||||
| Propósito y rol | Finalización de tarea, `progressbar` | Medición de rango, `meter` | Mantener contratos separados |
|
||||
| Valor desconocido | `null` omite `aria-valuenow` | No admite `null` | No unificar providers |
|
||||
| Estado | `indeterminate/loading/loaded` | `below/optimum/above` | Conservar clasificación en Soma |
|
||||
| Partes | Provider, Label, ValueText, Indicator | Provider, Indicator | No fabricar partes para lograr simetría |
|
||||
| Eidos | `size=xs…xl`, `shape=linear/circular` | `size=xs…xl`, `shape=linear/circular` | Mantener wrappers pequeños y CSS propios |
|
||||
| Langs/Sema | Un fallback de nombre; sin evento Sema | Un fallback de nombre; sin evento Sema | Mantener catálogos separados |
|
||||
|
||||
| Referencia oficial | Equivalente | Diferencia relevante para UIX |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| [WAI-ARIA APG, rangos](https://www.w3.org/WAI/ARIA/apg/practices/range-related-properties/) y [Meter](https://www.w3.org/WAI/ARIA/apg/patterns/meter/) | Roles `progressbar` y `meter` | El valor ARIA conocido debe estar dentro del rango; sólo `progressbar` puede omitirlo cuando es indeterminado |
|
||||
| [Radix Progress](https://www.radix-ui.com/primitives/docs/components/progress) | Root e Indicator | No ofrece Meter ni mínimo configurable en Progress |
|
||||
| [Ark UI Progress Linear](https://ark-ui.com/docs/components/progress-linear) | Root, Label, ValueText, Track y Range | UIX pinta el track y el fill en Indicator, sin parte Track separada |
|
||||
| [Bits UI Progress](https://bits-ui.com/docs/components/progress) y [Meter](https://bits-ui.com/docs/components/meter) | Roots separados | Bits ya tiene Meter; sus labels y fills se componen externamente |
|
||||
| [React Aria ProgressBar](https://react-aria.adobe.com/ProgressBar) y [Meter](https://react-aria.adobe.com/Meter) | Dos componentes de rango | Ofrece formato de valor y porcentaje como render prop; UIX usa `valueText` y variables CSS |
|
||||
|
||||
Morfo declara roles, partes y atributos; Soma calcula estados, porcentajes y
|
||||
nombre accesible; Eidos resuelve talla/forma y pinta; Langs aporta el fallback.
|
||||
No hay split container/item, variantes ni color intent nuevos en esta auditoría.
|
||||
Las diferencias de partes y de estado impiden una extracción de provider común
|
||||
sin oscurecer contratos. El alcance aquí es revisar y corregir documentación;
|
||||
ninguna API o receta cambia.
|
||||
|
||||
## Fichas individuales
|
||||
|
||||
| Componente | Evidencia de duplicación | Calidad y riesgo | Pruebas existentes | Disposición |
|
||||
| ---------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Progress | Repite con Meter la fórmula de porcentaje, el patrón de wrapper Eidos y algunas reglas de talla/anillo | El estado indeterminado, la orientación, el Label y ValueText son propios. La documentación de Soma decía `value=0` por defecto aunque el wrapper y el tipo usan `null` | Tres tests cliente del provider; `component:audit --only progress` PASS | Corregir el default documentado. No extraer una fórmula tan pequeña ni introducir una capa CSS compartida sin reducción neta y comparación visual |
|
||||
| Meter | Misma fórmula y estructura básica de wrapper; umbrales y cuatro porcentajes son propios | La comparación con Bits UI estaba obsoleta. La prueba actual espera `aria-valuenow=150` con `max=100`, mientras el CSS visual se satura en 100; APG pide que el valor ARIA esté dentro del rango | Dos tests cliente del provider, incluido el caso fuera de rango; `component:audit --only meter` PASS | Corregir la comparación documental. Registrar el desacuerdo ARIA como candidato funcional separado, sin cambiar valor ni tests en este lote |
|
||||
|
||||
El caso fuera de rango también es posible en Progress: `percentage` se satura,
|
||||
pero Morfo emite el valor original como `aria-valuenow`. Decidir si se valida,
|
||||
se satura o se rechaza el valor requiere un contrato explícito para ambos
|
||||
componentes y pruebas de consumidor; hacerlo como «limpieza» alteraría el
|
||||
comportamiento ya observado. El caso `min >= max` tiene la misma necesidad de
|
||||
decisión. No se declara corregido.
|
||||
|
||||
La repetición útil es escasa: extraer `Math.max(0, Math.min(100, …))` obligaría
|
||||
a crear un helper e imports para dos llamadas, sin una reducción material. Los
|
||||
selectores CSS parecidos usan nombres de tokens, jerarquías DOM y estados
|
||||
distintos; un selector combinado acoplaría dos recetas sin simplificar su
|
||||
mantenimiento. Los wrappers visuales son suficientemente pequeños.
|
||||
|
||||
## Verificación de esta tanda
|
||||
|
||||
- Tras las correcciones documentales: `docs:check` — 0 errores, 0 avisos.
|
||||
- Tests dirigidos de los dos providers — 2 archivos, 5 tests, todos pasan.
|
||||
- `component:audit -- --only progress` y `--only meter` — PASS cada uno.
|
||||
- Sin cambios de producción, CSS, pruebas, API, DOM ni árbol `web/`; ahorro de
|
||||
código de producción: **0 líneas**. Esta auditoría evita una extracción sin
|
||||
beneficio demostrado y deja dos discrepancias de documentación corregidas.
|
||||
Loading…
Reference in new issue