Storybook: UX review of CSS components

[gfellerph]

The basic HTML components are migrated to storybook and require UX review. Here is a list of all components to review. If one component requires more discussion or has open todos, the task list entry can be converted to an issue which can be handled individually.

Also have a look at the tracker ticket to see if there are any open tasks or known issues.

What to look for:

• Are there general issues with the component, does it look good?
• Does this component exist in Figma?
• Does it have the same name?
• Are hover, focus and disabled states (if applicable) in sync?
• Does the component have the same variants?
• Do the variants have the same name?

Foundation

Preview Give feedback

1. Typography (tracking board)
2. Color (tracking board)

Components

Preview Give feedback

1. Alert (tracking board)
2. Badge (tracking board)
3. Blockquote (tracking board)
4. Button group (tracking board)
5. Button (tracking board)
6. Card (tracking board)
7. Checkbox (tracking board)
8. Collapsible
9. Heading (tracking board)
10. Text input (tracking board)
11. Radio button (tracking board)
12. Range (tracking board)
13. Select (tracking board)
14. Switch (tracking board)
15. Table (tracking board)
16. Textarea (tracking board)
17. Toast (tracking board)
18. Topic teaser

Utilities

Preview Give feedback

1. Lists (tracking board)
2. Text

After a component has been reviewed, check the task as completed or close the ticket assigned to it. We can then replace the label with stable and update the status in the Component Status Tracker.

[rouvenpost]

Ticket Storybook: UX review of CSS components #1266

• Typography:
  What is the Monospaced Font used for here? License?

• Add Description use of Monospaced Fonts

• Responsive font size:
  There are still 17px / 13px Fonts here.

• Check Figma Font Curves in Figma
• Direkt Sass... Update

• Color

• Green Success..
• Alpha White and Alpha Black is missing
• Dark and Bright Accesscolors should be in Fade Out.

• Button
  No Accent Colors allowed
  The Success Button Font should be white.

• Cards:

• From my Perspective we mix Teasers with Cards here.
• The Product Cards missing the Price Blue/Infoblu...

• Checkbox
  It seems the Hover State is not accordingly to the Figma behaviour.

• Radio Button
  It seems the Hover State is not accordingly to the Figma behaviour.

• Range
  Knob has no Hover State. Focus State has wrong color.

• Topic Teaser
  The Topic Teaser should only be on Yellow and Dark Grey BGs. No Accent colors.
  Keep the Dark Light add the Postyellow.

[oliverschuerch]

@gfellerph could you please have a look into this ticket and tell us, what to do next?

[gfellerph]

• Created a ticket to remove the monospace fonts, they are coming from bootstrap (MIT license) Remove monospace font from documentation #2888
• Black/white alpha already added
• Created ticket to deprecate accent colors (this is a breaking change and they will be removed with the next major version) Deprecate accent colors #2863
• Deprecated old signal colors, updated the green value
• Success button is already white
• Deprecated portal components like price and product cards (Deprecate Portal components #2889)
• Created a ticket for checkbox/radio button hover colors Fix checkbox/radio button hover color #2890
• Created a ticket to update the range slider hover state Update range focus style #2891