Review rodiny Date & time — nálezy, bug list, rozhodnutí

Datum: 2. 9. 2026 večer · reviewer: Claude (jako senior UX/UI) · zadal Štěpán (AD) Předmět: 6 podkomponent rodiny date-time po stories MR !2822 (mergnuto do main). Postup = nová metoda schválená 2. 9. (inventura použití → stavová matice z kódu → story jako port → design gate). Každý nález ověřen proti kódu na origin/main acrm (4f9af7cb4, klon /root/acrm-main), proti registru a docs v DS repu a proti screenshotům /ds/components/date-time/<sub>?tab=examples (/root/.claude/jobs/1ba41f0e/tmp/review-date-time-*.png).

0. Shrnutí

Rodina je na tom výrazně lépe než Button: všech šest podkomponent je skutečný kód v @acrm/ui, všech šest se v appce používá (DateField 35 souborů, TimeField 8, DateRangeField 4, DateTimeRangeField 3, Calendar 4, PickerPanel 4 — jen uvnitř balíčku), nativní <input type="date|time|month"> v appce neexistuje a docs mají čísla kontrastu spočítaná správně (ověřeno z tokens.css, shoda na dvě desetinná místa). Web už nelže: coverage bere jen vlastní stories, prázdné sekce se nevypisují, legacy mockup se neukazuje, status je beta dokud chybí AD approval.

Co je špatně, je stejného druhu jako u Buttonu, jen jinde: stories si kompozice vymýšlejí místo aby je portovaly. Date field „Task dialog row" — v TaskDialogu žádný DateField není (je tam MetaChip + Popover + Calendar). Date range „report filter + Zobrazit" — v appce žádné tlačítko u rozsahu není. Date-time range „Zasedačka Praha je volná" — availability a presetDurations mají v appce 0 použití. Dvě Composition mají vymyšlenou patičku dialogu s anglickým „Cancel / Save". Calendar má sekci Sizes s jiným obsahem v každé velikosti. Pět stories sedí v .dp-inline — třídě, kterou appka nepoužívá a kterou vlastní docs vedou jako kandidáta na smazání. Registr pořád vede vypůjčené legacy stories v Default (stejná chyba jako D10 u Buttonu).

V appce se navíc našly čtyři věci, které DS má krýt a nekryje: Time field nejde otevřít myší (seznam otvírá jen ↓; story si click domýšlí), přepínač „Celý den" je nativní checkbox vedle kanonického Checkboxu, presety termínu jsou druhé „option chips", a datum + čas jako jeden okamžik se skládá ručně na čtyřech místech třemi způsoby.

Z 6 podkomponent jsou kanon všechny; Picker panel je interní primitiv (0 přímých použití v apps/web, 3 konzumenti v balíčku) — AD rozhodne, zda zůstává samostatná stránka.

1. Nálezy per podkomponenta (ověřeno v kódu)

Legenda stavové matice: K = existuje v CSS/props, S = story ho ukazuje, – = neexistuje / neukazuje. Zdroj enginu: apps/web/src/ds/date-picker.css (řádky v závorce).

1.1 Date field (<DateField>, .dp-field .dp-input .dp-open)

