Estudos de caso da Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

Os pop-ups estão em todos os lugares na Web. Eles podem ser encontrados em menus, dicas e caixas de diálogo, usados para recursos como configurações de conta, widgets de divulgação e visualizações de cards de produtos. Apesar da prevalência desses componentes, a criação deles em navegadores ainda é surpreendentemente complicada. Para resolver isso, um novo conjunto de APIs HTML declarativas para criar pop-ups está chegando aos navegadores. A primeira delas é a API Popover.

Um pop-up é comumente confundido com uma caixa de diálogo. No entanto, há algumas diferenças importantes no comportamento deles. Um elemento dialog aberto com dialog.showModal (uma caixa de diálogo modal) é uma experiência que exige interação explícita do usuário para fechar o modal. Um popover oferece suporte ao fechamento com um clique fora da caixa. Um dialog modal não. Uma caixa de diálogo modal torna o restante da página inerte. Um popover não. Saiba mais sobre as diferenças.

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

Tokopedia

O uso de atributos de pop-up reduziu em até 70% as linhas de código no React. O modal pode ser controlado nativamente pelo HTML, em vez de exigir o processamento de eventos em JavaScript e usar React.createPortal para mover o DOM modal para o final de document.body. Também podemos usar @starting-style para animar a abertura e o fechamento do pop-up.—Andy Wihalim, engenheiro de software sênior, Tokopedia.

As páginas de detalhes do produto (PDPs, na sigla em inglês) da Tokopedia contêm várias imagens de cada produto. Quando a miniatura do produto é clicada, um modal é aberto para mostrar a imagem ampliada. Esse é um padrão comum usado em sites de e-commerce.

Código

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

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

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',

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

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

Para atender aos navegadores que não oferecem suporte à API Popover, a Tokopedia implementou o popover-polyfill da oddbird, que tem apenas 3,2 KB com compactação gzip. Eles ficaram satisfeitos com o polyfill, porque ele funcionou bem e não causou regressões de desempenho. No geral, eles conseguiram reduzir em 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 conseguiu dividir o código desmontando o componente pop-up para páginas que não o usam e, em seguida, fazendo uma divisão de código para o conteúdo do pop-up. Dessa forma, eles reduziram o tamanho da solicitação inicial.

Considere combinar pop-ups com o posicionamento de âncora 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 falam sobre como as empresas de e-commerce se beneficiaram do uso de novos recursos de CSS e de interface, como animações controladas por rolagem, pop-up, consultas de contêiner e o seletor has().