'/%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
ProjectUpdate y ProjectHealth
Actualizaciones escritas del estado de un proyecto: en buen camino, en riesgo o atrasado, quién la escribió y cuándo, qué cambió y qué viene después.
import { ProjectUpdate, ProjectHealth } from '@alea/ui';
Ejemplos
Actualizaciones de proyecto
Una actualización breve con su estado; el estado solo, para filas y encabezados.
Mobile app 2.0
En riesgoThe beta is out to 200 people. Sign in on Android still fails for about 3% of them, so the launch moves one week.
Next: fix the Android sign in, then a second beta round on Thursday.
Accessibility pass
En buen caminoEvery page passes AA in the four themes; AAA is done for the docs and two components are left.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Health
health - Size
size
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-bg…--alea-status-danger…--alea-status-success…--alea-status-warning…--alea-text…--alea-text-muted…
Type
--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…
Props
ProjectUpdate props
Una actualización escrita: estado, quién la escribió y cuándo, qué cambió y qué sigue.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
authorobligatoria | { name: string; src?: string | undefined; } | - | Quién lo escribió. |
childrenobligatoria | ReactNode | - | La actualización en sí: unas líneas, listas, enlaces. |
healthobligatoria | "none" | "onTrack" | "atRisk" | "offTrack" | - | Cómo va el proyecto con esta actualización. |
timeobligatoria | Date | - | Cuándo se escribió. |
className | string | - | Clases extra para el elemento raíz. |
footer | ReactNode | - | Reacciones, un botón para responder o un enlace al proyecto. |
headingLevel | 2 | 3 | 4 | 3 | El nivel de encabezado del título. Por defecto 3. |
project | ReactNode | - | El proyecto, cuando la actualización se muestra fuera de él; si no, el encabezado dice "Actualización del proyecto". |
ProjectHealth props
Cómo va un proyecto, con una marca de color y sus palabras: en buen camino, en riesgo, atrasado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
healthobligatoria | "none" | "onTrack" | "atRisk" | "offTrack" | - | onTrack, atRisk, offTrack o none (aún sin actualización). |
className | string | - | Clases extra para el elemento raíz. |
size | "sm" | "md" | 'md' | sm para filas y tablas, md (por defecto) para encabezados. |
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.
ProjectUpdate
- Variantes
healthnoneonTrackatRiskoffTrack- 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-update.alea-update-head.alea-update-title.alea-update-by.alea-update-author.alea-update-body.alea-update-foot
ProjectHealth
- Variantes
healthnoneonTrackatRiskoffTracksizesmmd- 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-health- Atributos data
data-size=smdata-health=nonedata-health=onTrackdata-health=atRiskdata-health=offTrack
Accesibilidad
- Una actualización es un artículo nombrado por su encabezado: el proyecto, o Actualización del proyecto.
- El estado es una marca y sus palabras, así que nunca depende del color.
- La hora es un elemento time con la fecha exacta; el texto muestra hace cuánto.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Va a los enlaces y acciones de la actualización |
Qué hacer y qué evitar
Hacer
- Empieza por lo que cambió desde la última actualización, luego lo que sigue.
- Di por qué un proyecto está en riesgo y qué lo devolvería a buen camino.
Evitar
- No marques un proyecto en riesgo sin una línea que diga por qué.
En Figma
ProjectUpdate con Health, y ProjectHealth con sus cuatro valores.