Chips (desktop)

[annefranca]

Goal

Ajustar o componente Chips para desktop, garantindo que ele adote as mesmas dimensões dos chips utilizados na versão mobile.

Context

Verificamos que a altura atual do componente Chips na versão desktop não está em conformidade com as diretrizes de acessibilidade, especialmente ao considerarmos o tamanho da área clicável. Além disso, sua largura está muito reduzida em comparação com os Chips utilizados na versão mobile.

Para garantir uma melhor experiência de uso, é fundamental que o componente respeite as dimensões mínimas recomendadas para áreas interativas, assegurando legibilidade, facilidade de interação e conformidade com os padrões de acessibilidade. Dessa forma, ambas as versões teriam o tamanho de 40px utilizando o mesmo padding.

https://zeroheight.com/4e1de193d/p/920c32-8-tamanho-da-area-clicavel

Impact

Ajustando as dimensões do componente para a versão desktop, garantimos a conformidade com os requisitos de acessibilidade, ao mesmo tempo em que promovemos consistência visual e aprimoramos a usabilidade entre as diferentes plataformas.

Discussion Questions

N/A

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/design/eehoVrfVGfDk1SreEMTqSd/Chips-para-desktop?node-id=6883-14114&t=j1GoTD2LHP3HZAen-1

[yceballost]

Hi Anne!

We are agree with this evolution, we were talking about the approach to work on it.

We are going to change size in desktop breakpoints following your proposal. (using the same chip size as mobile (text will increase))

And we were thinking about creating a new prop call small to allow change the chip size to small sizes. This is because we think that could have cases where a small size of the chip is needed. For example, compact designs like CMS, or a filter sidebar in complex ecommerces.

We created an issue to work on it #2222 (nice number xd)

[annefranca]

Obrigada!

Você tem alguma estimativa de prazo?