Data List

1.2.4

Data list es un patrón visual que permite visualizar y gestionar listados de ítems estructurados, como ordenes, información de clientes, etc. Está diseñado para mostrar información resumida de forma clara y ordenada. Su diseño modular permite visualización rápida y uso intensivo en flujos de trabajo administrativos, especialmente en contextos donde el orden o relación entre ítems es 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;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/data-list

Data List

Cuándo usar

Utilizar Data list cuando:

Necesites mostrar una lista de productos o ítems con atributos clave visibles.
Presentar un listado de operaciones o items relacionados

Cuándo no usar

Evitar usar este patrón cuando:

Los ítems requieren mostrar mucha información o múltiples acciones por fila (en ese caso usar Data Table)
Hay menos de 3 elementos (no justifica un patrón completo).
El total supera los 15 ítems y no hay paginación o scroll adecuado.

Criterios de usabilidad y productividad

Feedback inmediato: Los cambios realizado sobre el listado se reflejan en tiempo real.
Preselección inteligente: Sugiere ítems relevantes según contexto en que se encuentra el listado.

Buenas prácticas de accesibilidad

Navegación completa por teclado (Tab para recorrer ítems y botones).
Foco visible al agregar/eliminar elementos, con retorno al último foco activo.
Uso de aria-live y aria-label para cambios dinámicos ("ítem eliminado", "lista vacía").
No depender únicamente de color para indicar estados.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).

Anatomía

Estructura

Rows individuales por ítem con y sin dividers
Contenido del row (variable según necesidad):
1. Thumbnail (opcional)
2. Título y descripción (opcional)
3. Tag de estado (opcional)
4. Link de detalle (opcional)

Dependencias

Utiliza componentes de:

Card
Thumbnail
Icon
Tag
Link

Variantes

Dafault

Con dividers que segmentan cada row de la lista

Data List with no divider

Sin dividers que segmentan cada row de la lista

Do and Don'ts

✅ Do

Mantener el listado entre 3 y 8 ítems para mejor escaneabilidad.
Brindar contexto claro sobre qué representa la lista y qué acciones se esperan.
Mostrar solo el contenido relevante en cada row de la lista para no sobrecargar el listado.

❌ Don't

No agregues demasiados ítems sin estructura clara.
No utilizar mas de 2 acciones 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.