Estudos de caso da Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Os popovers estão em toda parte na web. Você pode vê-las em menus, dicas de alternância e usadas para recursos como configurações da conta, widgets de divulgação e visualizações de cards do produto. Apesar da prevalência desses componentes, a criação deles em navegadores ainda é surpreendentemente complicado. Para resolver isso, um novo conjunto de APIs HTML declarativas para a criação de pop-ups estão chegando aos navegadores, os primeiros que são a API Popover.

O pop-up faz parte do valor de referência recém-disponível.

Compatibilidade com navegadores

  • Chrome: 114
  • Borda: 114.
  • Firefox: 125
  • Safari: 17.

Origem

Um pop-over é normalmente confundido com um diálogo. No entanto, existem algumas ou diferenças de comportamento. Um elemento dialog aberto com dialog.showModal (uma caixa de diálogo modal), é uma experiência que requer interação explícita do usuário para feche o modal. Um popover oferece suporte à dispensa de luz. Um modal dialog não faz isso. Uma caixa de diálogo modal torna o restante da página inerte. Um popover não. Leia mais sobre as diferenças.

Este artigo faz parte de uma série que discute como as empresas de e-commerce aprimorou o site usando novos recursos de CSS e interface. Neste artigo, descubra como a Tokopedia implementou e se beneficiou da API Popover.

Tokopedia

O uso de atributos popover reduziu em até 70% as linhas de código no React. A janela modal podem ser controlados de forma nativa por HTML, em vez de exigir a manipulação de eventos em JavaScript e usando React.createPortal para mover o DOM modal para o fim do document.body. Também podemos usar @starting-style para animar o abertura e fechamento do pop-up.Andy Wihalim, software sênior engenheiro, Tokopedia.

As páginas de detalhes do produto (PDP) da Tokopedia contêm várias imagens de produtos para cada produto. Quando o usuário clica na miniatura do produto, um modal é aberto para mostrar em imagem ampliada. Esse é um padrão comum usado em sites de e-commerce.

Código

A Tokopedia usa o React no desenvolvimento de front-end. Antes de implementar API popover para esse modal, eles usaram um modal DOM e um botão. O botão mudou o estado da reação para abrir o modal. Com a API popover, eles especificam uma O atributo popovertarget no elemento que abre o pop-over com um valor que é igual ao ID do elemento pop-over.

Com essa implementação básica, o pop-over funciona, mas aparece e desaparece sem animações. Para criar uma animação de entrada e saída suave para o pop-over, use :popover-open e @starting-style e permita animação de propriedades distintas. No exemplo de código a seguir, o pop-up é dimensionado para dentro e para fora usando o transform: 'scale()'.

Este exemplo de código mostra como implementar animações de entrada e saída para a API popover.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

Para atender a navegadores que não aceitam a API popover, a Tokopedia implementou popover-polyfill do Oddbird, que tem apenas 3,2 KB com compactação gzip. Eles ficaram satisfeitos com o polyfill porque funcionou bem e não causou regressões de desempenho. No geral, eles foram capazes de reduzir até 70% as linhas de código no React com a API popover.

O que considerar ao usar a API Popover

A Tokopedia usa o React, e a equipe fez a divisão do código desmontando o componente pop-over para páginas que não o utilizam e, em seguida, fazer uma divisão de código para o pop-over. Dessa forma, ele reduziu o tamanho da solicitação inicial.

Considere combinar pop-ups com posicionamento de âncoras de CSS (em breve no Chrome) para posicioná-los em relação a outros elementos. Isso é útil para menus e dicas de ferramentas, por exemplo.

Recursos

Confira os outros artigos desta série que abordam como o comércio eletrônico empresas que se beneficiaram do uso de novos recursos de CSS e interface do usuário, como os recursos de rolagem animações, pop-over, consultas de contêiner e o seletor has().