Combobox, truncate long single-select values

[ashetland]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

When in selection-mode="single" Combobox should truncate long values. This would also help Calcite Input Time Zone where the item labels can be quite long.

Truncated long values should use title attribute to display the full text. This would leave calcite-tooltip available for additional context and configurations.

Acceptance Criteria

See Figma file. Values populated by long item labels are truncated based on available width inside the input field.

Relevant Info

cc @jcfranco

Which Component

Combobox, Calcite Input Time Zone

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

[github-actions]

cc @geospatialem, @brittneytewks

[eriklharper]

Truncated long values should use html label to display the full text. This would leave calcite-tooltip available for additional context and configurations.

Curious about the "why" behind this? <label>s are normally used to give names to form fields, not be used for arbitrary pieces of text, in this case being the name of the selected item inside a combobox.

[eriklharper]

Also, I left a note in the Figma file, but the linked Codepen is using a very old version of Calcite (1.8.0). As of the current version (2.7 at the time of writing this) truncation is present since this was added as part of the new selection-display property introduced in 1.11: #7912

[ashetland]

Truncated long values should use html label to display the full text. This would leave calcite-tooltip available for additional context and configurations.

Curious about the "why" behind this? <label>s are normally used to give names to form fields, not be used for arbitrary pieces of text, in this case being the name of the selected item inside a combobox.

Womp womp, updated this to title attribute

[ashetland]

Also, I left a note in the Figma file, but the linked Codepen is using a very old version of Calcite (1.8.0). As of the current version (2.7 at the time of writing this) truncation is present since this was added as part of the new selection-display property introduced in 1.11: #7912

Yep, the only thing left is the title attribute

[ashetland]

Text truncation is currently working as of v2.7.1. Using the title attribute was added to this issue after it was opened, but we're going to hold off on that for the time being for the following reasons:

1. This is currently mitigated by opening the Combobox dropdown to reveal the full text of the selected item
2. We'd like to take a more holistic look at a system-wide configurable text-overflow behavior