customItemPresentation but for chips in vaadin-multi-select-combo-box

[DevDuki]

Describe your motivation

Similar to the custom item presentation, but for the chips in the input field in vaadin-multi-select-combo-box. I would like to color code them via a hash function. In other words, the chips represent users and to be able to distinguish each user, I use a hash function on its id property, so that each user has its own color. I use the same mechanism to color code a user's avatar background throughout the application, which is why I would love to reuse them here, so that a user recognises a selected user from other parts of the application. Right now I can't do that, not even via the itemClassNameGenerator. because each user has a unique color code.

Describe the solution you'd like

• Perhaps the same mechanism like the customItemPresentation, just for the chips (customChipPresentation ?). I can then inline style a simple span Element or something like that.

Describe alternatives you've considered

I was thinking of abusing the itemClassNameGenerator but I couldn't figure out how to deal with unique color codes for each user.

Additional context

No response

[rolfsmeds]

Yeah, dynamically generated per-item styles are tricky to pull off when all you have is classnames.

The only solution I could think of is to generate a style block with classnames for the colors you need and then use those classnames in the MSCB classNameGenerator, along the lines of this:

Element generatedStyles = new Element("style");
StringBuilder sb = new StringBuilder();
for(String userId : userIds) {
    String hashColor = getHashedColor(userId);
    sb.append(".user-").append(userId).append(" {")
            .append("background").append(hashColor)
            .append(";}");
}
generatedStyles.setText(sb.toString());
UI.getCurrent().getElement().appendChild(generatedStyles);

and then generate classnames based on the user-id, like
return "user-" + userId;
So that e.g. user-1234 matches the generated css

.user-1234 { background: #asdafaf; }

If you were to go with that solution, I think it would be best to have that css generator apply the hashcolor to a css variable instead, so that you could use it for properties other than backgrounds too (like the Avatar borders)