Adjust the chip design to the Drupal Design system

Created on 3 July 2022, over 2 years ago
Updated 23 May 2024, 6 months ago

Problem/Motivation

Currently the design of the chip component differs between the one used in Project Browser and the one outlined in the Drupal Design system.

Project Browser:

Drupal Design system:

Proposed resolution

- I would vote for to adjust the design of the chips to the one defined in the Drupal Design system Figma document
- Currently based on the project_browser_chip.png the padding is 10px on the left and right but would have to be changed to 12px on the left and 8px on the right. The padding between the chip label and the closing icon should be 8px as well.
- The style of closing icon would have to be adjusted as well. The icon currently used for chips in project browser has an extra thin white outline which looks a bit off and which was my initial motivation to investigate the topic. The closing icon used in the Drupal Design system document looks cleaner in comparison.
- The only thing which would have to be checked is if the border radius used for the chip in project browser is in line with the one used in the Drupal Design system (I was unable to look up the used value there because I don't have a Figma account yet). Same goes for the font and chip sizes for the active filters in blue as well as the smaller font and chip sizes on the module cards.

Remaining tasks

  • βœ… File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
πŸ“Œ Task
Status

Fixed

Version

1.0

Component

User experience

Created by

πŸ‡©πŸ‡ͺGermany rkoller NΓΌrnberg, Germany

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024