Longer name overflow on `.add-value.button.o-icon-valuesuggest` buttons

[aviannamiller]

Getting some container overflow on .add-value.button.o-icon-valuesuggest buttons (on item/item set edit) with longer data type names:

[allanaaa]

+1.

Not sure we need to have some of these really long names with advertising text in them. People can google those.

Avianna's "NDE AAT - materials" example above will still be a problem though.

[jimsafley]

@kimisgold See above. ValueSuggest adds quite a few data types with long names. Can you think of a way to style the buttons to better accommodate them? Perhaps a maximum width, ellipsis, and a hover to see the full name?

[kimisgold]

Those are some massive button labels for sure. I also see possibility of many value data type options, and those multiple buttons are taking up a lot of space. I'm prototyping out an alternative layout that uses a select and button combo for adding values. Something like this:

Is a solution like this something we're interested in?

[jimsafley]

I think that's great for the .multiple-selector. Are you planning on changing the .default-selector and .single-selector?

[kimisgold]

I think the default selector would receive similar treatment, and the single selector would stay the same.

[kimisgold]

I've pushed a branch on the core for this: add-values-select. I can't get the font icons for the default value types, as selects and their options don't allow pseudo elements. Very open to feedback on whether the tradeoffs are worth it.

[allanaaa]

Hrm. Before/after:

[kimisgold]

That looks like it needs a hard refresh.

[allanaaa]

Yep! The data-type dropdowns are showing the full values when clicked on.

The values themselves aren't displaying the full values - any chance we can do that too?

And, I'm not clear on why some data types will show all their options in a dropdown when you click in the values box, where others don't. Is that just dependent on how many values there are to suggest? Just curious.

[kimisgold]

This clipping for the ValueSuggest autocomplete is managed by the jQuery Autocomplete plugin. I don't think I can have it mimic native <select> element behavior, where the options container expands to fit the longest string, but I can have it wrap and indent after the first line.

I'm not familiar enough with the autocomplete for the question about autocomplete options appearing on first click, probably a question for @jimsafley.

[jimsafley]

And, I'm not clear on why some data types will show all their options in a dropdown when you click in the values box, where others don't. Is that just dependent on how many values there are to suggest? Just curious.

The module suggests values in one of two ways. The first displays all suggestions at once. These are typically smaller lists of values that are stored locally. The second displays suggestions after user input. These are typically very large lists of values drawn from a remote vocabulary service.