Task #315: rebuild 12h picker as 3 controls (hour + minute + AM/PM)

Browse Source

The first ship of #315 used a single text input + AM/PM toggle. The
spec (lines 30-32) explicitly mandates THREE controls per field:
hour input (1-12), minute input (00-59), and AM/PM toggle. This
follow-up commit refactors TimePicker12h to that shape while
keeping every behaviour from the first ship intact.

What changed
- src/lib/time-12h.ts:
  - Added `splitCanonicalForPicker()` — seeds the 3-control picker's
    separate hour and minute inputs from a canonical "HH:mm" value.
  - Added `combineSplit(hour, minute, period)` — the new combine
    path. Joins "${h}:${m}" and runs the result through
    combineTextWithPeriod, preserving every disambiguation rule
    (1-12 requires toggle, 0/13-23 unambiguous, embedded marker
    overrides toggle).
  - The hour field accepts a power-user shortcut: any separator
    (":", ".", "-", " ") or AM/PM marker letter or 3-4 digit
    compact form in the hour field means "I typed the whole time
    here, ignore the minute field". Preserves the existing
    e2e tests that fill the entire time string into one input.
  - kept formatCanonicalAs12h + combineTextWithPeriod for the
    power-user shortcut path.
- src/components/time-picker-12h.tsx: rewrote as 3 controls
  (hour input, ":" separator, minute input, AM/PM radiogroup).
  Imperative {commit, focus, select} handle still focuses the
  hour input. dirtyRef preserved to avoid prop overwrite mid-edit.
  periodRef still mirrors state for synchronous commit() reads.
- src/pages/executive-meetings.tsx: added `minuteTestId` props on
  both inline editor pickers and both manage-form pickers
  (`em-time-{start,end}-minute-${id}`,
  `em-form-{start,end}Time-minute`). All other test IDs preserved.
- src/__tests__/time-12h.test.mjs: kept the 14 tests for the
  text+period path; added 8 new tests for combineSplit covering
  split-mode (1-12 ambiguous, 13-23 unambiguous, midnight, hour
  power-user shortcut, bare-hour invalid, etc) — 22 tests pass.
- tests/executive-meetings-keyboard-editing.spec.mjs: updated
  the Tab walks test to walk 8 stops (start hour → start minute
  → start AM → start PM → end hour → end minute → end AM →
  end PM) and assert both typed values survive the focus
  changes. The TYPING_SHAPES helper still works unchanged because
  the hour field accepts full time strings via the power-user
  shortcut.
- public/opengraph.jpg: reverted to HEAD~1 (was inadvertently
  swept into the prior commit by the auto-commit; not part of
  this task).

Validation
- Unit tests: 22/22 pass.
- E2E: Tab walks + canonical 24h + no-leading-zero + 12h-with-PM
  + compact+PM-toggle all pass against the new 3-control UI.
- TypeScript: clean.

...

This commit is contained in:

Riyadh

2026-05-02 11:31:37 +00:00

parent 17c103a59a

commit c8d768c1e1

6 changed files with 389 additions and 94 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

artifacts/tx-os/public/opengraph.jpg

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 25 KiB After Width:  |  Height:  |  Size: 25 KiB