Styles: Update Chip

[imagoiq]

Architecture

Tasks

Beta Give feedback

1. Missing a notion of set or radio group (aka "Filter")
2. Disabled state should be implemented
3. Add radio button variant to the checkbox chip
4. Change naming from badge to chip (deprecate class badge for chips and keep badge for badges)

Filter type styles to change

General

Beta Give feedback

1. Gap between items should be size-mini (8px)
2. Check if line-height from design is appropriate 150%. Or use whatever is best for the dev.

Per variant

Big/default

Beta Give feedback

1. Font should use font-size-regular (16px) instead of 15px
2. Padding vertical should be size-mini (8px) instead of 0. Or use whatever is best for the dev and relates to line-height.

Small

Beta Give feedback

1. Font should use font-size-14 instead of 13px
2. Padding horizontal should be size-small-large (12px) instead of 7px

Hover

Beta Give feedback

1. Background should be black-20
2. Border should black-60 and size 2px

Disabled and not selected

Beta Give feedback

1. Border should be black-20 and 2px size
2. Background should be white
3. Font-color should be black-40

Disabled and selected

Beta Give feedback

1. Font color should be black-40
2. Border should be black-20 and 2px size
3. Background should be background-dark

Focused

Beta Give feedback

1. Font color should be black
2. Background should be black-20

Counter/nested badge

Every variant

Beta Give feedback

1. Counter font color should be badge

Big

Beta Give feedback

1. Counter has an unneeded negative margin
2. Counter font size should be font-size-12 not 10px
3. Counter Height and width should be 24px
4. Counter should not have vertical padding. Or use whatever is best for the dev.

Small

Beta Give feedback

1. Gap between icon and text should be 6px not 12px. No need to use spacing variables, use custom value.
2. Counter has an unneeded negative margin
3. Counter Height and Width should be 16px instead of 22px
4. Counter should not have vertical padding. Or use whatever is best for the dev.

Hover

Beta Give feedback

1. Border should be border black-60 and 2px size
2. Counter should not have a border
3. Counter should have a white background

Disabled and not selected

Beta Give feedback

1. Counter background should be background-dark

Disabled and selected

Beta Give feedback

1. Counter background should be white

Input type styles to change

Disabled and selected

Beta Give feedback

1. Dismissible action should be before the text
2. Click area size ? Need to be discussed!
3. Gap between items should be size-mini (8px)
4. Icon should come from post (currently from boostrap)
5. Icon should have black-80 color
6. Padding-start of the icon should be size-mini (8px)
7. Icon should not have negative margin

Per variant

Small

Beta Give feedback

1. Icon size should be size-large (16px)

Hover + Focused

Beta Give feedback

1. Round background with black-20

[b1aserlu]

@wueestd @gfellerph @imagoiq
I noticed that in figma the component chip isnt ready for developement yet. And there have indeed been changes made to the figma file since I last had checked.

Am I right to assume that the task cannot be properly started before the chip component in figma is ready for developement?
Is the task list in this ticket still up to date?
How will the process look like to go from the current badge component to the new badge and chip components?

@oliverschuerch mentioned that the new chip component might be a canditate that will be implemented as a webcomponent.

[wueestd]

I put the task on ready for dev 👍 the only thing that changed since the review is in my mind some Figma Architecture and the focus state of the dismissable chip

[b1aserlu]

• Deprecate current Badge
• implement new Badge in a tab (web component)
  Styles in components till the old Badge is gone
• create new component Chip (web component & normal HTML/CSS)
• create Chip-Group components

[b1aserlu]

This Issue will be closed in favour of the new Issue #2195 which is a collection of Issues generated from this Issue.