Snap Card (outline + BG transparente)

[annefranca]

Goal

Avaliar nova proposta para aplicação do componente Snap Card para ser adicionado no Mística.

Context

Pensando em escalabilidade, solicitamos a aplicação do Snap Card com borda usando opacidade + background transparente. Dessa forma, vamos ter um componente consistente e reutilizável para todas as marcas.

Impact

Adicionar essa lógica de opacidade e transparência traria facilidade na aplicação e deixaríamos de lado a necessidade de sempre ter que adicionar um novo token de cor para suprir as necessidades de uso.

Discussion Questions

ND

Additional considerations

Segue a mesma lógica da discussão do componente Chips.
#1342

Do you have a visual proposal?

https://www.figma.com/file/Xao9LLbt8NloneegKfAmKK/Snap-Card-(outline-%2B-BG-transparente)?type=design&node-id=0%3A1&mode=design&t=FF0ANo3f1jB6cPVB-1

[aweell]

Hi @annefranca,

The proposal of transparent background is only for inverse contexts? How the card should behave over default or over alternative?

[annefranca]

Olá @aweell

Para aplicação em contextos diversos. No exemplo de aplicação do arquivo do Figma estamos aplicando sobre o backgroundBrandSecondary (vivoPurpleLight90 / #751AA3), mas poderia ser aplicado em qualquer outro contexto, como mostra a simulação. Lembrando que não é apenas o BG do Snap Card, mas também a opacidade na borda.

[yceballost]

What would happen to the current inverse cards? Would they be replaced by this transparent style?

I mean this
https://tinyurl.com/23xbjpxg

[yceballost]

Hi! after evaluating it with the team we think the following:

1. We believe that the coexistence between "card inverse over inverse" and "transparent" can cause interaction problems, the user could understand that the dark one is not clickable. Here we should have data that this coexistence of cards works correctly, so far you have not provided such data.
2. It seems a very specific need for that screen. We have not seen more uses for this, so we do not consider it as something global.
3. We do not know what it brings to the user, other than the possible interaction problems mentioned in point 1.
4. We believe that it could be a problem to open so many styles to the cards, this could cause some places they are used with white backgrounds... others transparent... and in a product ecosystem, this could become a problem. How does a designer know when to use one style or another?

That said, for the moment we do not consider it part of the system, if in the future we unlock this kind of doubt we would have no problem in adding it to Mística. For the moment and being that screen your development, you could mount it in a Vivo Extended.

---

On the other hand, I leave the workaround that could fit if this comes some time to Mística.
The cards could have an isTransparent prop as currently has the isInverse prop. It would be necessary to evaluate if this would come in if there should be a prop that joins both cases... but this for the moment is food for the future.

[annefranca]

Obrigada @yceballost 👍

Vamos avaliar com a equipe e o mais breve possível voltamos aqui com um direcionamento.

@BrunoBiagioniNeto alguma consideração?

[annefranca]

@aweell @AnaMontes11
Segue a proposta atualizada: Playroom

[aweell]

Hello @annefranca,

I don't fully understand the case active of the snapcards, but I think if this a necessity this should be discussed in another track, related to selected states there was another discussion: #1106. We can reopen if this is the case.

Related to the main topic, the snapCard changes in the background color, we are in the same position that @yceballost explained in this comment: #1343 (reply in thread). And we don't see how the issues listed in that comment can be solved with the new proposal.

[annefranca]

@aweell
Acredito que seria a mesma aplicação de "ativo" da proposta dos Chips "isTransparent", certo?

[yceballost]

After reviewing the proposal together with the comments we raised in the previous messages we consider that this should be done in an extended way.

The current cards already cover the need and, in fact, work better as they ensure good readability and usability on any color background. This proposal opens the door to possible accessibility misuse. As the intended use seems to be very specific, we believe it should be a Extended Component. If in the future we find a way to coretize this, we can reevaluate it.