Data List

1.2.4

Data list é um padrão visual que permite visualizar e gerenciar listados de itens estruturados, como ordens, informações de clientes, etc. Está projetado para mostrar informações resumidas de forma clara e ordenada. Seu design modular permite visualização rápida e uso intensivo em fluxos de trabalho administrativos, especialmente em contextos onde a ordem ou relação entre itens é relevante.

Default

Data List with no dividers

import React from "react";
import { DataList } from "@nimbus-ds/patterns";
import { Text, Tag, Link, Box, Icon } from "@nimbus-ds/components";
import {
  ChevronDownIcon,
  CreditCardIcon,
  BoxUnpackedIcon,
} from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <DataList>
    {Array.from({ length: 3 }, (_, i) => (
      <DataList.Row key={i} gap="1">
        <Box display="flex" justifyContent="space-between">
          <Text fontWeight="medium" color="primary-interactive">
            #123456
          </Text>
          <Text>22 Mar</Text>
        </Box>
        <Box display="flex" justifyContent="space-between">
          <Text>Customer name</Text>
          <Text>R$ 3.500</Text>
        </Box>
        <Link textDecoration="none">
          10 products
          <Icon color="currentColor" source={<ChevronDownIcon />} />
        </Link>
        <Box display="flex" flexWrap="wrap" gap="2" pt="2">
          <Tag appearance="warning">
            <Icon color="currentColor" source={<CreditCardIcon />} />
            Awaiting payment
          </Tag>
          <Tag appearance="primary">
            <Icon color="currentColor" source={<BoxUnpackedIcon />} />
            Unfulfilled
          </Tag>
        </Box>
      </DataList.Row>
    ))}
  </DataList>
);

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/data-list

Data List

Quando usar

Utilizar Data list quando:

Precisar mostrar uma lista de produtos ou itens com atributos chave visíveis.
Apresentar um listado de operações ou itens relacionados

Quando não usar

Evitar usar este padrão quando:

Os itens requerem mostrar muita informação ou múltiplas ações por linha (nesse caso usar Data Table)
Há menos de 3 elementos (não justifica um padrão completo).
O total supera os 15 itens e não há paginação ou scroll adequado.

Critérios de usabilidade e produtividade

Feedback imediato: As mudanças realizadas sobre o listado se refletem em tempo real.
Pré-seleção inteligente: Sugere itens relevantes segundo contexto em que se encontra o listado.

Boas práticas de acessibilidade

Navegação completa por teclado (Tab para percorrer itens e botões).
Foco visível ao adicionar/eliminar elementos, com retorno ao último foco ativo.
Uso de aria-live e aria-label para mudanças dinâmicas ("item eliminado", "lista vazia").
Não depender unicamente de cor para indicar estados.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).

Anatomia

Estrutura

Rows individuais por item com e sem dividers
Conteúdo do row (variável segundo necessidade):
1. Thumbnail (opcional)
2. Título e descrição (opcional)
3. Tag de estado (opcional)
4. Link de detalhe (opcional)

Dependências

Utiliza componentes de:

Card
Thumbnail
Icon
Tag
Link

Variantes

Default

Com dividers que segmentam cada row da lista

Data List with no divider

Sem dividers que segmentam cada row da lista

Do and Don'ts

✅ Do

Manter o listado entre 3 e 8 itens para melhor escaneabilidade.
Fornecer contexto claro sobre o que representa a lista e que ações se esperam.
Mostrar apenas o conteúdo relevante em cada row da lista para não sobrecarregar o listado.

❌ Don't

Não adicionar demasiados itens sem estrutura clara.
Não utilizar mais de 2 ações por row

Props

Additional props are passed to the <DataList> element. See div docs for a list of props accepted by the <DataList> element.

DataList

Name	Type	Default	Description
children*	React.ReactNode		Content of the List component.
bottomDivider	boolean	'true'	Defines whether the List has a bottom border.

DataList.Row

Name	Type	Default	Description
padding	'base' 'none' 'small'	'base'	Optional padding for the row.
children*	React.ReactNode		Content of the row.
topDivider	boolean	'true'	Determines if the row has a top border.