feat(input-time-zone): add time zone offset and name mode #7913

jcfranco · 2023-10-01T07:56:26Z

Related Issue: #7430

Summary

This adds a mode property to the component to list:

Time zone offsets with (searchable) time zone groups
IANA time zone names

API changes

interface InputTimeZone {
  /**
   * Sets the time zone display and value used by the component.
   * 
   * when set to "offset" (default), displays list of time zone offsets
   * when set to "name", displays list of IANA time zone names
   */
  mode: "offset" | "name"; 

  /**
   * The reference date used when processing offsets (affects daylight savings time).
   * When not provided, the reference date will be today's date.
   *  
   * Note: this only affects to the `offset` mode
   */  
  referenceDate: Date | string; 
}

Noteworthy changes

`mode="offset"`

wires up timezone-groups package to list cities along with each respective offset entry
city names are translated
allows searching by time zone regardless of being displayed in the label or not
E2E tests extend Intl.DateTimeFormat to patch missing behavior (limited subset of time zones) from Chromium v92 (bundled w/ Stencil's Puppeteer v10).

Pending

CI testing needs looking into. Except for labelable (most likely needs updating to handle Intl.DateTimeFormat patching), all tests pass locally.

Will create a separate issue if these can't be stabilized for this milestone.

Update: Figured out the issue. Each E2E test needs to emulate the same default time zone.

driskull

✨ 👀 Looks good!

packages/calcite-components/src/demos/input-time-zone.html

driskull · 2023-10-02T20:15:53Z

packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx


            return (
              <calcite-combobox-item
+                data-value={value}


We should have a best practices document regarding use of data attributes 👍

jcfranco · 2023-10-02T21:40:27Z

Figured out the issue. Each E2E test needs to emulate the same default time zone. I'll skip the common ones and create a follow-up issue since those might take a bit more work to do this consistently.

packages/calcite-components/src/components/input-time-zone/utils.ts

jcfranco · 2023-10-03T03:34:35Z

It looks like screenshots are taken early in the component initialization. Going to the actual story preview shows the right thing. I'll play with larger delays in a separate PR and accept the current ones to avoid blocking this one. @ashetland I'll ping you once that's ready for review.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-10-03) ### Features * **action-group:** Add css custom properties to define gap and padding when layout is "grid" ([#7763](#7763)) ([b9bd0de](b9bd0de)) * **action-menu:** Add appearance property to configure trigger appearance ([#7867](#7867)) ([36ceaf1](36ceaf1)) * **alert:** Make component responsive ([#7755](#7755)) ([66222b5](66222b5)) * **block, input-time-picker, notice:** Adds `open`, `close`, `beforeOpen`, and `beforeClose` events for consistent event handling ([#7494](#7494)) ([04ce758](04ce758)) * **checkbox:** Add WCAG AA recommended minimum 24px square hotspot optimized for touch users ([#7773](#7773)) ([f13e2c4](f13e2c4)) * **flow, flow-item:** Allow calciteFlowItemBack event to be cancelled ([#7855](#7855)) ([b74b4df](b74b4df)) * **input-date-picker, input-time-picker:** Add status property ([#7915](#7915)) ([4d53346](4d53346)) * **input-time-zone:** Add max-items support ([#7705](#7705)) ([c698c27](c698c27)) * **input-time-zone:** Add time zone offset and name mode ([#7913](#7913)) ([80bd6ae](80bd6ae)) * **list:** Add newIndex and oldIndex event details to calciteListOrderChange event ([#7874](#7874)) ([0d5cc20](0d5cc20)) * **pagination:** Enable responsive layout ([#7722](#7722)) ([933a910](933a910)) * **panel, flow-item:** Add support for collapsing content ([#7857](#7857)) ([855754d](855754d)) ### Bug Fixes * **action-bar:** Improve overflowing horizontal actions. ([#7877](#7877)) ([52f2d2a](52f2d2a)) * **action-bar:** Overflow actions when overflowActionsDisabled is set to false ([#7873](#7873)) ([3dcceb0](3dcceb0)) * **action-menu:** Update active selection to not use the action's active property ([#7911](#7911)) ([50f85f1](50f85f1)) * **alert:** Regression fix to restore `calciteAlertBeforeOpen` and `calciteAlertOpen` event emitting ([#7767](#7767)) ([6bbae35](6bbae35)) * **button:** Provides context for AT users when used as reference element for collapsible content ([#7658](#7658)) ([50cb3a6](50cb3a6)) * **combobox:** Clears input value on blur ([#7721](#7721)) ([e04cc4e](e04cc4e)) * **combobox:** Fix filtering to avoid showing unrelated items ([#7704](#7704)) ([b6d32f3](b6d32f3)) * **dropdown-group:** Set selectionMode on slotted dropdown-item children ([#7897](#7897)) ([aa0731a](aa0731a)) * **dropdown:** Support dispatching enter key event on dropdown trigger ([#7752](#7752)) ([ba92463](ba92463)) * **select:** Allow setting an option value to an empty string ([#7769](#7769)) ([adca6ec](adca6ec)) * **stepper:** Improves AT Users experience with screen readers ([#7691](#7691)) ([071dec7](071dec7)) * **tab-nav:** Update indicator position when tab icon changes ([#7768](#7768)) ([cb877b3](cb877b3)) * **table:** Fix selection display in RTL ([#7907](#7907)) ([b4c8508](b4c8508)) * **tree:** Avoid modifying selected items for "none" selection-mode ([#7904](#7904)) ([0bd4a12](0bd4a12)) * **tree:** Fix tree keyboard selection issue ([#7908](#7908)) ([53d6c12](53d6c12)) * **tree:** Update tree selection per design spec ([#7852](#7852)) ([06b3594](06b3594)) </details> <details><summary>@esri/calcite-components-react: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-10-03) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.9.0-next.18 to ^1.9.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

github-actions bot assigned jcfranco Oct 1, 2023

github-actions bot added the enhancement Issues tied to a new feature or request. label Oct 1, 2023

jcfranco force-pushed the jcfranco/7430-input-time-zone-enhancements branch from 09406b6 to b58e40e Compare October 1, 2023 08:25

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 1, 2023

jcfranco force-pushed the jcfranco/7430-input-time-zone-enhancements branch from b58e40e to d65f1d2 Compare October 1, 2023 09:10

feat(input-time-zone): add time zone list mode

b3cd449

jcfranco force-pushed the jcfranco/7430-input-time-zone-enhancements branch from d65f1d2 to b3cd449 Compare October 1, 2023 09:11

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 1, 2023

jcfranco changed the title ~~feat(input-time-zone): add time zone list mode~~ feat(input-time-zone): add time zone offset and name mode Oct 2, 2023

add reference date story

16d2b15

jcfranco marked this pull request as ready for review October 2, 2023 18:51

jcfranco requested review from benelan, driskull, geospatialem and a team as code owners October 2, 2023 18:51

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 2, 2023

add delay to all stories for consistent snapshots

57e9336

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 2, 2023

bump story delay

b5cdf37

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 2, 2023

driskull approved these changes Oct 2, 2023

View reviewed changes

jcfranco added 3 commits October 2, 2023 13:41

tidy up

0e35c9c

only run relevant test suite to speed up troubleshooting

79b617c

set default time zone to maxItems test

53663e0

restore test scope

e7e4493

jcfranco added 4 commits October 2, 2023 15:03

bump timezone-groups

65a34f7

bump timezone-groups

5db194a

bump storybook delay

16ef495

bump timezone-groups

46f7ae6

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 3, 2023

jcfranco added 2 commits October 2, 2023 20:01

Merge branch 'main' into jcfranco/7430-input-time-zone-enhancements

83cc1eb

apply storybook delay across all stories

a882beb

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 3, 2023

benelan reviewed Oct 3, 2023

View reviewed changes

packages/calcite-components/src/components/input-time-zone/utils.ts Show resolved Hide resolved

jcfranco merged commit 80bd6ae into main Oct 3, 2023
11 of 14 checks passed

jcfranco deleted the jcfranco/7430-input-time-zone-enhancements branch October 3, 2023 03:35

github-actions bot added this to the 1.10.0 Maintenance Release milestone Oct 3, 2023

calcite-admin mentioned this pull request Oct 3, 2023

chore: release main #7718

Merged

geospatialem modified the milestones: 1.10.0 Maintenance Release, 2023 September Priorities - Main release Oct 3, 2023

jcfranco mentioned this pull request Oct 5, 2023

[input-time-zone] restore common tests #7951

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(input-time-zone): add time zone offset and name mode #7913

feat(input-time-zone): add time zone offset and name mode #7913

jcfranco commented Oct 1, 2023 •

edited

Loading

driskull left a comment

driskull Oct 2, 2023

jcfranco commented Oct 2, 2023

jcfranco commented Oct 3, 2023

feat(input-time-zone): add time zone offset and name mode #7913

feat(input-time-zone): add time zone offset and name mode #7913

Conversation

jcfranco commented Oct 1, 2023 • edited Loading

Summary

API changes

Noteworthy changes

mode="offset"

Pending

driskull left a comment

Choose a reason for hiding this comment

driskull Oct 2, 2023

Choose a reason for hiding this comment

jcfranco commented Oct 2, 2023

jcfranco commented Oct 3, 2023

jcfranco commented Oct 1, 2023 •

edited

Loading

`mode="offset"`