Badges don't truncate (well)

[cchaos]

I've seen this in two places in Kibana.

1. The filter bar when the filter name is super long The window to edit filters is mispositioned if the filter is too long kibana#35225

2. On the new dashboard panel custom time range, with the icon on the left, it cuts off the text from right to left.

---

Question: Do we truncate or do we let the text wrap?

We will need a solution for Kibana 7.4

[snide]

Truncate works for me. It makes sense given the "small" nature of these things.

[mdefazio]

I agree with truncating. Wrapping the text makes it look like 2 badges IMO.

[hbharding]

New guy so no strong opinion, but I’m in favor of forcing badges to truncate / no text wrap. The only “pro” that jumps to mind is that text wrapping allows the user to read the entire badge, but I think this might be able to be solved with a tooltip. I’m worried that adding text wrapping would break a bunch of existing designs. An extra line would give the badge much more visual prominence compared to other nearby badges.

Re: the screenshots

1. Perhaps we truncate in the middle for super long badges without icons?
2. When icon is left, I think it would be helpful to see the icon. Truncate text on the right side?

[cchaos]

Thanks all! I'll go the truncation route.

1. Unfortunately we can't truncate in the middle, only on the right with text-overflow: ellipsis.
2. But yeah for the second screenshot, we're using flex-direction to swap sides for the icon, which causes truncation to happen weirdly. I'll just need to actually position the icon on the particular side and not use the flex trick.

[mdefazio]

can you use order instead of direction?

[cchaos]

So the good news is, it looks like truncation was just broken when the full badge was given an onClick turning it into a <button> because it was just missing a class. I'm testing out the other configs to double-check but should be an easy fix.