[input time zone] Update and re-organize timezone dropdown options for improved usability

[emmilaakso212]

Check existing issues

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

Description

As a user who wants to select a time zone using the time zone picker, I want to be able to easily identify which time zone is relevant to me.

Acceptance Criteria

Replace "name" mode of the time zone picker with a new version, or create this as a third version, if needed.

Content:

Add the following data to timezone options:

• Country, unless the name of the country is the name of the timezone
• State or province, if there is more than one timezone in the country. Countries that have more than one timezone.
• Always show offset in UTC (https://github.com/Esri/calcite-design-system/issues/8716)

Content order:

• Show dropdown items in format of city, state/province, country [UTC-offset]
• Group timezone data by continent, and show continent name once as a group label
• Organize dropdown results alphabetically by city name (some timezones/offsets will appear more than once. That’s ok)

*optional content

UI/behavior

• If timezone picker had an existing value, by default scroll in the results such that the previous value is at the top
• Allow searching within the options by city, state or province, country, or offset

See Figma for designs

Relevant Info

Agreed upon enhancement work for Map Viewer team for implementation by 24-R3

Which Component

Time zone picker

Example Use Case

No response

Priority impact

impact - p2 - want for an 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

Related issues

• https://github.com/Esri/calcite-design-system/issues/8716
• https://github.com/Esri/calcite-design-system/issues/9026

[emmilaakso212]

cc: @jcfranco

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[geospatialem]

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

[AdelheidF]

I guess this won't make it for Online release R2 then, unfortunately.

[jcfranco]

Belated update on this one, the following enhancements to combobox have been addressed this release to match the proposed design spec:

• 8716

• 9026/#7212

The following are adjustments to the original requirements (per conversation w/ @emmilaakso212 and @ashetland):

1. Country and city will be the only additions for now.
2. Options will be grouped by IANA region and not continent per se.
3. Time zones should not be duplicated due to DST as this new mode will be primarily geographically-driven (searching by region, continent, country, etc.).
4. The dropdown already displays the selected value when opened, so no adjustments needed.
5. We'll consider using the exiting Intl offset format vs using decimal format.
6. Offset can be displayed as is (i.e., no need to change from () to []) since it will be displayed differently once https://github.com/Esri/calcite-design-system/issues/3695 lands.
7. We'll consider changing the offsetStyle default in a breaking change release. For now, internal apps need to opt into using UTC.

The grouping and additional metadata for improved search UX will be tackled in the July release.