Product Updates

1.5.1

El patrón Product Updates es un componente superpuesto y contextual diseñado para comunicar nuevas funcionalidades, mejoras o cambios relevantes en la plataforma. Su propósito es guiar al usuario a través de actualizaciones importantes mediante mensajes concisos o flujos guiados por pasos, asegurando que descubran el valor de las nuevas herramientas sin abandonar su contexto de trabajo actual.

import React, { useState } from "react";
import { ProductUpdates } from "@nimbus-ds/patterns";
import { Text } from "@nimbus-ds/components";

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <ProductUpdates
      title="Title"
      text="Content text"
      dismissLink="Dismiss Popover"
      visible={visible}
      onVisibility={setVisible}
    >
      <Text
        fontSize="base"
        color="primary-interactive"
        textAlign="center"
        onClick={() => setVisible(true)}
      >
        This is a new feature that is being showcased by our Product Updates
        component
      </Text>
    </ProductUpdates>
  );
};

export default Example;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/productupdates

Product Updates

Cuándo usar

Para anunciar el lanzamiento de una nueva funcionalidad relevante para el merchant que optimizará sus tareas.
Para guiar al usuario mediante un recorrido paso a paso (onboarding contextual) al interactuar por primera vez con una herramienta compleja.
Para notificar cambios significativos en la ubicación de elementos dentro de la interfaz, ayudando a reducir la fricción.

Cuándo no usar

Para mostrar mensajes de error, advertencias críticas del sistema o bloqueos operativos (usar modales o banners en su lugar).
Para promociones de marketing o ventas cruzadas que no estén directamente relacionadas con mejoras funcionales del producto.
Cuando la información es trivial o secundaria y puede ser comunicada mediante un indicador visual discreto o un tooltip estándar sin interacción.

Criterios de usabilidad y productividad

Enfocar el flujo en la acción principal: presentar botones claros (ej. "Siguiente" o "Entendido") para avanzar en el recorrido, permitiendo al usuario retomar su tarea rápidamente.
Feedback instantáneo y visible: si el usuario decide descartar la actualización accionando el botón de cierre, el sistema debe respetar esta decisión inmediatamente y no volver a interrumpir su flujo.
Minimizar interrupciones: ofrecer textos directos y la posibilidad de omitir el flujo guiado en cualquier momento, respetando a los usuarios que priorizan la velocidad operativa.

Accesibilidad

Soporte completo de navegación por teclado: el componente debe ser accesible mediante la tecla Tab y permitir cerrar el mensaje o flujo utilizando la tecla Escape (Esc) de forma directa.
Manejo correcto del foco: al activarse, el foco debe moverse al Product Update para lectura inmediata. Al cerrarse, el foco debe regresar lógicamente al elemento que disparó la actualización.
Contraste y lectura de estados: asegurar un contraste suficiente (WCAG AA) en textos e íconos, y utilizar etiquetas ARIA descriptivas para que los lectores de pantalla interpreten correctamente los controles de paginación y cierre.

Anatomía

Un Product Update está compuesto por los siguientes elementos:

Tag (opcional): etiqueta destacada (ej. "Novo") para enfatizar la novedad.
Title text: encabezado breve que resume la actualización.
Content text: descripción concisa del valor o cambio introducido.
Link (opcional): enlace de texto para acceder a más información.
Icon Button (Close): botón con ícono (X) en la esquina superior para descartar.
Dots-paginator: indicador de progreso visual para flujos de múltiples pasos.
Buttons: acciones primarias ("Siguiente", "Entendido") o secundarias ("Volver").

Dependencias

Tag
Title
Text
Link
IconButton
Button
DotsPaginator

Variantes

Content Default: un solo mensaje informativo con enlace y opción de cierre. Puede incluir o no la etiqueta de novedad ("Tag true" / "Tag false").
Content Steps: flujo guiado con múltiples pantallas para procesos más complejos. Incluye el paginador (dots) y una combinación de botones de navegación contextuales.
Product Update Footer: variación en la disposición inferior para agrupar los paginadores, enlaces y botones de acción.

Do and Don'ts

