Product Updates
O padrão Product Updates é um componente sobreposto e contextual projetado para comunicar novas funcionalidades, melhorias ou mudanças relevantes na plataforma. Seu propósito é guiar o usuário através de atualizações importantes mediante mensagens concisas ou fluxos guiados por etapas, garantindo que descubram o valor das novas ferramentas sem abandonar seu contexto de trabalho atual.
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;Instale o componente via terminal.
npm install @nimbus-ds/productupdatesProduct Updates
- Para anunciar o lançamento de uma nova funcionalidade relevante para o merchant que otimizará suas tarefas.
- Para guiar o usuário mediante um percurso passo a passo (onboarding contextual) ao interagir pela primeira vez com uma ferramenta complexa.
- Para notificar mudanças significativas na localização de elementos dentro da interface, ajudando a reduzir a fricção.
- Para mostrar mensagens de erro, advertências críticas do sistema ou bloqueios operacionais (usar modais ou banners em seu lugar).
- Para promoções de marketing ou vendas cruzadas que não estejam diretamente relacionadas com melhorias funcionais do produto.
- Quando a informação é trivial ou secundária e pode ser comunicada mediante um indicador visual discreto ou um tooltip padrão sem interação.
- Focar o fluxo na ação principal: apresentar botões claros (ex. "Seguinte" ou "Entendido") para avançar no percurso, permitindo ao usuário retomar sua tarefa rapidamente.
- Feedback instantâneo e visível: se o usuário decidir descartar a atualização acionando o botão de fechar, o sistema deve respeitar essa decisão imediatamente e não voltar a interromper seu fluxo.
- Minimizar interrupções: oferecer textos diretos e a possibilidade de pular o fluxo guiado em qualquer momento, respeitando os usuários que priorizam a velocidade operacional.
- Suporte completo de navegação por teclado: o componente deve ser acessível mediante a tecla Tab e permitir fechar a mensagem ou fluxo utilizando a tecla Escape (Esc) de forma direta.
- Gerenciamento correto do foco: ao ser ativado, o foco deve mover-se ao Product Update para leitura imediata. Ao ser fechado, o foco deve retornar logicamente ao elemento que disparou a atualização.
- Contraste e leitura de estados: garantir um contraste suficiente (WCAG AA) em textos e ícones, e utilizar etiquetas ARIA descritivas para que os leitores de tela interpretem corretamente os controles de paginação e fechamento.
Um Product Update é composto pelos seguintes elementos:
- Tag (opcional): etiqueta destacada (ex. "Novo") para enfatizar a novidade.
- Title text: cabeçalho breve que resume a atualização.
- Content text: descrição concisa do valor ou mudança introduzida.
- Link (opcional): link de texto para acessar mais informações.
- Icon Button (Close): botão com ícone (X) no canto superior para descartar.
- Dots-paginator: indicador de progresso visual para fluxos de múltiplas etapas.
- Buttons: ações primárias ("Seguinte", "Entendido") ou secundárias ("Voltar").
- Tag
- Title
- Text
- Link
- IconButton
- Button
- DotsPaginator
- Content Default: uma única mensagem informativa com link e opção de fechamento. Pode incluir ou não a etiqueta de novidade ("Tag true" / "Tag false").
- Content Steps: fluxo guiado com múltiplas telas para processos mais complexos. Inclui o paginador (dots) e uma combinação de botões de navegação contextuais.
- Product Update Footer: variação na disposição inferior para agrupar os paginadores, links e botões de ação.
✅ Do
- Redigir textos orientados ao valor: explicar claramente o benefício que a nova funcionalidade traz para a gestão diária do merchant.
- Manter os fluxos curtos: limitar os percursos guiados (Content Steps) a um máximo de 3 ou 4 etapas para evitar a frustração e abandono da leitura.
- Oferecer saídas claras: incluir sempre uma opção visível (o ícone de fechar) para descartar a atualização no momento que o usuário desejar.
❌ Don't
- Não lançar múltiplos anúncios simultâneos: exibir mais de um Product Update ao mesmo tempo paralisa a produtividade e gera uma carga cognitiva excessiva.
- Não redigir manuais extensos: evitar o uso de textos longos ou explicações técnicas complexas. O design do contêiner exige concisão e escaneabilidade rápida.
- Não forçar a visualização: nunca ocultar a opção de fechar obrigando o usuário a clicar em "Seguinte" em todas as telas para poder continuar trabalhando.
Propriedades adicionais são repassadas ao elemento <ProductUpdates>. Consulte a documentação do elemento div para ver a lista de atributos aceitos pelo 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' | 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' | 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' | 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' | 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' | 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. |