EmptyValue
Traço atenuado para um valor ausente, com o motivo em um tooltip.
O EmptyValue ocupa o lugar de um dado que ainda não existe: a previsão de um Pedido em trânsito, o motivo de uma ação sem justificativa, uma métrica sem coleta. Ele nunca é um "—" solto: o traço vem com o motivo, no tooltip e para leitores de tela.
import { EmptyValue } from "@rastreio-x/ui";
Padrão
Sem propriedades, ele usa o motivo padrão ("Ainda não há coleta para esta medida"). Passe o seu em quase todos os casos.
Motivos específicos
Cada ausência tem uma causa. Diga qual: ela ajuda a pessoa a entender se falta esperar, preencher ou ativar algo.
Em uma tabela
Em células de DataGrid, o EmptyValue mantém a coluna alinhada e explica por que a linha está vazia.
Anatomia
EmptyValue
├── "—" traço visual, aria-hidden
├── texto oculto o motivo, só para leitores de tela
└── Tooltip o motivo, ao passar o mouse ou focar
O traço fica aria-hidden; o motivo vai em um sr-only e no Tooltip. O elemento é focável (tabIndex=0) para o teclado também ver o tooltip.
Propriedades
Animações
O EmptyValue não anima; os selos acima vêm de análise estática do pacote e refletem o Tooltip que ele usa. O tooltip abre com a transição curta de opacidade do HeroUI, depois de 200 ms de espera; com prefers-reduced-motion, a folha global da fachada reduz a transição a 0,01 ms.
Acessibilidade
- Leitores de tela leem o motivo ("Nenhum motivo registrado"), não "traço".
- O elemento é focável: Tab leva até ele e o tooltip abre com o foco, não só com o mouse.
- O contraste do traço usa o token
muted; o motivo é o texto que carrega o significado, não a cor. - O foco tem anel visível de 2 px no token de foco.
Boas práticas
Faça
Evite
- Prefira o motivo mais específico da linha a um texto único para a coluna toda.
- Use
EmptyValuepara valor ausente; useStateBlockouEmptyStatepara listas inteiras vazias. - Não use para zero: zero é um valor, e deve aparecer como 0.
Relacionados
- EmptyState para telas e listas inteiras vazias.
- DataGrid onde o traço aparece nas células.
- Tooltip o balão que traz o motivo.
- MetaLine linhas de contexto com valores que podem estar ausentes.