✅ Do

Redactar textos orientados al valor: explicar claramente el beneficio que la nueva funcionalidad aporta a la gestión diaria del merchant.
Mantener los flujos cortos: limitar los recorridos guiados (Content Steps) a un máximo de 3 o 4 pasos para evitar la frustración y abandono de la lectura.
Ofrecer salidas claras: incluir siempre una opción visible (el ícono de cierre) para descartar la actualización en el momento que el usuario lo desee.

❌ Don't

No lanzar múltiples anuncios simultáneos: desplegar más de un Product Update a la vez paraliza la productividad y genera una carga cognitiva excesiva.
No redactar manuales extensos: evitar el uso de textos largos o explicaciones técnicas complejas. El diseño del contenedor exige concisión y escaneabilidad rápida.
No forzar la visualización: nunca ocultar la opción de cierre obligando al usuario a hacer clic en "Siguiente" a través de todas las pantallas para poder continuar trabajando.

Props

Las propiedades adicionales se pasan al elemento <ProductUpdates>. Consultá la documentación para ver la lista de atributos aceptados por el elemento <ProductUpdates>.

ProductUpdates

Name	Type	Default	Description
title*	string		Title of the Popover.
text*	string		Content text of the Popover.
tag	React.ReactNode		Optional tag element rendered inline before the title.
bodyContent	React.ReactNode		Optional content for the body of the Popover.
bodyContentProps	object		Optional properties for the content container of the popover body.
dismissLink	React.ReactNode		Optional bottom link to dismiss the Popover. If unset, an IconButton with an X will appear on the superior right corner.
color	'danger-surfaceHighlight' 'neutral-background' 'neutral-surfaceHighlight' 'primary-interactiveHover' 'primary-surfaceHighlight' 'success-surfaceHighlight' 'warning-surfaceHighlight'	'neutral-background'	The color property is used to set the color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'
children*	React.ReactNode \| ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode);		An HTML element, or a function that returns one. It's used to set the position of the popover.
position	'bottom' 'bottom-end' 'bottom-start' 'left' 'left-end' 'left-start' 'right' 'right-end' 'right-start' 'top' 'top-end' 'top-start'	'bottom'	Position of the popover.
width	string	'fit-content'	The width property specifies the width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'
height	string		The height property specifies the height of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'
maxWidth	string		The maxWidth property specifies the maximum width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'
overflow	'auto' 'hidden' 'scroll' 'visible'		The overflow shorthand property sets the desired behavior for an popover's content overflow. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'
backgroundColor	'danger-surfaceHighlight' 'neutral-background' 'neutral-surfaceHighlight' 'primary-interactiveHover' 'primary-surfaceHighlight' 'success-surfaceHighlight' 'warning-surfaceHighlight'	'neutral-background'	The backgroundColor property sets the background color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'
zIndex	'100' '200' '300' '400' '500' '600' '700' '800' '900'		The zIndex property specifies the stack order of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'
offset	number	'10'	Offest displaces the floating element from its core placement along the specified axes.
visible	boolean		If true, the component is shown.
arrow	boolean	'true'	Conditional for displaying the popover arrow.
onVisibility	(visible: boolean) => void;		Function to control popover opening and closing.
matchReferenceWidth	boolean	'false'	A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
enabledHover	boolean	'false'	Adds hover event listeners that change the open state, like CSS :hover.
enabledClick	boolean	'true'	Adds click event listeners that change the open state.
renderOverlay	boolean	'false'	When enabled, renders an invisible overlay that prevents accidental clicks on elements behind the popover.

ProductUpdates.Paginator

Name	Type	Default	Description
totalItems*	number		Total number of items/steps in the pagination.
activeIndex*	number		Zero-based index of the currently active item.

ProductUpdates.Footer

Name	Type	Default	Description
leftLink	React.ReactNode		Optional link rendered on the left side of the footer.
paginator	React.ReactNode		Optional paginator element rendered in the center of the footer.
rightButton	React.ReactNode		Optional action button rendered on the right side of the footer.
renderDivider	boolean	'false'	When true, renders a full-width divider above the footer content.