ActionRow

A ActionRow é a linha de lista orientada a ação: o nome do item, uma linha curta de contexto, o estado e o botão que resolve. A action é obrigatória pelo tipo; sem ação, a linha não é uma linha de ação e o componente certo é a MetaLine. Não há slot para descrição longa: o porquê entra em hint e vira um ⓘ.

import { ActionRow } from "@rastreio-x/ui";

Padrão

Título, meta com uma linha de contexto, status com um StatusBadge e a action com o botão.

Com dica

hint acrescenta um InfoHint ao lado do título, com o porquê em até duas frases.

Ação de apoio

secondaryAction fica antes da principal e deve pesar menos: ghost ou tertiary. Uma linha tem uma ação principal e, no máximo, uma de apoio.

Em lista

Cada linha carrega o próprio estado e a própria ação. O separador é do contêiner.

Contêiner estreito

A linha empilha por container query quando o contêiner tem menos de 30 rem, não pela janela. Ações em fullWidth ocupam a coluna.

No Admin

Dentro de um Widget, as linhas ocupam o corpo do painel.

Anatomia

ActionRow
├── título          p, negrito curto
│   ├── status      StatusBadge (opcional)
│   └── hint        InfoHint (opcional)
├── meta            uma linha curta (opcional)
└── ações
    ├── secondaryAction   opcional
    └── action            obrigatória

O título e as ações dividem a linha; em contêiner estreito, as ações descem para baixo do texto.

Propriedades

Animações

A linha não anima: ela aparece e some com a lista. O selo de movimento vem do arquivo action.tsx, que importa o StateBlock (esse arquivo carrega Motion). A camada do ⓘ usa a transição do Popover, e os botões, a do Button.

Acessibilidade

• O título é um parágrafo; dê o contexto da lista (um h2 ou o aria-label do contêiner) para a pessoa saber de que grupo a linha faz parte.
• A ação é um botão ou link comum, com rótulo de verbo; em listas repetidas, o rótulo pode precisar do nome do item para ser único.
• O ⓘ ganha o nome "Sobre" seguido do título quando o título é texto (por exemplo, "Sobre Resend"); com título que não é texto, ele cai em "Saiba mais".
• O estado vem como texto no selo, nunca só como cor.

Boas práticas

• Uma ação principal por linha; a de apoio pesa menos.
• Contexto em uma linha; o resto vai para hint.
• Para contexto sem ação (período, versão, atualização), use MetaLine.
• Em lista longa, mantenha a ordem e a posição do botão iguais em todas as linhas.

Relacionados

• StatusBadge o selo de estado da linha.
• InfoHint a explicação opcional.
• MetaLine para contexto sem ação.
• Button para a ação.
• EmptyAction para a lista sem linhas.