feat(edit-content): fill the column, clear on the field, and rebuild the picker footer (#37465)

[adrianjm-dotCMS]

PR 2 of 2 — implementation

Fixes #37465

Base is the spec branch, not main. PR 1 (#37542) carries spec.md and is still awaiting
approval, so this branches off it rather than waiting for it to merge — the
Spec-Kit flow gates on
approval, not on merge. Rebase onto main once PR 1 lands.

What changed

Date, Time and Date-and-time were the only fields in the new Edit Contentlet that behaved unlike
their neighbours — narrower than their column, impossible to empty once set, and carrying PrimeNG's
stock picker footer with a redundant Clear and a Today that read the browser's clock.

Width	Block-level flex at full width; the input grows, the trigger stays flush right, and the focus ring and invalid border still enclose both as one unit
Clearing	showClear is unconditional, so every type can be emptied — not just the expire-date field
Picker footer	Rebuilt through #buttonbar: timezone left (on the two types carrying a time), a single secondary-outlined Today / Now right, PrimeNG's Clear gone
Today / Now	Resolves from the server clock, and leaves the picker open on all three types — the same as selecting a day or time
Hint	The timezone line under the input is gone; the hint returns to the field footer, where every other field type puts it

8 files: 6 modified, 1 new spec, plus three keys in Language.properties.

Two things worth a reviewer's attention

1. PrimeNG's supplied todayCallback is deliberately unused. It opens with const date = new Date()
— the browser's clock, which is the defect FR-013 exists to correct. Wiring the footer button to it
would look right, pass a naive test, and reintroduce the bug. The button goes through
getCurrentServerTime and the existing onCalendarChange conversion instead, so there is still only
one conversion path.

Verified in the browser against a running instance: server on UTC, browser on UTC-4 — Today set
15:57, not 11:57.

2. PrimeNG's default clear icon is a bare <svg> with a click handler — unfocusable, no
accessible name, unreachable by keyboard. A real <button> is projected through #clearicon. The
accessibility tree now announces all three as button "Clear".

A defect the test suite could not have caught

On reopening saved content, no field showed a clear control until the author happened to focus it
— a value with no way to clear it. PrimeNG gates that control on a DOM read of
inputfieldViewChild.nativeElement.value, which updateInputfield() writes without markForCheck();
the DatePicker is OnPush, so on the load path the condition is evaluated before the value lands and
nothing re-evaluates it. An effect now schedules the pass in a microtask.

It is worth being explicit about why the suite was green over it: the settle() test helper had been
calling the DatePicker's own change detector — doing in the test what the component failed to do in
production. It now runs only the host's detection plus a microtask turn, the same turn the browser
gives it, so these tests can fail for this cause again.

Found by manual verification in Chrome against a running dotCMS.

Testing

pnpm nx test edit-content — 2390 passing, 117 files. pnpm nx lint edit-content — 0 errors
(3 pre-existing warnings in untouched files).

Written test-first throughout, with developer approval and confirmed-Red gates per Constitution
Principle V. Two exceptions were declared and signed off rather than left silent:

• No automated layout test — jsdom computes no layout, so a unit test could only assert that a CSS declaration exists, which restates the implementation and would pass even if the control rendered wrongly. Covered by manual verification instead.
• No end-to-end cross-timezone test — no e2e coverage exists for date fields, and a faithful test needs a server far enough from the runner to cross midnight. The unit test guards the same logic with a faked clock and an offset timezone.

Manually verified in Chrome against a running instance, on throwaway content types since deleted:
field widths identical to a sibling Text field in both single- and two-column layouts (721px / 543px),
input-to-trigger gap 0px, one focus ring over the whole unit, error border over input and trigger,
all three footers correct, and a full save/reopen round-trip confirming the stored shapes are
unchanged — Date-only at UTC midnight, Time-only against a consistent date base, Date-and-time as a
UTC instant. That manual pass predates the last commit, which keeps the picker open after Today on
Date-only fields; that change is covered by unit tests.

🤖 Generated with Claude Code

[claude]

Claude finished @adrianjm-dotCMS's task in 2m 50s —— View job

---

Code Review — #37555

• Read the diff (8 files)
• Analyze calendar field component changes
• Check tests and conventions
• Post review

I reviewed the full diff against origin/issue-37465-calendar-field-width-clear-picker-footer. The change is well-scoped and the accompanying spec (calendar-field.component.spec.ts) covers the load-path clear control, the projected clear button (focus + keyboard activation), the rebuilt footer, and — importantly — the server-vs-browser clock distinction with a faked clock on an offset timezone. The PR description is candid about the two declared test exceptions (layout, cross-tz e2e), and the reasoning holds.

New Issues

• 🟡 Medium: calendar-field.component.ts:133 — the load-path fix reaches into this.$picker()?.cd.detectChanges(). cd is PrimeNG's internal injected ChangeDetectorRef, not part of the DatePicker public API — a future PrimeNG rename/privatization would silently reintroduce the exact "no clear control until focused" defect this effect exists to fix, and no unit test would catch it (the spec drives the component's own effect, not PrimeNG's field name). It works today and is well-documented; the risk is purely forward-compat coupling. Worth a brief note near the effect that this depends on a non-public PrimeNG member, and/or pinning it behind the PrimeNG version. Non-blocking. Fix this →

Minor observations (not blocking, no action required):

• The clear-detection effect (line 131) reads $value() and schedules detectChanges() on every value change, not just the load path. Harmless (a deferred sync CD of the picker subtree), just slightly broader than the documented intent.
• p-field-error text-sm text-red-500 / p-field-hint text-sm text-gray-500 hardcode Tailwind colors rather than semantic tokens — but the inline comment already explains this is a deliberate bridge until Backfill: adopt the global .form / .field form system in the new Angular Edit Content editor #37460 / Standardize field hint and required-error presentation in the new Edit Contentlet #37464 land, with a clear "drop the utilities once either does" note. Good.

Everything else checks out: showClear is unconditional as intended, the projected #clearicon button correctly relies on the click bubbling to PrimeNG's clear handler (verified against the datepicker template's (click) on the clearicon slot span, and covered by the keyboard-activation test), setCurrentServerDateTime() correctly routes through the single onCalendarChange conversion path instead of PrimeNG's browser-clock todayCallback, and the removed console.warn / dead $showTimezoneInfo are clean deletions. The three new Language.properties keys are present and alphabetically adjacent to the existing calendar keys.

No blocking issues.
· issue-37465-calendar-field-width-clear-picker-footer-impl