Dropdown > Direction for rendering overflowing, non-wrapping text within items
In some cases, we might need to display long non-wrapping texts within a dropdown's items. For example, the notification settings display the user's emails, which might overflow the dropdown menu:
Implementation plan
-
GlTruncate
: ensure the rendered element has an accessiblearia-label
attribute. -
GlCollapsibleListbox
-
Make dropdown's width more flexible: -
min-width: 15rem
-
max-width: 28.5rem
-
-
Leverage GlTruncate
to truncate long items' names. This should be probably be the consumer's responsibility, so this can be a recommendation in the docs.
-
-
Ensure the notifications settings render properly as per gitlab-org/gitlab#373843 (comment 1227467886).
Edited by Paul Gascou-Vaillancourt