Flujo de trabajo

ActivityFeed y PropertyList

Lo que le pasó a un elemento, de personas y agentes, con comentarios y tiempos relativos, y sus propiedades en un panel lateral.

import { ActivityFeed, PropertyList } from '@alea/ui';

Ejemplos

Una tarea

Las piezas juntas: el título y la descripción, lo que pasó (personas y un agente) y las propiedades en un panel lateral.

APP-142

Render the home screen before the full sync

Show what we have as soon as the minimum state is there, instead of a spinner until everything loads.

Ana Rivas created the issue · hace 42 minutos
TriageAgente added the labels Performance and Mobile · hace 40 minutos
Bruno Díaz · hace 12 minutos
Right now the spinner never ends on a cold start. Can we render first and load the rest later?
AssistantAgente moved this from Todo to In progress · hace 2 minutos

Propiedades

Status: In progress
Priority: Urgent
Assignee: Ana Rivas
Cycle: Cycle 144
Labels: PerformanceMobile

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-strong…
--alea-accent-subtle…
--alea-border…
--alea-border-strong…
--alea-surface…
--alea-text…
--alea-text-muted…

Space

--alea-space-2…
--alea-space-3…
--alea-space-4…

Radius

--alea-radius-md…
--alea-radius-sm…

Type

--alea-font-size-sm…
--alea-font-weight-medium…

Props

`ActivityFeed` props

Lo que le pasó a un elemento, en orden: personas y agentes, cambios y comentarios, con tiempos relativos. Una lista que un lector de pantalla lee de arriba abajo.

Prop	Tipo	Por defecto	Descripción
`events`obligatoria	`ActivityEvent[]`	-	Los eventos a listar: quién hizo qué, cuándo y cualquier comentario.
`aria-label`	`string`	-	Nombre del feed. Por defecto "Actividad".
`className`	`string`	-	Clases extra para el elemento raíz.

`PropertyList` props

Las propiedades de un elemento en un panel lateral: la etiqueta a la izquierda, el valor (a menudo un selector en línea) a la derecha.

Prop	Tipo	Por defecto	Descripción
`items`obligatoria	`{ label: ReactNode; value: ReactNode; icon?: ReactNode; }[]`	-	Pares de etiqueta y valor: el valor puede ser cualquier nodo (un selector, una insignia, un avatar y un nombre).
`className`	`string`	-	Clases extra para el elemento raíz.
`title`	`ReactNode`	-	Un título arriba.

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.

`ActivityFeed`

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-activity.alea-activity-item.alea-activity-avatar.alea-activity-agent.alea-activity-body.alea-activity-line.alea-activity-tag.alea-activity-time.alea-activity-comment

`PropertyList`

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-props.alea-props-title.alea-props-list.alea-props-row

El feed es una lista ordenada, de lo más antiguo a lo más nuevo, así se lee de arriba abajo; los tiempos son elementos time con la fecha exacta.
Los agentes se marcan con una palabra, no solo con un ícono.
Las propiedades son una lista de descripciones: cada etiqueta se lee con su valor.

Teclado

Tecla	Acción
`Tab`	Recorre los enlaces y selectores del feed y de las propiedades

Qué hacer y qué evitar

Hacer

Escribe las acciones como frases cortas después del nombre: movió esto a En curso.
Muestra los comentarios completos; pliega las rachas largas de eventos del sistema.

Evitar

No mezcles personas y agentes sin decir quién es quién.

En Figma

ActivityItem con Type (Event, Comment, Agent) y PropertyRow.