Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 14 commits into from
Oct 3, 2023
Merged

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

merged 14 commits into from
Oct 3, 2023

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Oct 1, 2023 •
edited

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).

input-time-zone-enhancements

Pending

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

Screenshot 2023-10-02 at 11 43 17 AM

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.

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Oct 1, 2023
@jcfranco jcfranco force-pushed the jcfranco/7430-input-time-zone-enhancements branch from 09406b6 to b58e40e Compare October 1, 2023 08:25
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 1, 2023
@jcfranco jcfranco force-pushed the jcfranco/7430-input-time-zone-enhancements branch from b58e40e to d65f1d2 Compare October 1, 2023 09:10
@jcfranco jcfranco force-pushed the jcfranco/7430-input-time-zone-enhancements branch from d65f1d2 to b3cd449 Compare October 1, 2023 09:11
@jcfranco 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 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
@jcfranco jcfranco marked this pull request as ready for review October 2, 2023 18:51
@jcfranco 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
@jcfranco 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
@jcfranco 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
driskull approved these changes Oct 2, 2023
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✨ 👀 Looks good!

packages/calcite-components/src/demos/input-time-zone.html Outdated Show resolved Hide resolved
packages/calcite-components/src/demos/input-time-zone.html Outdated Show resolved Hide resolved
packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx

return (
<calcite-combobox-item
data-value={value}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@jcfranco
Copy link
Member Author

jcfranco commented Oct 2, 2023

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.

@jcfranco 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 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
Copy link
Member Author

jcfranco commented Oct 3, 2023

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.

@jcfranco jcfranco merged commit 80bd6ae into main Oct 3, 2023
13 of 16 checks passed
@jcfranco jcfranco deleted the jcfranco/7430-input-time-zone-enhancements branch October 3, 2023 03:35
@github-actions github-actions bot added this to the 1.10.0 Maintenance Release milestone Oct 3, 2023
@calcite-admin calcite-admin mentioned this pull request Oct 3, 2023
Merged
geospatialem pushed a commit that referenced this pull request Oct 3, 2023
@calcite-admin @github-actions
chore: release main (#7718)
c6f0f81 
🤖 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/calcite-components@1.8.0...@esri/calcite-components@1.9.0)
(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/calcite-components-react@1.8.0...@esri/calcite-components-react@1.9.0)
(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>
@jcfranco jcfranco mentioned this pull request Oct 5, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@benelan benelan benelan left review comments

@driskull driskull driskull approved these changes

@geospatialem geospatialem Awaiting requested review from geospatialem geospatialem is a code owner

Assignees

@jcfranco jcfranco

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 September Priorities - Main release
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@jcfranco @driskull @benelan @geospatialem