Skip to content

Dropdowns > Improve UX with long options text

Paul Gascou-Vaillancourt requested to merge 2205-dropdown-overflow-tweaks into main

What does this MR do?

This change affects both GlCollapsibleListbox and GlDisclosureDropdown. We are dropping the strict width definition in favor of a min-width set at 15.5rem and a max-width of 28.5rem. This will result in better space usage for dropdowns with short items, and improved readability in ones that have long items.

We also expose popperOptions props to allow controlling the underlying Popper.js instance more precisely.

Additionally, we're adding recommendations on how to deal with options that would overflow the dropdown's content. The suggested approach is to render options (and potentially the toggle text) with GlTruncate.

To accompany this suggestion, GlTruncate's accessibility is being improved by adding the full text as an aria-label attribute on its root SPAN element.

This change was initially motivated by an overflowing option in a GitLab listbox:

Before After
Screenshot_2023-04-05_at_2.03.57_PM Screenshot_2023-04-05_at_2.04.44_PM

This also supports a more recent caveat where we wanted disclosure dropdowns to overlap the new super sidebar, but couldn't as their width was great than the super sidebar's:

Before After
Screenshot_2023-04-05_at_2.10.32_PM Screenshot_2023-04-05_at_2.09.38_PM

Closes #2205 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports