Enhancement: Subtitle/description for combobox-item

[jgibson02]

Description

Provide a subtitle/description prop for displaying a secondary label on a combobox-item

Acceptance Criteria

• [ ] A prop is provided to render a secondary label within a combobox-item

Relevant Info

Which Component

combobox-item

Example Use Case

In ArcGIS Velocity, we have a spatial reference selector which has ~9000 items, and users often are familiar with choosing a spatial reference by either the text label (e.g. "GCS WGS 1984") or by its numeric WKID (e.g. "4326"), so we used the subtitle prop that calcite-react MenuItems provide to display the numeric WKID on the menuitem, and filtering automatically filters against that subtitle as well.

Due to a bug in calcite-react where scrolling while using the appendToBody and virtualized props together will cause the dropdown to close, we are looking to switch to using calcite-components combobox instead, but not having this subtitle is a serious UX drawback.

[macandcheese]

This would probably be best implemented as a content-end slot alongside a description string prop.

[hccampos]

We should also have the ability to provide a value to be displayed in the input when the combobox is closed. In this spatial reference case, it could display the WKID or some other shorter representation of the spatial reference.

In our case, we bumped into this while working on a Timezone picker where we have a long name with the IANA code and the UTC offset, but we don't want to display all that information in the input itself, since it would make the input too large.

[ashetland]

Designs for a description prop and a content-end slot are ready to go in this Figma file. Also outlined is a proposed value-short prop to address the needs in this comment. cc @jcfranco

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[ashetland]

A round of feedback has resulted in some fine-tuning to do on the abbreviated value prop and its behaviors.

[ashetland]

Revised designs and full context with related issues in epic #6720 are available in this Figma file.

Designs include:

• description prop
• content-end slot
• new prop for an abbreviated label to be shown in the input and in the item.

Possible names:

• text-label-short
• text-label-abbreviation
• text-label-abbreviated
• text-label-abbr

Notes for docs:

• When provided, displays an abbreviated value in the Comobobx Item when Combobox is expanded and overrides the textLabel as the selected value in the input.
• Recommend 5 characters max.

cc @jcfranco @SkyeSeitz @macandcheese

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[SkyeSeitz]

Although text-label-short is less characters (always a plus), its role may be a bit ambiguous? text-label-abbreviated or text-label-abbreviation comes with perhaps more clarity, imo.

[ashetland]

Although text-label-short is less characters (always a plus), its role may be a bit ambiguous? text-label-abbreviated or text-label-abbreviation comes with perhaps more clarity, imo.

Added a couple more options to the list above.

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.11.0-next.12

[ashetland]

Reopening issue to correct a couple small misses during design review. Design spec has been updated. cc @jcfranco

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.11.0-next.21