Dropdowns > Improve UX with long options text
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 |
---|---|
![]() |
![]() |
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 |
---|---|
![]() |
![]() |
Closes #2205 (closed)