Pular para o conteúdo

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

Um motivo que diz por que está vazio e, se existir, o que fazer.

Evite

Um traço sem explicação, ou escrever Nenhum onde o valor é só ainda não coletado.
  • Prefira o motivo mais específico da linha a um texto único para a coluna toda.
  • Use EmptyValue para valor ausente; use StateBlock ou EmptyState para 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.