Optimize Chip

[wueestd]

https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=10370%3A49294&t=siEMKepaonFnEEmr-1

[wueestd]

please review @Cian77

[Cian77]

See comments on page

[wueestd]

thanks for the comments, I worked it trough. could you please have another look at it @Cian77 ?

[wueestd]

@rouvenpost could you please have a look at the accessible new states: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=10370%3A49289&t=ffaFCQYrNuXRLTzt-1

I have created interactive prototypes

[wueestd]

Input Rouven: Dark mode

[wueestd]

could you please check the Figma implementation and the accessibility requirements @Cian77 🙏

[wueestd]

also some changes here @gfellerph

[gfellerph]

• [x] Discuss component variant name (filter and dismissable chip)

we decide that we go with the names filter and disamissable for the moment. as soon as we define the usage of the dismissable chip, a renaming can be a option

[Cian77]

@rouvenpost AX-Check nötig

[wueestd]

• [ ] how big has the click are to be?

[wueestd]

@gfellerph review differences

[gfellerph]

@oliverschuerch, @alizedebray, @imagoiq please take over.

[imagoiq]

Here are the differences between the Chip component and his sibling, the Badge component.

Architecture

• [ ] Missing a notion of set or radio group (aka "Filter")
• [ ] Disabled state should be implemented

Filter type styles to change

General

• [ ] Gap between items should be size-mini (8px)
• [ ] Line-height should use line-height-regular (150%) instead of 100%

Per variant

Big/default

• [ ] Font should use font-size-regular(16px) instead of 15px
• [ ] Padding vertical should be size-mini (8px) instead of 0

Small

• [ ] Font should be 12px instead of 13px (variable?)
• [ ] Padding horizontal should be size-small-large(12px) instead of 7px
• [ ] Padding vertical should be 7px instead of 8px (variable?)

Hover

• [ ] Background should be black-20
• [ ] Border should black-60 and size 2px

Disabled and not selected

• [ ] Border should be black-20 and 2px size
• [ ] Background should be white
• [ ] Font-color should be black-40

Disabled and selected

• [ ] Font color should be black-40
• [ ] Border should be black-20 and 2px size
• [ ] Background should be background-dark

Focused

• [ ] Font color should be black
• [ ] Background should be black-20

Counter/nested badge

Every variant

• [ ] Counter font color should be black

Big

• [ ] Counter has an unneeded negative margin
• [ ] Counter font size should be 12px not 10px (10px is for small variant) (variable ?)
• [ ] Counter Height should be 24px instead of 22px
• [ ] Counter should not have vertical padding
• [ ] Counter horizontal padding should be 8.5px (variable?)

Small

• [ ] Gap between icon and text should be 6px not 12px (variable?)
• [ ] Counter has an unneeded negative margin
• [ ] Counter Height should be 16px instead of 22px
• [ ] Counter should not have vertical padding
• [ ] Counter horizontal padding should be 5px (variable?)

Hover

• [ ] Border should be border black-60 and 2px size
• [ ] Counter should not have a border
• [ ] Counter should have a white background

Disabled and not selected

• [ ] Counter background should be background-dark

Disabled and selected

• [ ] Counter background should be white

Input type styles to change

• [ ] Dismissible action should be before the text
• [ ] Click area from dismissible action should be 44px instead of 24px
• [ ] Gap between items should be size-mini (8px)
• [ ] Icon should come from post (currently from boostrap)
• [ ] Icon should have black-80 color
• [ ] Padding-start of the icon should be size-mini (8px)
• [ ] Icon should not have negative margin

Per variant

Small

• [ ] Icon size should be size-large (16px)

Hover + Focused

• [ ] Round background with black-20

[imagoiq]

Dev tasks: https://github.com/swisspost/design-system/issues/1864

[wueestd]

UX tasks:

• [x] write a documentation for the component
• [x] publish the component