Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.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?
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | Capture d’écran 2023-10-20 à 14.49.58.png | 21.34 KB | gbois |
| #6 | Screenshot 2022-09-24 at 08.04.10.png | 16.27 KB | fjgarlin |
| drupal_design_system_chip.png | 62.39 KB | rkoller | |
| project_browser_chip.png | 186.05 KB | rkoller |
Issue fork project_browser-3293977
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
rkollerComment #5
pontus.talvikarhu commentedComment #6
fjgarlin commentedSomehow I was expecting to find the close button with a different shade of blue and some additional padding (or the "x" slightly smaller), but that's not the case:
vs
Drupal Design system:
Shouldn't we address that too whilst we're working on this?
Comment #7
rkollerthanks for working on the issue! and i agree with #6 even though i am still a bit confused which styling related issues could be already fixed and which better have to wait until #3285889: [meta] Svelte app themability is fixed.
1) the chips definitely need adjustments based on the issue summary. but i disagree with #6 in regards of "expecting to find a different shade of blue and some additional padding". the whole styling of the button needs to be updated. basically the current state in project browser needs to be inverted. if you take a look at the button in the drupal design system you have a darker grey close button body and the X is in the color of the background (like see though/cut out). in project browsers you have a thin white outline and a white X while the body is see through to the blue background.
in the drupal design system there isn't any case for a close button with a blue chip. but if you take a look at filter chips in the chips section https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?node-id=30586%3A7152 the checkmark icon is in white as the label. so i would think the close button should be white with the style adjusted like described before. (and not sure how the chip is set up if it is done in css or with an svg in claro)
2) if you mouse over the close button the extent of the click/touch target is the exact same like the extent of the close button. but according to the design system the touch target should be wider. perhaps a regression cuz #3293694: Increase click target on remove-filter on the "chip" should have dealt with that according to the issue summary and title?
3) currently the focus outline for the chips close button is a square while the outline in the design system is displayed as a circle.
4) the chip label text is in bold for the chips
Comment #8
pontus.talvikarhu commentedI absolutely missed that this had been commented on months ago. Sorry!
Is this still relevant in the current scheme of things? I can absolutely get back to it, but working at cross purposes with other efforts won't really help.
Comment #9
fjgarlin commentedI think the issue is still relevant. You might need to pull the recent changes and rebase as there has been a lot of activity in the past weeks/months.
Comment #10
tim.plunkettComment #11
chrisfromredfinComment #13
gbois commentedI make this modification (see screen Capture d’écran 2023-10-20 à 14.49.58.png) but we need another image file svg to the cross and after i think that was good
Comment #16
jonblatho commentedComment #18
jonblatho commentedPer @gbois's comment above, I replaced the chip close icon with that from the Drupal Design system and removed the old one, and I updated padding accordingly. Merging in months' worth of changes led to some craziness but it looks like stylelint is no longer complaining. The merge request title is no longer accurate; I'm new to contributing and can't figure out how to deal with that — very sorry! That aside, I think this should be ready.
Comment #22
chrisfromredfinMuch better; matches Drupal design system and I find it more readable and looks more Drupal-y. Reviewed & tested in DrupalPOd.
Comment #23
jonblatho commentedThanks Chris! I wanted to add that I kept the chip background color gray because blue is intended for the "active" state of a chip per the Drupal Design system Figma document. However, there is no "inactive" counterpart in this case. Given that, it seems best to stick with the "default" state as pictured.