Skip to content

[ENG-46317] feat(webkit): add Calendar component#672

Open
HerbertJulio wants to merge 1 commit into
devfrom
feat/ENG-46317-calendar
Open

[ENG-46317] feat(webkit): add Calendar component#672
HerbertJulio wants to merge 1 commit into
devfrom
feat/ENG-46317-calendar

Conversation

@HerbertJulio

Copy link
Copy Markdown
Contributor

Summary

Adds the Calendar component (inputs, monolithic) — an inline, always-visible date-picker surface for selecting a single date or a date range. Built spec-first (.specs/calendar.md), faithful to the Figma (node 5087-17541).

  • v-model modelValue (Date | null single, { start, end } range), mode: 'single' | 'range', min, max, disabled, showHeader.
  • Events: update:modelValue, month-change.
  • Native Date only — no date library. 6×7 Sunday-start grid; roving-tabindex role="grid" with Arrow / Enter+Space / PageUp+PageDown keyboard nav.
  • Styling is inline Tailwind on data-* variants (no JS class presets, no <style>); all tokens via var(--*) / DESIGN.md typography classes.
  • Range highlight is a continuous band via a data-band model (single/start/middle/end).
  • Storybook: Components/Inputs/Calendar (Default + Range).

Notes

  • No new dependencies. No breaking changes.
  • Layout/spacing/tokens match Figma 5087-17541: --bg-surface-raised panel, header pl-16/pr-12/py-8, grid p-12, 16px weekday→weeks gap, 4px between week rows, 36px day cells, 14px (text-body-sm) header/day type, 12px (text-label-sm) weekdays.
  • One theme-gap recorded in the spec: Figma Typography/Heading/xss (14px regular) maps to .text-body-sm — naming-only gap, size/weight match.
  • Out of scope (Figma optional sub-parts): the Date/Time input fields, "Apply Range" button, and timezone select below the grid.
  • Related issue: ENG-46317.

@HerbertJulio HerbertJulio requested a review from a team as a code owner June 25, 2026 20:55
@HerbertJulio HerbertJulio force-pushed the feat/ENG-46317-calendar branch from 5230c0b to 8127f6e Compare June 25, 2026 23:00
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