Align TimePresetPicker (and custom popovers) to NLDD tokens/components #182

New issue

Closed

opened 2026-07-25 04:59:54 +00:00 by robbertbos · 0 comments

robbertbos commented

2026-07-25 04:59:54 +00:00

Owner

The scheduling/snooze popover (TimePresetPicker.vue) is hand-rolled CSS: a
teleported floating menu with custom .item buttons, a custom date/time
sub-form, and ad-hoc border/font/radius values. This surfaced friction when
embedding nldd-date-field (PR #178): the custom CSS deviated from NLDD's
design tokens (e.g. the input border used --semantics-dividers-color instead
of --semantics-input-fields-border), so the one NLDD component clashed
visually until each value was aligned by hand.

Two levels of cleanup:

Tokens (cheap, high value): keep the custom layout but replace ad-hoc values
(borders, radii, font sizes, colors) with NLDD tokens so the popover matches
NLDD components by default. Partly started in #178 (border + focus-ring).
Components (larger): consider nldd-popover + nldd-menu/nldd-button +
nldd-form-field to remove most custom CSS. Note: cannot be fully
NLDD-native because NLDD has no time-field, so the time input stays
native/custom.

Scope: a focused pass, separate from the accessibility PR that surfaced it
(#178). Related: #181 (page-wide font-size convention).

The scheduling/snooze popover (`TimePresetPicker.vue`) is hand-rolled CSS: a teleported floating menu with custom `.item` buttons, a custom date/time sub-form, and ad-hoc border/font/radius values. This surfaced friction when embedding `nldd-date-field` (PR #178): the custom CSS deviated from NLDD's design tokens (e.g. the input border used `--semantics-dividers-color` instead of `--semantics-input-fields-border`), so the one NLDD component clashed visually until each value was aligned by hand. Two levels of cleanup: 1. Tokens (cheap, high value): keep the custom layout but replace ad-hoc values (borders, radii, font sizes, colors) with NLDD tokens so the popover matches NLDD components by default. Partly started in #178 (border + focus-ring). 2. Components (larger): consider `nldd-popover` + `nldd-menu`/`nldd-button` + `nldd-form-field` to remove most custom CSS. Note: cannot be fully NLDD-native because NLDD has no time-field, so the time input stays native/custom. Scope: a focused pass, separate from the accessibility PR that surfaced it (#178). Related: #181 (page-wide font-size convention).

robbertbos referenced this issue

2026-07-27 04:32:27 +00:00

Composer "Aan": replace the hand-rolled combobox with nldd-combo-box #209

robbertbos referenced this issue

2026-08-05 21:34:38 +00:00

Use nldd-date-field/nldd-date-picker in the schedule popover #166

robbertbos referenced this issue from a commit

2026-08-06 06:24:47 +00:00

Hand four hand-rolled patterns back to NLDD 0.8.78

robbertbos referenced this issue from a pull request that will close it,

2026-08-06 06:25:34 +00:00

NLDD alignment: the time field, the popup slot and the popover frame #235