Support for ellipsis text in dropdown list components

[vivinkrishna-ni]

😯 Problem to Solve

Components like nimble-listbox, nimble-select, and nimble-combobox display a list of options for selection. These options can include long text, and if the client wishes to limit the width of the overall component, the text may become clipped or hidden within the option. To address this, ellipsis (...) can be used to indicate truncated text for long strings within the option.

Relevant conversation: #1654 (comment)

• Update the appropriate styles for nimble-combobox, nimble-select, nimble-listbox, and other components that utilize nimble-list-option
• Add Storybook matrix test coverage for all the aforementioned components
• Accessibility: If the ellipsis text is not visible, show a tooltip to display the full text

💁 Proposed Solution

Add text-overflow: ellipsis to the nimble-list-option content slot element (code link) like below:

.content {
    padding: 8px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

If client sets max-width or otherwise limits the width, text wraps

If sufficient space is available, some components can grow but it eventually looks silly