Select with description - how to include description in SelectToggle?

[cben]

trafficstars

Is this a new component or an extension of an existing one? Existing <Select> component, with <SelectOption> showing secondary description rows.

Describe the feature When the Select isOpen, each option can show 2 rows: value + description.
But the SelectToggle header only shows the selected value, no description. Depending on how values vs descriptions were used, this may be hiding important information, especially when the dropdown is closed.

More generally, it's useful to control how an option shows in SelectToggle separately from how it shows in SelectOption.

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths

Use case: In OpenShift Cluster Manager when choosing cloud machine types, we put human-friendly details like CPUs and RAM size into the more prominent value and the low-level instance id into the description. But the low-level ids are meaningful to some users and our design wants to display them when the dropdown is closed. This is the desired behavior:

Alternative styles e.g. showing the description in a smaller 2nd line inside SelectToggle would also be OK.

I'm not sure whether this makes sense to enable automatically when descriptions are present. Besides backwards-compatibility concern, I think it does depend on specific use case.

Any other information?

The docs are unclear how to achieve this.

• placeholderText only shows when selections is empty.

  • It can forced to show by enabling customContent but then the options are not rendered either, not what I wanted.

• By playing with props and reading the code, I figured out selected doesn't have to match any existing option. The code does attempt to look up child option(s) with matching value to query it how it wants to be displayed, but it falls back to displaying selected as a string.

  Is this the official approach? If yes, I can send doc PR. Updated the "Single with description" demo with this technique: https://codesandbox.io/s/wild-night-3ir8b1

If API extension is desired, perhaps SelectOptionObject interface should be extended with an optional method to control how SelectToggle shows it?

[mcoker]

Hey @cben, as an interim solution, you could wire this up by also including the description as a child of <SelectOption> and hiding it via CSS when it's in the select menu - https://codesandbox.io/s/stoic-montalcini-z3cfg8?file=/style.css

[mcarrano]

Upon some discussion with @shirimordechay a different alternative might be to do something like this:

@mcoker @nicolethoen @tlabaj I'm wondering what kind of flexibility we have for customizing menu items and reflecting that in the toggle. For example, I'm wondering if we can leverage some of the techniques demonstrated in this example: https://www.patternfly.org/v4/components/select#multiple-with-custom-objects Thoughts?

[nicolethoen]

@mcarrano The Select component in its current implementation does not have very much flexibility on the contents on the toggle. But if a MenuToggle and Menu is used to build something that looks like a Select, then you'd have more flexibility.

The MenuToggle, as it's implemented now, does not have styles for 'description text' below the Toggle's primary text. However, it could be used to display more info as is done in the screenshot you included

[mcarrano]

@cben After discussing this more with the team, it seems like the best path forward is for you to build this using our new Menu and Menu toggle components that will give you more flexibility (as opposed to the Select component). You can see some examples of how to use that here: https://www.patternfly.org/v4/demos/composable-menu. If you reach out to us on Slack we'd be glad to help you with any customization you may need.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.