'/%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 trabajoAlea Pro
ReviewChanges
Una revisión al estilo de una combinación de lo que otra persona cambió mientras trabajabas: Base, Mío y Suyo lado a lado, cada cambio numerado con dónde está, quién lo hizo y cuándo, la elección entre Mío, Suyo o Ambos, aplicar todos, deshacer, rehacer y puntos guardados a los que volver.
import { ReviewChanges } from '@alea-design/pro';
Ejemplos
Revisar cambios
Base, Mío y Suyo para cada cambio; elige, aplica todos, deshaz y rehaz. El componente guarda las elecciones cuando no las pasas.
Expediente 1042
Las tres personas del escenario del expediente: tres cambios en el mismo registro, con Ambos solo en los campos de texto.
Seguridad y efecto
Un cambio con safety pide un segundo paso explícito y Aplicar todos nunca lo aplica. El espacio de efecto muestra lo que causaría elegir.
Deshacer, rehacer e historial
Lleva las elecciones en tu estado para deshacer, rehacer y volver a un punto guardado de antes o después de combinar.
Lo que pasas y lo que recibes
ReviewChanges no sabe nada de tus datos ni de tu red. Le pasas cambios: un id, dónde está (pantalla, registro, campo), su tipo (agregado, quitado, modificado), los valores base, mío y suyo, el autor y la hora. Recibes onResolve({ changeId, choice }) por cada elección y onApplyAll({ choice, changeIds }) tras la confirmación.
Sin choices el componente guarda las elecciones y ofrece deshacer y rehacer. Con choices las tienes tú: llama a onUndo y onRedo y lee canUndo y canRedo, así puedes llevarlas en tu propio historial.
La forma de un cambio
| Campo | Qué es |
|---|---|
| id | Un id estable para el cambio. |
| location | Dónde está: { screen, record, field }, leído de lo más amplio a lo más estrecho. |
| kind | added, removed o modified: lo que hizo la otra persona. |
| valueKind | text (por defecto), number, flag o list. |
| base, mine, theirs | Los tres valores: de lo que partieron ambos, el tuyo y el suyo. |
| author, at | Quién hizo el cambio ({ id, name }) y cuándo. |
| safety | confirm: elegir pide un segundo paso explícito y Aplicar todos lo omite. |
| hidden | Los valores no se muestran, listan ni aplican; el cambio solo cuenta en la línea de resumen. |
| renderValue | Dibuja un valor a tu manera: (value, { side, change }) devuelve un nodo. |
| effect | Un efecto calculado dibujado bajo los valores. |
Tipos de valor
| valueKind | Se ve como | Ambos |
|---|---|---|
| text | Texto simple, con los saltos de línea | Sí |
| list | Una lista con viñetas | Sí |
| number | Con el formato del idioma | No |
| flag | Activado o desactivado | No |
Puntos del historial
Pasa history con un punto guardado antes de combinar y otro después, y onRestore recibe el punto cuyo Restaurar se pulsó. Restaurar significa dejar tus elecciones como las tenía ese punto, así que lleva las elecciones en tu propio estado.
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…--alea-accent-subtle…--alea-bg…--alea-border…--alea-border-strong…--alea-status-warning…--alea-status-warning-bg…--alea-surface…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-0-5…--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Radius
--alea-radius-full…--alea-radius-md…--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Component
--alea-hit-min…
Props
ReviewChanges props
Una revisión al estilo de una combinación de lo que otra persona cambió mientras trabajabas: Base, Mío y Suyo lado a lado, cada cambio con dónde está, quién lo hizo y cuándo, y la elección entre Mío, Suyo o Ambos. Aplicar todos los míos o los suyos (tras una confirmación), deshacer, rehacer y puntos guardados a los que volver. No sabe nada de tus datos ni de tu red: tú pasas los cambios y lees las elecciones. Teclas mientras un cambio tiene el foco: N y P (o las flechas) se mueven entre cambios, M, T y B eligen. Un cambio con safety nunca se aplica solo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
changesobligatoria | ReviewChange[] | Cada cambio por revisar. | |
canRedo | boolean | false | Si Rehacer es posible (solo en modo controlado). |
canUndo | boolean | false | Si Deshacer es posible (solo en modo controlado; si no, el componente lo sabe). |
choices | ReviewChoices | ninguno | Lo elegido para cada id de cambio (controlado). Sin esto el componente guarda las elecciones y ofrece deshacer y rehacer. |
className | string | ninguno | Clases extra para el elemento raíz. |
defaultChoices | ReviewChoices | ninguno | Lo elegido al empezar (no controlado). |
headingLevel | 2 | 3 | 4 | 5 | 1 | 2 | El nivel de esquema del título; el del historial es un nivel más abajo. Por defecto 2. |
hiddenLabel | ((count: number) => ReactNode) | "N changes are hidden" | La línea de resumen de los cambios ocultos. Por defecto "N cambios están ocultos". |
history | ReviewHistoryPoint[] | ninguno | Puntos guardados a los que volver: antes y después de combinar. |
onApplyAll | ((event: { choice: "mine" | "theirs"; changeIds: string[]; }) => void) | ninguno | Se llama tras confirmar "Aplicar todos los míos" o "Aplicar todos los suyos", con los ids que fijó. Los cambios con safety y los ocultos nunca entran. |
onRedo | (() => void) | ninguno | Se llama al rehacer. |
onResolve | ((event: { changeId: string; choice: "mine" | "theirs" | "both"; }) => void) | ninguno | Se llama cuando se hace una elección, tras el paso de confirmación en un cambio con safety. |
onRestore | ((point: ReviewHistoryPoint) => void) | ninguno | Se llama con el punto cuyo Restaurar se pulsó. Restaurar significa dejar tus elecciones como las tenía ese punto, así que necesita elecciones controladas. |
onUndo | (() => void) | ninguno | Se llama al deshacer. En modo controlado deshaces tú; el componente lo pide. |
title | ReactNode | "Review changes" | El título. Por defecto "Revisar cambios". |
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.
- 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-review-none.alea-review-list-value.alea-review.alea-review-head.alea-review-title.alea-review-count.alea-review-tools.alea-review-hint.alea-review-empty.alea-review-items.alea-review-item.alea-review-card- Atributos data
data-decideddata-chosendata-markdata-mark=addeddata-mark=modifieddata-mark=removed
Accesibilidad
- Cada cambio es un grupo con un nombre como "Cambio 3 de 7, Monto, modificado por Ana el 9 nov 2026, 4:12 p. m.", y el lugar se lee de la parte más amplia a la más estrecha.
- Agregado, quitado y modificado son palabras con un icono y un estilo de línea (subrayado, subrayado punteado, tachado), nunca solo color.
- El valor elegido se marca con una marca de verificación, un contorno y las palabras "Elegido: mío", y los botones son interruptores pulsados.
- Las elecciones, deshacer, rehacer, aplicar todos y restaurar se anuncian en un estado cortés, unidos cuando llegan muy juntos.
- Un cambio con safety pide un segundo paso explícito y "Aplicar todos" nunca lo toca; no se aplica nada por defecto.
- Los valores que ocultas no están en la página: solo se lee la línea de resumen que tú redactas.
- Con menos de 40 rem de espacio, y con texto al 200 por ciento, Base, Mío y Suyo se apilan uno bajo el otro; los botones mantienen un objetivo de 44 px en pantallas táctiles.
- Están cubiertos el modo claro, el oscuro, el alto contraste, los colores forzados de Windows, el movimiento reducido y la escritura de derecha a izquierda.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra a la lista (una sola parada) y luego recorre los botones del cambio |
| N o Flecha abajo | Cambio siguiente (mientras un cambio tiene el foco) |
| P o Flecha arriba | Cambio anterior |
| Inicio o Fin | Primer o último cambio |
| M | Elegir el mío |
| T | Elegir el suyo |
| B | Elegir ambos (solo texto y listas) |
| Enter (sobre Confirmar) | Confirma un cambio que lo pide |
Qué hacer y qué evitar
Hacer
- Pasa cada cambio con su dónde (pantalla, registro, campo), su autor y su hora: eso es lo que hace legible una lista larga.
- Define valueKind y usa renderValue para dinero, fechas y texto enriquecido; los números nunca se animan.
- Marca aduanas, dinero y fechas legales con safety="confirm".
- Oculta lo que la persona no debe ver con hidden y redacta tú el resumen con hiddenLabel.
- Controla las elecciones cuando quieras guardarlas o restaurar puntos guardados.
Evitar
- No ofrezcas Ambos para un número o un indicador: dos números no suman un número.
- No apliques nada al cargar: no hay nada elegido hasta que la persona elige.
- No pongas un widget de dominio dentro del componente: dibuja tu propio valor con renderValue.
En Figma
Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.
Review change · 24 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Layout | Variant | Wide, Stacked | Wide | className |
| Kind | Variant | Modified, Added, Removed | Modified | changes |
| Decision | Variant | Undecided, Mine, Theirs, Both | Undecided | choices, onResolve |
| Screen | Text | - | Case 1042 | changes |
| Record | Text | - | Payment | changes |
| Field | Text | - | Amount | changes |
| Author | Text | - | Ana, | changes |
| Time | Text | - | Nov 9, 2026, 4:12 PM | changes |
| Number | Text | - | 3 | changes |
| Base value | Text | - | Consulting | changes |
| Mine value | Text | - | Consulting, March | changes |
| Effect text | Text | - | The tax would go from 120 to 150. | changes |
| Confirm text | Text | - | Use theirs for Amount? | changes |
| Both | Boolean | - | true | changes |
| Effect | Boolean | - | false | changes |
| Safety | Boolean | - | false | changes |
| Confirm step | Boolean | - | false | changes |
Review changes · 2 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Layout | Variant | Wide, Stacked | Wide | className |
| Title | Text | - | Review changes | title |
| Count | Text | - | 1 of 3 decided | changes |
| Summary text | Text | - | 2 clinical changes a doctor reviews | hiddenLabel |
| Hidden summary | Boolean | - | true | hiddenLabel |
| History | Boolean | - | true | history |