'/%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}
Datos
Comment
Conversaciones: comentarios con autor, tiempo relativo (fecha completa al pasar el mouse), badges, notas de editado y restringido, estados de guardado y fallido, acciones, respuestas anidadas y un editor que crece y envía con ⌘Enter.
import { Comment, CommentComposer } from '@alea/ui';
Ejemplos
Hilo de comentarios
Comentarios con tiempos relativos, badges, ediciones, una nota restringida, respuestas anidadas, acciones y un compositor (⌘Enter envía).
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Edited
isEdited - Highlighted
isHighlighted - State
state
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-subtle…--alea-border…--alea-status-danger…--alea-status-warning…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-2xs…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-slow…
Props
Comment props
Un comentario en una conversación: autor, hora, texto, acciones y respuestas anidadas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
authorobligatoria | string | - | Quién lo escribió. |
childrenobligatoria | ReactNode | - | El comentario. |
actions | ReactNode | - | Acciones debajo: Responder, Me gusta, Editar (usa Button variant="text" size="xs"). |
avatarSrc | string | - | Su foto. |
badge | ReactNode | - | Una etiqueta corta después del nombre: Autor, Admin, Bot. |
className | string | - | Clases extra. |
errorMessage | ReactNode | - | Qué salió mal cuando state es failed, con tu acción de reintento en actions. |
headingLevel | 2 | 3 | 4 | 5 | 6 | - | Nivel de título de la línea del autor para la navegación por títulos de los lectores de pantalla. Por defecto ninguno (texto simple). |
isEdited | boolean | - | Lo marca como editado. |
isHighlighted | boolean | - | Llama la atención sobre él: un comentario enlazado o nuevo. |
replies | ReactNode | - | Respuestas: elementos Comment anidados. |
restricted | ReactNode | - | Solo algunas personas pueden verlo: muestra un candado y este texto ("Solo visible para tu equipo"). |
state | "failed" | "saving" | - | Lo muestra guardándose (atenuado) o fallido (con errorMessage). |
time | ReactNode | Date | - | Cuándo: un Date (mostrado en relativo, como "hace 5 min", con la fecha completa con hover) o tu propio texto. |
CommentComposer props
Donde se escribe un comentario o una respuesta: crece con el texto, ⌘Enter o Ctrl+Enter envía.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
onSubmitobligatoria | (text: string) => void | - | Se llama con el texto al enviar; bórralo tú si controlas value. |
author | string | - | Quién escribe (muestra su avatar). |
avatarSrc | string | - | Su foto. |
className | string | - | Clases extra. |
isSubmitting | boolean | - | Deshabilita el envío mientras guarda. |
label | string | - | Etiqueta para lectores de pantalla. Por defecto "Comentario". |
onCancel | (() => void) | - | Muestra Cancelar, para respuestas en línea. |
placeholder | string | - | Placeholder. Por defecto "Agrega un comentario…". |
submitLabel | ReactNode | - | Texto del botón de enviar. Por defecto "Comentar". |
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.
Comment
- Variantes
statefailedsaving- 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-comment.alea-comment-main.alea-comment-head.alea-comment-author.alea-comment-badge.alea-comment-time.alea-comment-restricted.alea-comment-body.alea-comment-error.alea-comment-actions.alea-comment-replies- Atributos data
data-highlighteddata-state=saving
CommentComposer
- Estados
- Focus inside
- 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-comment-composer.alea-comment-field.alea-comment-input.alea-comment-composer-actions
Accesibilidad
- Cada comentario es un article; las horas son elementos time reales con la fecha exacta.
- Los comentarios fallidos anuncian su error como alerta.
- El editor es un campo con etiqueta; ⌘Enter o Ctrl+Enter envía, y el botón dice el atajo.
Teclado
| Tecla | Acción |
|---|---|
| ⌘Enter / Ctrl+Enter | Envía el comentario |
Qué hacer y qué evitar
Hacer
- Mantén las respuestas a uno o dos niveles.
- Muestra quién puede ver los comentarios restringidos.
Evitar
- No escondas acciones hasta pasar el mouse: quienes usan teclado o toque también las necesitan.
The new Tree is ready for review: data mode, cascading checkboxes, lazy loading and drag and drop.