eui icon indicating copy to clipboard operation
eui copied to clipboard

[Combobox] Improve long entries rendering with truncation

Open dej611 opened this issue 2 years ago • 3 comments

Just leaving some feedback while refactoring some Lens code which uses the EuiComboBox with some long option strings.

The use case for the EuiComboBox is about selecting fields, which can have very long names, hence the need to provide a better rendering than the default behaviour in the combobox. @mbondyra came up with this logic about computing the width of the element and passing such information into a truncation rendering component for the label: Screenshot 2022-06-24 at 16 46 35

The logic adopted in Lens is available here: https://github.com/elastic/kibana/pull/134773/files#diff-6b4c7395f151e65267d98e78ea1944f51ea9fce2747f73e704ddadc00c666d81R51

It would be nice to have a truncation feature out of the box within the EuiComboBox component. I can imagine an API like truncation: { width: number, ellipsis?: 'initial' | 'end' | 'middle' } | false where the width is used to automatically compute the font size and the ellipsis positioning.

dej611 avatar Jun 24 '22 14:06 dej611

I would love for this feature to be part of our general EuiSelectable component! Would either of you be willing to contribute directly to EUI? I took a look at that file but I'm not actually understanding how it works.

cchaos avatar Jun 24 '22 15:06 cchaos

Relates to #2082 , which looks like it recommends exploring exactly this solution 😅

+1 to the ask if you are able to help implement this

chandlerprall avatar Jun 24 '22 15:06 chandlerprall

I'd be happy to help with implementation once I am done with my current task, sounds exciting!

mbondyra avatar Jul 03 '22 13:07 mbondyra

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] avatar Dec 30 '22 16:12 github-actions[bot]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

github-actions[bot] avatar Jan 06 '23 16:01 github-actions[bot]

I think this is still valuable to implement

dej611 avatar Jan 09 '23 08:01 dej611

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

github-actions[bot] avatar Jul 09 '23 00:07 github-actions[bot]

Closed by https://github.com/elastic/eui/pull/7028

cee-chen avatar Sep 18 '23 22:09 cee-chen