[Select] Dialog size

[aweell]

The current problem

The select dialog width is tight to the trigger width changing with the size prop. When an option list doesn't fit the defined size we make an overflow: ellipsis (Fig. 01). Being the label of an option a necessary content to display in order to make a selection, this approach is leading to a bad user experience.

Fig. 01 - Select option ellipsis behavior

Proposed solutions

• Disconnect the dialog size from the trigger size and set the width to max-content
• Allow line-break in every dialog options

Related issues

#900

[GomezIvann]

I'm continuing this discussion since we are receiving more and more requests to allow option labels to be fully displayed. I think the solution depends on the component:

• The most common anatomy of a Dropdown is a button that triggers a menu. The menu size does not necessarily need to be the same as the button since, in most cases, buttons have a fitContent width with a small label, while the option labels in the dropdown menu are always a bit longer. I don't see any direct relationship between the trigger and the menu.
  In this case, I would go for a menu whose width is not related to the trigger, but to the longest label of its options.

Dropdown menu anatomy, from the component gallery

• Regarding the Select, this is a bit more complex. I think we can all agree that the list should have the same size as the input that opens and closes it. So, my take here is to rethink a bit the spacing of each list option and allow line breaks for the labels and thus eliminate the current ellipsis.

Example from react-select

[GomezIvann]

After discussing with @rconcepcion3, we have decided we are gonna stay with the ellipsis to avoid possible redesigns when a long label has to coexist with a checkbox (multiple mode) and/or an icon. Instead, we are gonna add the built-in prop title to each option so it appears like this:

The built-in tooltip will display the full label until we implement our version of Tooltips.