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.
Just leaving some feedback while refactoring some Lens code which uses the
EuiComboBoxwith some long option strings.The use case for the
EuiComboBoxis 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
EuiComboBoxcomponent.I can imagine an API like
truncation: { width: number, ellipsis?: 'initial' | 'end' | 'middle' } | falsewhere thewidthis used to automatically compute the font size and the ellipsis positioning.