Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Combobox] Improve long entries rendering with truncation #5997

Closed
dej611 opened this issue Jun 24, 2022 · 8 comments
Closed

[Combobox] Improve long entries rendering with truncation #5997

dej611 opened this issue Jun 24, 2022 · 8 comments
Assignees
Labels
feature request help wanted The EUI team is looking for community members to pick up and implement this issue stale-issue

Comments

@dej611
Copy link
Contributor

dej611 commented Jun 24, 2022

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.

@cchaos
Copy link
Contributor

cchaos commented Jun 24, 2022

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 cchaos added the help wanted The EUI team is looking for community members to pick up and implement this issue label Jun 24, 2022
@chandlerprall
Copy link
Contributor

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

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

@mbondyra mbondyra assigned mbondyra and unassigned mbondyra Jul 3, 2022
@mbondyra
Copy link
Contributor

mbondyra commented Jul 3, 2022

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

@github-actions
Copy link

👋 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
Copy link

github-actions bot commented Jan 6, 2023

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

@dej611
Copy link
Contributor Author

dej611 commented Jan 9, 2023

I think this is still valuable to implement

@github-actions
Copy link

github-actions bot commented Jul 9, 2023

👋 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.

@cee-chen
Copy link
Member

Closed by #7028

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request help wanted The EUI team is looking for community members to pick up and implement this issue stale-issue
Projects
None yet
Development

No branches or pull requests

5 participants