Number Badge/Counter Badge (zie comment design review)

nl-design-system / rijkshuisstijl-community

Unofficial Rijkshuisstijl components and design tokens based on the NL Design System architecture. This project is not endorsed by the Dutch Ministry of General Affairs.

https://rijkshuisstijl-community.vercel.app/

European Union Public License 1.2

6 stars 4 forks source link

Number Badge/Counter Badge (zie comment design review) #681

Open AdhamAH opened 1 month ago

AdhamAH commented 1 month ago

https://www.figma.com/design/txFX5MGRf4O904dtIFcGTF/NLDS---Rijkshuisstijl---Bibliotheek?node-id=1233-4294&node-type=symbol&t=W7kpaMkoogPQzyYh-0

PR #679

Rozerinay commented 3 weeks ago

Design review 1

In Figma hebben we de Number Badge een vaste hoogte van 28px gegeven.

Deze hoogte is gebaseerd op de label width van 12px, met daarbovenop 8px inline-padding, wat optelt tot een totale width van 12 + 8 + 8 = 28px. Om de Number Badge als een perfecte cirkel weer te geven, moet de hoogte gelijk zijn aan de breedte, en daarom is deze ook op 28px gezet.

In de code is het nu 36px bij 36px. Kunnen we deze 28px bij 28px maken?

AdhamAH commented 1 week ago

Het problem is dat de font-size is 20px daarom de height gaat altijd 20px zijn. En als ik de width naar 12px zet, dan wordt het geen cirkel. En daarom het is 8+20+8=36

Ik kan de font-size naar 12px zetten dan werkt het.Of ik zet de padding naar 4px. Maar in ieder geval gaat er veranderen zijn in de style.

AdhamAH commented 4 days ago

Ook een notitie: de naam is nu Counter Badge . Ik heb deze badge gemaakt zodat je niet alleen een number kunt gebruiken, maar ook een string. Dit betekent dat je bijvoorbeeld een string zoals "Nieuw" kunt toevoegen. Als we de component als Number Badge willen houden, maak ik hem alleen geschikt voor numbers. Of ik kan de naam veranderen naar Data Badge, zodat zowel string als number ondersteund worden.