Adding option to display the entity id

Thanks for the suggestion @elgandoz, I'm currently working on it. I have a POC and it is really close to be done 🥳

I've whipped up a POC with the new "Include entity ID" feature, plus some fresh styling that matches the current design.

Check it out on: Drupal Design System → (Figma link)

Issue where it is discussed: https://www.drupal.org/project/drupal/issues/3222995 ✨ Implement chips based autocomplete designs Active

Include entity id

Don't include entity id

User list widget (new styling)

Include entity id settings

Initially, I was skeptical about having the id in a circle before the tag, since it takes up too much real estate, pushing the tags to the right, and makes scanning tags harder. But thinking more about it, it is only an option. And if you decide to enable id's, it's to actually use them. In that case it makes sense that they get some prominence, in a circle before the tag.

All that aside, your design looks great!

Only thing I would suggest is moving the circles slightly to the left, to have same spacing to the left, top and bottom. I tried to move them a bit in a new image, to illustrate what I mean.

What do you think about it?

Hi @ressa!

Thank you for your feedback. I've made adjustments to the styles based on Figma design and believe the result is now more consistent and visually appealing.

Please take a look at the updated images on https://www.drupal.org/project/tagify/issues/3380516#comment-15310408 ✨ Adding option to display the entity id Needs review . I'm open to further feedback and suggestions.

Looks great now, thanks @gxleano!

Changing status to RTBC for the great design suggestions, in case you want to create the code changes here as well, as a next step?

I am not sure if the code already contain the new design and form option ... I tried downloading a zip-file of the branch, but could not, but I am ready to test any changes in a MR :-)

Thanks @gxleano, it looks great and works well!

There's only a minor detail in Firefox. There's a white line in the center, when I hover over a tag. It's a little bit tricky to recreate, but this video is the best I could manage. It looks like this rule is involved:

.tagify__tag:focus div::before, .tagify__tag:hover:not([readonly]) div::before {
  --tag-bg-inset: -2.5px;
  --tag-bg: var(--tag-hover);
}

Hi @ressa
I can't reproduce it on Firefox. What Firefox version are you using? Additionally, are you using an alternative admin theme other than Claro?

Ah yes, nice catch, I didn't think about that at all. I am using Claro Compact → . I might raise the issue there.

I checked in standard Claro, where it looks just great!

I created a Claro Compact issue about it.