Skip to content
Motir
Start free

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped
Follow  — continues on app.motir.co
Request a featureAtom feed

← Motir · Work items

MOTIR-109Done

2.4.11 Design — the `DatePicker` calendar component

Estimate: 45m

The design for a design-system calendar date-picker. The issue Due-date fields (create modal 2.3.3 / edit form 2.3.6 / detail core-fields rail 2.4.2) currently fall back to the native <input type="date"> — its FIELD now uses the Input primitive, but the native browser CALENDAR POPUP is OS chrome and doesn't match the design system. This designs the replacement so 2.4.12 isn't improvising UI (the design gate — there is no calendar in the system today). Produce, under design/work-items/, a datepicker.mock.html (built from the live design system — components/ui/* + --el-* tokens, so the coding agent composes the same primitives) + a design-notes.md section, covering:

  • The trigger — an Input-styled field showing the selected date (formatted like formatDate → "Jun 4, 2026") or a placeholder, with a calendar glyph, and a Clear affordance (Due date is nullable).
  • The calendar popover (anchored via the Popover primitive): the month/year caption + prev/next-month nav, the weekday header row, and the day grid — with the selected day, today, hover, focused, and disabled day states all specified through --el-* tokens (AA-safe, finding #35; selection not conveyed by colour alone).
  • The placeholder / cleared state.
  • A documented keyboard model for 2.4.12: arrows move days, PageUp/Down change months, Home/End jump to week start/end, Enter selects, Esc closes.

Mirror the prior design subtasks' output convention (1.0.5 / 2.4.7 / 2.4.8 / 2.5.7). Colour only through --el-*.

Acceptance criteria

  • A design/work-items/datepicker.mock.html + a design-notes.md entry exist, naming the composing primitives (Popover + Input-styled trigger), copy, and every day-cell state (selected / today / hover / focus / disabled).
  • Trigger, open calendar, and placeholder/cleared states are all drawn (multi-panel); colour flows only through --el-*; AA-safe.
  • The keyboard interaction model is documented for the code subtask to implement.

Context refs

  • design/work-items/relationships.mock.html (2.4.7) — the in-repo HTML-mockup convention to mirror
  • components/ui/Popover.tsx + Input.tsx + Combobox.tsx — the anchored-popover + field chrome to compose
  • app/globals.css --el-* tiers + the /tokens route convention