Product Data List

1.0.0

El patrón Product Data List permite ver y gestionar listas resumidas de productos. Está diseñado para facilitar la selección, organización y priorización de productos relacionados mediante drag & drop y acciones de edición rápidas.

import React from "react";
import { ProductDataList } from "@nimbus-ds/patterns";
import { Link, Icon, Box } from "@nimbus-ds/components";
import { BoxPackedIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <ProductDataList
    title="Productos relacionados"
    backgroundColor="neutral-background"
  >
    <ProductDataList.Section
      title="Alternativos"
      description="Pueden ser opciones similares a este producto."
      link={
        <Link appearance="primary" textDecoration="none">
          <Icon source={<BoxPackedIcon />} color="primary-interactive" />
          Agregar productos
        </Link>
      }
    />
    <ProductDataList.ItemDivider />
    <ProductDataList.Section
      title="Complementarios"
      description="Productos que se complementan con este artículo."
      link={
        <Link appearance="primary" textDecoration="none">
          <Icon source={<BoxPackedIcon />} color="primary-interactive" />
          Agregar productos
        </Link>
      }
    />
  </ProductDataList>
);

export default Example;

Ver en Figma

Reportar un bug

Definición

El patrón Product Data List permite ver y gestionar listas resumidas de productos. Está diseñado para facilitar la selección, organización y priorización de productos relacionados, ya sean alternativos o complementarios, mediante la función de arrastrar y soltar y acciones de edición rápidas.

Este patrón es ideal para flujos de trabajo de edición o configuración de productos donde es necesario mantener la relación entre los diferentes artículos del catálogo.

Anatomía del componente

El patrón puede contener:

Sección de título
Título y descripción o botones de selección (radio)
Enlace (Link)
Miniatura (Thumbnail)
Ícono
Botón de ícono
Etiqueta (Label)
Tag

Dependencias

Este patrón utiliza:

#card
#thumbnail
#icon
#tag
#link
#icon-button

Guidelines

Cuándo usar

Crear y gestionar una lista de productos con información resumida.
Asociar productos alternativos o complementarios dentro del catálogo.
Presentar una lista flexible de productos reorganizables por prioridad o destaque.

Cuándo no usar

No utilizar para listar productos que requieran múltiples acciones o requieran visibilizar atributos o diversos conceptos y/o información del producto.
Evitar usarlo cuando se requiera enlistar menos de tres productos o en por el contrario para listas que superen los 15 artículos/productos.

Drag and drop

Product Data List proporciona la funcionalidad de reordenamiento de la lista de producto a través de drag and drop, permitiendo configurar el orden de los elementos según el criterio del usuario.

Criterios de usabilidad y productividad

Reordenamiento con drag & drop visible: facilita la reorganización con feedback visual inmediato y sin la necesidad de confirmar cada cambio.
Preselección inteligente: sugerir productos basados en relaciones previas o contexto del flujo (por ejemplo, productos de la misma categoría)
Evita componentes de confirmación innecesarios: las acciones como agregar o eliminar productos deben reflejarse inmediatamente en la UI sin la utilización de componentes de confirmación como (por ejemplo el toast)
Uso de componentes de feedback. Utilizar componentes de feedback solo cuando se presente un problema en la experiencia, retraso en la carga de productos o error al eliminar o agregar productos.

Buenas prácticas de accesibilidad

Navegación completa con teclado: asegurar que todos los elementos (cards y botones) pueden ser navegados y activados con teclado.
Mensajes y estados accesibles: usá ARIA para describir acciones como "producto eliminado" o "lista vacía".
Manejo correcto del foco: tras agregar o eliminar un producto, devolver el foco al último elemento utilizado por el usuario.

Variantes

Product Data List puede tiene 3 variantes de completitud de contenido:

1- Content empty

Sin productos agregados. La lista aún no se muestra, se hace énfasis en el call to action principal.

2- Content partial

Con menos de 5 productos agregados. Los productos se van enlistando según el orden en que fueron cargados inicialmente. Se utiliza el tag como elemento para indicar el estado de completitud de la lista. La funcionalidad drag and drop permite reordenar el listado de productos según el criterio del usuario.

3- Content full

Con más de 5 productos agregados (máx de 8 productos admitidos). La lista muestra el scroll vertical interno a partir del 5to producto. Se utiliza el tag como elemento para indicar el estado de completitud de la lista. Al superar los 5 productos, el tag cambia de estado neutral a estado de warning para destacar el límite de completitud.

Recomendaciones de uso

✅ Do

Mostrar información clara y resumida del producto: imagen, nombre y acciones principales.
Limitar la cantidad de ítems para mantener una experiencia clara y manejable (ej. máximo 8 productos).
Usar iconos comprensibles y accesibles para las acciones (por ejemplo, el ícono de papelera para eliminar).
Brindar contexto con textos guía sobre el objetivo de la lista. Objetivo y acciones recomendadas.
Permitir el reordenamiento únicamente cuando tenga sentido para la experiencia (como cuando el orden implica prioridad o jerarquía).

❌ Don't

Incluir demasiados productos sin una lógica clara.
No permitir edición o reordenamiento en contextos donde se espera esa funcionalidad.
No brindar contexto visual o textual sobre el objetivo de la lista

Componentes relacionados

Card - Para contener la información de cada producto.
Thumbnail - Para mostrar la imagen del producto.
Icon - Para indicadores visuales y acciones.
Tag - Para mostrar el estado de completitud.
Link - Para navegación a detalles del producto.
Icon Button - Para acciones de eliminación y edición.

Props

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

ProductDataList

Name	Type	Default	Description
children			The content to be rendered inside the list
title			Optional title for the list section

ProductDataList.Item

Name	Type	Description
id*	string	The id of the product
title*	string	The title of the product
imageUrl	string	The image URL of the product
imageAlt	string	Alternative text for the product image
isDraggable	boolean	Whether the item is draggable
onRemove	object	Callback fired when remove button is clicked
withDivider	boolean	Whether the item has a divider
children		Additional content to be rendered

ProductDataList.Products

Name	Type	Description
items*	array	The array of items to be rendered and sorted in the list.
onReorder*	object	Callback fired when the order of items changes.
sortable	boolean	If true, enables drag-and-drop sorting for the list items.
renderItem*	object	Function to render each item in the list.
sortableProps	object	Additional properties to pass to the sortable container.

ProductDataList.ItemDivider

Name	Type	Description
id	string
width	string	The width property specifies the width of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderBottomWidth	'1' '2' '3' '4' '5' 'none'	The borderBottomWidth property defines the width of the border at the bottom of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderColor	'danger-interactive' 'danger-surface' 'danger-surfaceHighlight' 'neutral-interactive' 'neutral-surface' 'neutral-surfaceDisabled' 'neutral-surfaceHighlight' 'primary-interactive' 'primary-surface' 'primary-surfaceHighlight' 'success-interactive' 'success-surface' 'success-surfaceHighlight' 'transparent' 'warning-interactive' 'warning-surface' 'warning-surfaceHighlight'	The borderColor property sets the color of the box's four borders. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderStyle	'dashed' 'dotted' 'hidden' 'none' 'solid'	borderStyle property sets the line style for all four sides of an box's border. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderTopWidth	'1' '2' '3' '4' '5' 'none'	The borderTopWidth property defines the width of the border at the top of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

ProductDataList.Section

Name	Type	Default	Description
title
description
content
link
children