[input time zone] Update the open picker to make the ability to search more obvious

[emmilaakso212]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

As a user selecting timezone values, I want to know that the field is searchable, rather than just a selection.

Acceptance Criteria

When the timezone dropdown is open:

• Show a search icon on the left side of the combobox
• Change default text from “Select a field” to “Search options”
• Add option to have custom placeholder text in the box
• If custom placeholder text is longer than available space, truncate the text and show ellipsis

See design in Figma

Relevant Info

Agreed upon work with Calcite team in support of time zone picker update for 24-R3.

• Also related to https://github.com/Esri/calcite-design-system/issues/9018

Which Component

Timezone picker

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

• [x] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[macandcheese]

Some of the above should be possible with the existing placeholder and placeholder-icon properties.

https://codepen.io/mac_and_cheese/pen/OJGxzzB?editors=100

The placeholder has no default string - the "Select a field" from the example on the documentation site is just a suggestion.

Currently there is no ability to persist the placeholder-icon once a selection is made - we could introduce a separate icon property for this that replaces placeholder-icon post-selection - would that work?

To clarify the other ask - is that different than the current behavior of selection-mode="single"? Currently it will hide the selection and display the placeholder and placeholder-icon when the Combobox is open.

https://github.com/Esri/calcite-design-system/assets/4733155/63c289c9-8273-4fcb-8fc3-20f7a72c3553

[emmilaakso212]

cc: @jcfranco

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[geospatialem]

Aiming for dev implementation prior to R3 based on Online priorities - currently targeted for July. cc @emmilaakso212

[github-actions[bot]]

Installed and assigned for verification.

[jcfranco]

A few notes on the acceptance criteria:

Change default text from “Select a field” to “Search options”

The component doesn't use this text by default, but it can be customized via messageOverrides.

Add option to have custom placeholder text in the box

See note on messageOverrides above.

If custom placeholder text is longer than available space, truncate the text and show ellipsis

The component already does this, but it appears Firefox is the only one that truncates consistently. Chrome truncates on pointer down outside of the component and Safari truncates on pointer down anywhere on the page (see https://codepen.io/jcfranco/pen/wvLJExw?editors=100). I'll create a separate issue to investigate this further.

[DitwanP]

🍡 Verified on 2.12.0-next.4