vtex/shoreline

Clickable bubble with children elements and table with clickable

Closed this issue · 2 comments

Problem

Ao utilizar a table do Shoreline, fui supreendida com o comportamento de que se a celula usava um span antes do texto, o click neste não desencadeava a ação de click na linha da tabela. Mas caso o texto estivesse diretamente na celula o comportamento era outro e o click na row era ativado.

Investigando o código vi que utilizam o Clikable nas celulas da tabela, imagino que seja para que não se tenha problemas com um botão na celula da tabela desencadeando dois eventos. Porém acho estranho essa diferença de comportamento na celula das tabelas dependendo de como seja feito o chidren. Vocês esperam que seja assim mesmo? Se for acho importante documentar, se não for para ser diferente, acho importante mexer no código apra que tenha consistencia. Esse seria meu primeiro ponto.

Como preciso no cenário da app que trabalho que o click aconteça de qualquer lugar, continuei a ver a documentação do Clickable para encontrar a forma de habilitar esse click. Ao ver a documentação do ClickableBubble esperava que ao colocar este componente na raiz do render da celula, que toda a celula passasse a desencadear a ação do click na row, porém isso não acontece. O comportamento que eu esperava é o correto e tem um bug no componente mesmo, ou você esperavam que só funcionasse com o filho imediato mesmo? Por que o ruim de ser o filho imediato é que teria que colocar para cada elemento interno o ClickableBubble, e dependendo do cenário, se uso uma lib por exemplo, isso pode não ser possível

Expected behavior

Pensando no exemplo do codesandbox que deixo o link, esperava que a parte em negrito também desencadeasse o evento de click do parent.

O codesanbox foi criado como cópia do storie do elemento, apenas adicionando o elemento span

Reproducible Example

https://codesandbox.io/p/sandbox/shoreline-table-click-problem-forked-x4g289?workspaceId=5c85924b-693a-45ca-b8ea-60cace55d92e

Suggested solution

No response

Additional context

No response

Package

No response

Packages version

No response

Browser

No response

Package Manager

pnpm

Conversando com o @lucasaarcoverde no ultimo office hours, entendemos que seria interessante ser possivel ter os dois comportamentos, tanto o atual quanto o de abilitar bubble para todos os filhos internos de um elemento.

Venho aqui com uma sugestão de implementação neste draft de PR