'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Flujo de trabajo
IssueList
Filas densas de trabajo agrupadas por estado: prioridad, clave, estado, título, etiquetas, fecha límite y quién lo tiene, con navegación por teclado y selección.
import { IssueList, StatusIcon, PriorityIcon } from '@alea/ui';
Ejemplos
Agrupadas por estado
Filas agrupadas bajo cada estado con su conteo. Las flechas recorren, Enter abre; activa la selección para elegir varias.
En curso1
En revisión1
Por hacer2
Pendientes1
Hecho1
Estado y prioridad
Los anillos y las barras solos; con label son imágenes con el nombre de su valor, para cuando no hay texto al lado.
backlog
todo
progress
review
done
canceled
urgent
high
medium
low
none
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Group By Status
groupByStatus - Selection Mode
selectionMode
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-solid…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-border-strong…--alea-status-danger…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-family-mono…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-regular…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…
Props
IssueList props
Filas densas de trabajo: estado, prioridad, clave, título, etiquetas, fecha límite y quién lo tiene. Agrupadas por estado; las flechas recorren cada grupo, Enter abre.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
issuesobligatoria | Issue[] | - | Las incidencias: id, título, estado y, opcionales, clave, prioridad, responsable, etiquetas, fecha límite y href. |
aria-label | string | - | Nombre de la lista. Por defecto "Tareas". |
className | string | - | Clases extra para el elemento raíz. |
groupByStatus | boolean | true | Agrupa las filas por estado, cada grupo bajo un título con su conteo. Por defecto true. |
onOpen | ((issue: Issue) => void) | - | Se llama al abrir una fila (Enter o clic), cuando las filas no tienen href. |
onSelectionChange | ((ids: Set<string>) => void) | - | Se llama con los ids seleccionados. |
selectionMode | "multiple" | "none" | 'none' | Permite seleccionar filas (aparecen casillas). |
StatusIcon props
El estado de un trabajo como un anillo pequeño: punteado para pendientes, vacío para por hacer, llenándose para en curso, a la mitad para revisión, con check para hecho, tachado para cancelado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
statusobligatoria | "done" | "progress" | "backlog" | "todo" | "review" | "canceled" | - | backlog, todo, progress, review, done o canceled. |
className | string | - | Clases extra para el elemento raíz. |
label | boolean | - | Le da nombre para lectores de pantalla (cuando está solo). Por defecto: decorativo, con el estado dicho en texto cerca. |
progress | number | 0.5 | Para en curso: cuánto avanzó, de 0 a 1 (el anillo se llena). Por defecto 0.5. |
size | number | 14 | Tamaño en px. Por defecto 14. |
PriorityIcon props
La prioridad como barras de señal (baja, media, alta), un cuadrado relleno con ! para urgente y un guion para ninguna.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
priorityobligatoria | "none" | "medium" | "urgent" | "high" | "low" | - | none, urgent, high, medium o low. |
className | string | - | Clases extra para el elemento raíz. |
label | boolean | - | Le da nombre para lectores de pantalla. Por defecto decorativo. |
size | number | 14 | Tamaño en px. Por defecto 14. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
IssueList
- Variantes
selectionModemultiplenone- Estados
- HoverFocusSelected
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-issues.alea-issues-group.alea-issues-head.alea-issues-count.alea-issues-list.alea-issue.alea-issue-check.alea-issue-key.alea-issue-title.alea-issue-meta.alea-issue-label.alea-issue-due- Atributos data
data-hrefdata-ondata-overdue
StatusIcon
- Variantes
statusdoneprogressbacklogtodoreviewcanceled- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-status-icon.alea-status-ring.alea-status-fill.alea-status-solid.alea-status-mark- Atributos data
data-status=tododata-status=progressdata-status=reviewdata-status=donedata-status=canceled
PriorityIcon
- Variantes
prioritynonemediumurgenthighlow- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-priority-icon.alea-priority-urgent.alea-priority-mark.alea-priority-dash.alea-priority-on.alea-priority-off
Accesibilidad
- Cada grupo de estado es una lista en grid bajo un título con su conteo; las flechas recorren las filas, Enter abre una.
- Una fila lleva como nombre todo lo que muestran sus íconos: clave, título, estado, prioridad, responsable y fecha límite.
- Los íconos de estado y prioridad son decorativos dentro de las filas; con label se vuelven imágenes con el nombre de su valor.
- Las fechas vencidas van en rojo y siguen diciendo la fecha, nunca solo color.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra en un grupo, luego pasa al siguiente |
| Arriba o Flecha abajo | Fila anterior o siguiente |
| Enter | Abre la fila |
| Espacio | Selecciona la fila (con selectionMode) |
Qué hacer y qué evitar
Hacer
- Mantén los títulos cortos y pon los detalles en el propio elemento.
- Agrupa por el campo que la gente revisa primero, normalmente el estado.
Evitar
- No escondas el estado solo detrás de un color.
- No pongas en las filas acciones que compitan con abrirlas.
En Figma
IssueRow con Status, Priority, Labels y Assignee; StatusIcon y PriorityIcon como componentes aparte.