eui
eui copied to clipboard
[Combobox] Improve long entries rendering with truncation
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:
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.
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.
Relates to #2082 , which looks like it recommends exploring exactly this solution 😅
+1 to the ask if you are able to help implement this
I'd be happy to help with implementation once I am done with my current task, sounds exciting!
👋 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.
❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.
I think this is still valuable to implement
👋 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.
Closed by https://github.com/elastic/eui/pull/7028