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

[emmilaakso212]

Check existing issues

• 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 ([input-time-zone] Allow to show UTC instead of GMT with the input time zone picker offset mode  #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

• @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

• [input-time-zone] Allow to show UTC instead of GMT with the input time zone picker offset mode  #8716
• [combobox] highlight matching search terms #9026

[emmilaakso212]

cc: @jcfranco

[github-actions]

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:

• [input-time-zone] Allow to show UTC instead of GMT with the input time zone picker offset mode  #8716
• [combobox] highlight matching search terms #9026/[Combobox] Make filter text value accessible in the code #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 Enhancement: Subtitle/description for combobox-item #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.

[jcfranco]

FWIW, this got pushed to August for additional testing, but here's a preview: https://codepen.io/jcfranco/pen/rNEjyQJ. It should be available via @next sometime this week.

[AdelheidF]

Does this include an update to the messages_xx.json files to also include some type of region information so we can have a unified and more readable format/way of displaying the current time zone in various components?

[jcfranco]

Do you mean metadata behind each time zone option? If so, that wasn't a part of the original request. In the new mode, the time zone options are grouped by region using timezone-groups behind the scenes.

FWIW, timezone-groups will have some enhancements coming up soon to provide additional utils for this.

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.12.0-next.4

[DitwanP]

Sorry @jcfranco I missed something here, did we still want to make it so the selected value is shown at the top of the dropdown when it opens? As it is now I see it at the bottom:

I'm referring to this btw:
"If timezone picker had an existing value, by default scroll in the results such that the previous value is at the top"

[jcfranco]

This is expected. We revised this after meeting w/ @emmilaakso212 and @ashetland. From an earlier comment:

4. The dropdown already displays the selected value when opened, so no adjustments needed.