Optimize Tag - Githubissues

swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

106 stars 13 forks source link

Optimize Tag #1396

Closed wueestd closed 6 months ago

wueestd commented 1 year ago

https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=11194%3A50777&t=5mzQjs4il43FOfTt-1

wueestd commented 11 months ago

@rouvenpost ich habe die Tags einmal in der Form und im Styling etwas überarbeitet. Die Idee ist, dass Tags überall dort zum Einsatz kommen, wo Kategorien entstehen. Zudem sollten sie sich klar von Chips unterscheiden. Könntest du dir das einmal anschauen?

rouvenpost commented 11 months ago

@wueestd wird der Active State noch ergänzt oder brauchts den nicht?

wueestd commented 11 months ago

https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=11194%3A50777&t=GUPIwHa9X6FjgfKx-1 Active state habe ich bewusst weggelassen und sonst würde ich glaube einfach den hover nehmen, was meinst du? @rouvenpost

wueestd commented 10 months ago

could you please check the new component @gfellerph

gfellerph commented 9 months ago

Looks good, a few inputs:

Can there be a text only tag?
Text on the green/success tag needs to be black according to the current WCAG 2.1 contrast algorithm. With WCAG3s APCA it will be white, but that's not released yet
Is there a max-length for tags? I think it could make sense to build a more solid tag that does not break on multiple lines. We could set a character limit of e.g. 20 (in CSS: max-width: 20ch; text-overflow: ellipsis)

Re-assigning to @wueestd for finalizing the design.

wueestd commented 7 months ago

yes the can be text only, I added a toggle
I changed the text on green to black
we can not set a limit but we can write guidelines. not sure if setting a character limit is the right thing to do :)
also I would get rid oft the small 20px height variant or do you see any need for this?

@kaloyanso could you do a quick review of the component: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=12815%3A61841&mode=design&t=Z8WKSeFXKT9PNnrY-1

wueestd commented 6 months ago

defined a max lenght and added documentation. Have a look @gfellerph !

gfellerph commented 6 months ago

Looks good from my perspective! I added the component to the tracker board https://github.com/orgs/swisspost/projects/4/views/1?pane=issue&itemId=43864320 and created a dev ticket https://github.com/swisspost/design-system/issues/2237.

@wueestd, you can close the ticket if nothing else needs to be done on your side.