• Použití: 35 souborů (apps/web/src/pages/DocumentDetailPage.tsx, apps/web/src/components/accounting/InvoicePaymentDialog.tsx:245, packages/ui/src/components/RecordRail.tsx…). Kanon.
• Matice: rest K/S · hover – (paritně s .acrm-input, ok) · focus K (:focus-within 30–33) / S jen textem · open K (aria-expanded DateField.tsx:177) / CSS – / S – · disabled K (38–42, 83–86) / S · error K (.err 34–37, error prop + neplatný commit) / S · readonly – · typing echo K (.dp-echo, .bad 219–233) / S staticky · .dp-open hover+focus-visible K (75–82) / S –.
• Otevřený panel nemá v CSS žádný stav spouštěče (A1).
• Stories: Default ok. Variants: konvence roku (3 pole) je správná ukázka; čtvrtá položka „futureBias" je prázdné pole — vizuálně totéž co State „empty", chování patří do Code (D10). States: kompletní, statický echo je přijatelný (transientní stav). Composition: vymyšlená — komentář tvrdí „Task dialog row", ale TaskDialog.tsx:952–1013 skládá termín z MetaChip + Popover + Calendar, DateField tam není (D2); třetí položka „dialog footer" = inline borderTop + anglické „Cancel / Save" místo Dialog footer (.acrm-dialog-foot) (D3). Reálný port: InvoicePaymentDialog.tsx:244 (<Field label hint><DateField>), LogTimeDialog.tsx:79 (DrawerField), rail RecordRail.tsx:428.
• Registr: Default vede legacy components--date-_-date-field (title „Components", 4 pole) před vlastní Default — web ji vykresluje jako první příklad (D1). Třídy: .dp-clear patří panelu, chybí .dp-fieldset .dp-echo .dp-foot (D15).
• Docs: usage/a11y sedí s kódem (placeholder „Doplnit…" DateField.tsx:45, Tab-out chování 121–142, návrat fokusu 144–147, aria-invalid 166). Kontrasty ověřeny.

1.2 Time field (<TimeField>, .dp-field.time .dp-timelist .dp-topt)

• Použití: 8 souborů (DochazkaPage.tsx:574/582, AssistantSettings.tsx:180/189 se step={30}, MeetingDetailPage.tsx:240/242, WrapupBand.tsx ×3, ContactLogDialog.tsx:533/561, TaskDialog.tsx:990). getStart 3 místa, step 2 místa — obě varianty stories mají reálné krytí. Kanon.
• Matice: rest K/S · focus K/S textem · open K jen přes ↓ (TimeField.tsx:82–84; input nemá onClick ani otevření na focus, žádný spouštěč) · disabled K/S · error – (neplatný text tiše reverts, TimeField.tsx:52–57) · .dp-topt hover/on/focus-visible K (572–584) / S on staticky · disabled option –.
• Seznam nejde otevřít myší. DateField má .dp-open, TimeField nic — uživatel s myší se o seznamu nedozví (A2). Story Picker panel Variants si domýšlí onClick na inputu, komentář Time field říká „opens from ↓ or click", usage.md „↓ or after typing" — trojí nepravda o jednom chování (D9, D11).
• Stories: Variants vkládají statický seznam do .dp-inline (mrtvá třída, D7) místo reálného .dp-panel. Composition .dp-timegroup je reálný vzor (DateTimeRangeField.tsx:192, MeetingDetailPage.tsx:222), chybí odkaz soubor:řádek; „form field — Field" — v appce TimeField v <Field> sedí jen ve WrapupBand, jinde raw .acrm-field (A13).
• Docs: kromě D11 sedí; a11y správně přiznává, že zavření ze scrimu nevrací fokus (A14).

1.3 Date range (<DateRangeField>, .dp-field.wide.range .dp-entry .dp-sep .dp-preset)

• Použití: 4 soubory — DovolenePage.tsx:550 (DrawerField „Období", futureBias), LeaveSection.tsx:257, InteractionFilter.tsx:100, ManageSegmentDialog.tsx:587. Všechna 4 předávají fromLabel/toLabel; nikde vlastní presets, nikde error. Kanon.
• Matice: rest K/S · focus K/S textem · open K (aria-expanded 127) / CSS – (A1) · disabled K/S · error K/S (prop bez použití v appce — ukázka stavu z kódu je v pořádku) · prohození konců K (52–55) / S textem · otevřený rozsah (jeden konec) K/S.
• Stories: Variants „custom end labels" je jen aria, vizuálně totéž (D10). Composition vymyšlená: „report filter — Field + tlačítko Zobrazit" — žádné ze 4 míst apply button nemá (D5); druhá položka staticky kopíruje hlavičku panelu .dp-entry.pair, kterou komponenta renderuje sama (D8). Port 1:1 = DovolenePage.tsx:549–558.
• Registr: Default vede legacy components--date-_-date-range-field (3 pole) před vlastní Default (D1).
• Docs: sedí (Tab-out zavírá 94–99, swap, .count overline tabular 204–209). „No focus return after scrim/Esc" je přiznaný bug, ne limit (A14).

1.4 Date-time range (<DateTimeRangeField>, .dp-stack .dp-termin .dp-timegroup .dp-allday .dp-presets .dp-status)

• Použití: 3 soubory — NewMeetingForm.tsx:208 a KalendarPage.tsx:218 (DrawerField „Termín" + allowOvernight), ZasedackyPage.tsx:191–202 (allowAllDay={false}). availability 0×, presetDurations 0×, step 0×. Kanon, dva mrtvé props.
• Matice: timed / all-day / multi-day / overnight K/S · presety .dp-preset rest/hover/focus-visible/on K (248–269) / S on · status ok/busy K (607–622) / S jen přes prop bez použití · empty K/S · disabled – (komponenta nemá disabled, části ano) · error – (jen vestavěná hláška overnight).
• Stories: States „availability free/busy" a Composition „meeting dialog — presetDurations 15/30/45/60 + Zasedačka Praha je volná + Cancel/Save" ukazují kompozici, která v appce neexistuje (D4, D3). Variants „all day — one date, no times" renderuje dvě data („26. 8. – 26. 8.", screenshot) — komponenta při allDay vždy zobrazí druhý DateField s value.toDate ?? value.date (DateTimeRangeField.tsx:181–183); popisek story i usage.md („leaves the end empty") lžou (D12). Port 1:1 = NewMeetingForm.tsx:207–209 a ZasedackyPage.tsx:190–203.
• Kód: .dp-allday je nativní <input type="checkbox"> s komentářem „karta prvku v DS zatím není" (DateTimeRangeField.tsx:222–233) — Checkbox už kanon je (A3). .dp-preset vs .acrm-optchip = dvě chip provedení (A4). ZasedackyPage si místo .dp-status.busy renderuje vlastní <p style={{color: warning-ink}}> (ZasedackyPage.tsx:204–208) — přesně to, co má availability dělat, a nikdo ho nezapojil (A7).

1.5 Calendar (<Calendar>, .dp-pop .dp-month .dp-grid .dp-day .dp-nav .dp-wd)

• Použití: 4 soubory — v appce FilterBar.tsx:1041 (range, 1 měsíc, v .acrm-popover menu chipu), TaskDialog.tsx:961 (single + singleDatePresets, v Popoveru); v balíčku DateField, DateRangeField. Kanon.
• Matice buňky: rest · hover (362) · we · out · today · sel (+ start/end) · in · preview · disabled · focus-visible — vše K; S: today/sel/in/open range/disabled ✓, hover/preview/focus jen textem (dynamické, ok). Presety on K/S. Nav hover/focus-visible K / S –.
• Stories: Sizes porušuje pravidlo „stejný obsah, mění se jen rozměr" — vlevo single s jedním datem, vpravo range se dvěma měsíci; months je layout varianta (už ve Variants), mode="single" months={2} engine ani neumí (.range se váže na isRange && shown > 1, Calendar.tsx:312) (D6). Všech 5 stories sedí v .dp-inline (0 použití v appce) (D7). Composition ručně skládá vnitřek DateRangeField (hlavička + patička) místo portu FilterBar/TaskDialog (D8). Default vede legacy components--date-_-calendar-inline- (D1).
• Docs: sedí (metriky 36×30, 252, 26px presety, Shift+PageUp rok, aria-live na titulech). #fff v .dp-day.sel správně přiznáno jako drift (A10).

1.6 Picker panel (<PickerPanel>, .dp-panel .dp-scrim)

• Použití: 0× přímo v apps/web, 3 konzumenti v balíčku (DateField:187, DateRangeField:135, TimeField:147). Interní primitiv rodiny — kanon jako implementace, jako samostatná dokumentovaná podkomponenta k rozhodnutí AD (§4).
• Matice: open/closed K · desktop fixed + flip K (place() place.ts:7–16) · sheet ≤720px K (628–700) / S – (media query, ne prop; ok) · aria-modal jen mobil K / focus trap – (A15).
• Stories: Default a Variants = to, co DateField/TimeField dělají samy; Variants time list si vymýšlí click na input (D9); Composition = ruční kopie DateRangeField (D8). Story se hodí spíš jako jediná „anatomie vrstvy" než tři sekce.
• Docs: sedí (place() flip nahoru u spodní hrany, zavření při odscrollování 66–69, Esc na document 83–93); --line-300 na bílé je 1.38:1, ne 1.35 (zanedbatelné).

1.7 Průřezově (celá rodina)

• .dp-chip (101–140) 0 použití, .dp-inline (511–520) 0 použití v appce — mrtvý engine; index.usage.md to ví a zároveň stories .dp-inline používají (D14, A7).
• .dp-clear (440–462) a .dp-addtime (464–487) jsou identické definice (34px, 600 12px --font-display) — dvě třídy pro jednu položku patičky (A5).
• TaskDialog.tsx:995–1003 používá .dp-open (spouštěč kalendáře) jako obecné × „Odebrat čas" (A6).
• Raw .dp-* mimo balíček: TaskDialog termín (960–1013) a MeetingDetailPage TimeRangeEditor (222–243) — bespoke pickery ze tříd enginu (A12).
• Datum + čas jako jeden okamžik: WrapupBand.tsx:184–196, 255–267, 347–359 (.dlrw-when, dialer.css:1036) a ContactLogDialog.tsx:523 (inline grid 2fr 1fr 1fr) — 4 ruční řádky, 3 provedení, žádný kanon (A8).
• Formát data mimo formatDate: toLocaleDateString v 8 souborech obrazovek, formatCzDate (apps/web/src/lib/format.ts:187) v asistentovi — index.usage.md tvrdí „still true: no toLocaleDateString in screens" (D13, A9).
• validate-ds-usage nemá pro rodinu jediné pravidlo; absence nativních date inputů je hlídána jen dvěma unit testy na dvou místech (A11).

2. Bug list — DS (registr, web, stories, docs)

3. Bug list — aplikace (kanon v kódu)

4. Rozhodnutí pro AD

Jedno po druhém, každé s doporučením:

1. A2 — jak se otevírá Time field myší. Doporučení: .dp-open s ikonou clock (parita s DateField, stejná anatomie, stejný stav open po A1). Alternativa: otevřít seznam na focus — levnější, ale rozbíjí pravidlo „focus neotvírá panel", které DateField drží kvůli tabování formulářů.
2. A3 — „Celý den" = kanonický Checkbox. Doporučení: ano, .dp-allday smazat. Otázka jen zda popisek zůstává --fg-secondary 12px (dnes) nebo bere sazbu Checkboxu.
3. A4 — presety délky vs Option chips. Doporučení: .dp-preset se stane pojmenovanou variantou Option chips („dense", 26px pill) v kanonu a použije ji i Calendar (Dnes / Zítra / Posledních 7 dní); .acrm-optchip zůstává pro formuláře. Nechat dvě provedení není možnost.
4. A7 — availability / presetDurations. Doporučení: availability zapojit v ZasedackyPage (nahradí inline <p>), presetDurations smazat (nikdo je nemění). Story States pak ukáže busy z reálného místa.
5. A8 — „Date + time" jako kompozice. Doporučení: kandidát s reálným použitím (4 místa), engine wrapper .dp-instant (DateField + TimeField, gap --sp-2), story = port WrapupBand. Bez toho zůstanou tři provedení.
6. A12 — TaskDialog termín a TimeRangeEditor. Doporučení: DueDatePicker (Calendar + volitelný čas, patička) do balíčku — je to jediný „datum s volitelným časem" v appce a pravidlo dp-raw ho jinak musí vyjímat. TimeRangeEditor → TimeRangeField (od–do bez data), použije ho i DateTimeRangeField.
7. Picker panel jako stránka DS. 0 přímých použití v appce; je to vrstva, kterou skládají tři pole. Doporučení: nechat jako podkomponentu se statusem „internal" (jedna anatomie, bez Variants/Composition) — vývojář ji nemá volat, ale musí vědět, že existuje (jinak sáhne po .acrm-popover).
8. D6 — Sizes u Calendar. Doporučení: zrušit; rodina nemá size prop nikde (32 / 88 / 236 px jsou obsahové šířky). Potvrdit, že „Sizes: []" u celé rodiny je správně, ne mezera.

Vše ostatní (D1–D5, D7–D16, A1, A5 mimo sazbu, A6, A9–A11, A13–A15) se opraví bez dotazů.

5. Co teď

1. Follow-up MR do acrm (stories + engine, label no-auto-merge): D1 (legacy stories pryč + baseline), D2–D8, D10, D16 (Composition jako porty s komentářem soubor:řádek, Sizes zrušit, .dp-inline z stories), A1, A5, A6, A10, A14 — vše bez AD; po rozhodnutí 1–6 druhá vlna (A2, A3, A4, A7, A8, A12) včetně nových stories z reálných míst.
2. MR do DS repa: registr (D1, D6, D15), docs D11–D14, approvedAt až po AD kolu.
3. Validator (A11): native-date-input, dp-raw, date-format-raw — první dvě hned, třetí spolu s A9.
4. A9 a A13 jsou průřezové (formátování, popisky polí) — zapsat do bug listu rodin Text field a Foundations, ne řešit v této rodině.
5. Tikety: každý nález = položka D/A; zavírat až po merge opravy a AD potvrzení na webu. Do té doby rodina zůstává beta.