Componentes
User Cell
betaIdentificação de uma pessoa numa linha de lista. O campo secundário é parte da anatomia: é o que desambigua dois homônimos.
Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/user-cell
Orientação
A identificação de uma pessoa numa linha de lista. O campo secundário é parte da anatomia, não enfeite: é o que desambigua dois homônimos.
Quando usar
- Uma tabela ou lista precisa mostrar quem é a pessoa, não só o nome dela.
- Existe risco real de confusão entre pessoas com nomes parecidos — turma, e-mail ou papel resolvem.
- A célula precisa ser consistente entre telas diferentes do produto.
Quando não usar
- Para mostrar só o avatar — aí o componente é o Avatar.
- Para o perfil completo de alguém: isso é uma tela, ou uma Description List.
- Para item genérico de lista que não representa pessoa — use Item.
Playground
MC
Marina Costamarina.costa@escola.edu.br
<UserCell name="Marina Costa" secondary="marina.costa@escola.edu.br" />Uso
Identifica uma pessoa numa linha de lista: responsável pelo lead, membro da escola, autor de um evento.
MC
Marina Costamarina.costa@escola.edu.br
Campo secundário
`secondary` é parte da anatomia, não um extra. Numa trilha de auditoria é o que desambigua dois homônimos — sem ele, dois "João Silva" são indistinguíveis.
JS
João SilvaProfessor · EM 9º ano A
JS
João SilvaCoordenação · Escola Vila Nova
Iniciais
Sem `fallback`, o componente deriva as iniciais do `name`: primeira e última palavra. "Ana Paula de Souza" vira "AS", não "AP".
AS
Ana Paula de SouzaAluna · 6º ano B
R
RafaelAluno · 6º ano B
Tamanhos
`size` controla o avatar. Use `sm` em tabelas densas.
BL
Beatriz LimaAluna · 3º ano A
BL
Beatriz LimaAluna · 3º ano A
Sem campo secundário
Omitir `secondary` é válido quando o contexto já desambigua — uma lista filtrada por turma, por exemplo. Fora desse caso, prefira sempre informar.
PA
Pedro Alves
Acessibilidade
O que o componente já garante, e o que continua sendo responsabilidade da tela.
- O avatar é redundante em relação ao nome: mantenha fora da árvore de acessibilidade em vez de duplicar a leitura.
- Nome e campo secundário são anunciados em sequência; escreva o secundário para fazer sentido logo após o nome.
- Se a célula inteira for clicável, ela precisa ser um alvo único e nomeado, não três alvos empilhados.
Em contexto de produto
Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.
É a primeira coluna das tabelas do painel do professor e do registro de turma, com o campo secundário fazendo a desambiguação.
Ver o registro de turmaComponentes relacionados
Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
UserCell
| Prop | Tipo | Padrão |
|---|---|---|
| fallback | string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | — |
| name* | string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | — |
| secondary | string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | — |
| size | "md" | "sm" | "md" |
| src | string | — |
Também aceita as props de React, incluindo className e os atributos de DOM.
Origem do dado
- Orientação, acessibilidade e relacionados: documentação
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css