[EuiIcon] Add tokenVersion

[Dosant]

In Kibana we would like to improve support for fields of semantic version type:

• Support for semantic version data type in index patterns, aggregations, and Lens kibana#93248

Would be nice to have a new token in EUI for this type of field: https://eui.elastic.co/#/display/icons#tokens,
Visually, I think it should somehow be related to semantic version "syntax" e.g.: 1.* or v1

By coincidence tokenVariable could be a decent fit (v) until something specific is implemented.

[elizabetdev]

Thanks, @Dosant for opening this issue.

I'm going to explore some ideas and then I can share the designs here. After that, we can decide what works best and add the new token to EUI.

[elizabetdev]

Hi @Dosant,

I started exploring some ideas and this is the design rationale:

• I tried to avoid having numbers. Because it could confuse users to think that's the actual version.
• I tried to just use letters and symbols
• It has to look good in a 16px size. So more of two elements don't work.

Based on this rationale I ended up with 4 versions:

My favorite version and the one I believe it works better is the version 4:

Let me know if you agree to use version 4, or if you think any of the other versions work better.

[Dosant]

@miukimiu, thanks! I agree with the reasoning and also like version 4 the most 👍

I've also just thought about one more option: existing tokenTag. A tag is a label and a version is basically also a label (a label with some rules).

What do you think about this one?

[elizabetdev]

@Dosant yes, the tokenTag works well for indicating a version. For example, GitHub uses it:

And since PR #5251 this icon is no longer being used in Kibana. I did a quick search on the Kibana repo.
So I would go for it! 🎉

But when I look at this tokenTag design I'm not sure I would straightway say that it is a tag. So what do you think of improving the design to make it look more like a tag with a circle inside instead of a rectangle? See tag v2.

[Dosant]

But when I look at this tokenTag design I'm not sure I would straightway say that it is a tag. So what do you think of improving the design to make it look more like a tag with a circle inside instead of a rectangle? See tag v2.

@miukimiu, I like it! :)

I'll then start using tokenTag in Kibana in elastic/kibana#93248 while you're making it nicer in EUI 👍