Skip to content

[ENG-46317] feat(webkit): evolve Calendar into a date-range picker#707

Draft
HerbertJulio wants to merge 2 commits into
devfrom
feat/ENG-46317-calendar
Draft

[ENG-46317] feat(webkit): evolve Calendar into a date-range picker#707
HerbertJulio wants to merge 2 commits into
devfrom
feat/ENG-46317-calendar

Conversation

@HerbertJulio

Copy link
Copy Markdown
Contributor

Summary

Evolves the calendar component (ENG-46317) from the inline month grid into a full date-range picker (composition, spec_version 3), aligned to the Figma handoff.

A trigger opens a CSS-positioned popover (usePlacement + <Teleport>, no positioning lib) containing:

  • one or more month grids — single / range, multi-month, connected range band
  • Start/End date + time fields (12-hour)
  • a timezone selector (Local (UTC ±hh:mm (ABBR)), derived via Intl)
  • a full-width Apply Range action — staged-apply: edits a draft inside the popover and commits to v-model only on Apply (or immediately when show-apply is false)
  • a presets rail and a Select Period relative-time mode that parses spans like 45m, last month, 1/1 - 1/2
  • a clearable / split trigger, small | medium | large sizes, and a horizontal layout

Public import stays @aziontech/webkit/calendar (compound API with Calendar.Preset / Calendar.Clear); standalone calendar-root, calendar-preset, calendar-clear exports were added for tree-shaking.

Date math uses native Date + Intl only — no date or positioning libraries.

Notes

  • Verified locally: vue-tsc type-check, eslint (--max-warnings 0), type-coverage (99.96%), and storybook:build — all green.
  • Timezone is a display/formatting label only; the picker does not re-interpret Date objects across zones (native-Date timezone arithmetic is intentionally avoided per the no-date-library rule).
  • Possible breaking change: the @aziontech/webkit/calendar public surface changed from the always-inline grid to the picker (new props, mode now defaults to range). Left as feat (minor) for now — flag if a major bump is preferred and I'll add the ! + BREAKING CHANGE footer.
  • Related issue: ENG-46317.

Replace the inline month grid with a full date-range picker (composition, spec_version 3): a trigger that opens a CSS-positioned popover with a multi-month grid, Start/End date + time fields, a timezone selector, an Apply action, a presets rail, a clearable/split trigger, size variants, a horizontal layout, and a Select Period relative-time mode (parses 45m, last month, 1/1 - 1/2). Native Date + Intl only; no positioning or date libraries.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant