NLDD 0.8.90: field errors move to nldd-validation-list, editor fixes #341

Merged

robbertbos merged 2 commits from renovate/nldd into main 2026-09-19 13:12:42 +00:00

Conversation 4 Commits 2 Files changed 9 +54 -30

robbertbos commented 2026-08-23 02:01:57 +00:00

Owner

Copy link

NLDD design system 0.8.82 -> 0.8.90.

• 0.8.86 removes nldd-form-field-error-text; field errors move to nldd-validation-list (see the first commit).
• 0.8.87 fixes the four editor issues we filed: bold no longer flickers while typed (MinBZK/storybook#213), wrapping a selection leaves a trailing space out (#212), the caret sits on the insertion point (#215), and the link badge behaves like one character (#214).
• None of the 0.8.87 renames reach Waggle. No NLDD token Waggle references changed value or went away.

Checked in the preview: Inbox, the menu, Instellingen (a radio choice still saves after the 0.8.89 radio rework), and all four editor fixes with real key presses in the reply composer.

One visible cost: NLDD now reserves 3px for the caret in the simple variant, so the composer text starts 4px right of the "Paragraaf" label in the toolbar (was 1px). Left as NLDD ships it.

NLDD design system 0.8.82 -> 0.8.90. - 0.8.86 removes `nldd-form-field-error-text`; field errors move to `nldd-validation-list` (see the first commit). - 0.8.87 fixes the four editor issues we filed: bold no longer flickers while typed (MinBZK/storybook#213), wrapping a selection leaves a trailing space out (#212), the caret sits on the insertion point (#215), and the link badge behaves like one character (#214). - None of the 0.8.87 renames reach Waggle. No NLDD token Waggle references changed value or went away. Checked in the preview: Inbox, the menu, Instellingen (a radio choice still saves after the 0.8.89 radio rework), and all four editor fixes with real key presses in the reply composer. One visible cost: NLDD now reserves 3px for the caret in the `simple` variant, so the composer text starts 4px right of the "Paragraaf" label in the toolbar (was 1px). Left as NLDD ships it.

robbertbos force-pushed renovate/nldd from 7032395da9 to 335a5a9248 2026-08-31 02:07:27 +00:00 Compare

robbertbos changed title from Update dependency @nldd/design-system to ^0.8.83 to Update dependency @nldd/design-system to ^0.8.84 2026-08-31 02:07:28 +00:00

robbertbos force-pushed renovate/nldd from 335a5a9248 to efa08fbcc2 2026-09-01 02:07:20 +00:00 Compare

robbertbos changed title from Update dependency @nldd/design-system to ^0.8.84 to Update dependency @nldd/design-system to ^0.8.85 2026-09-01 02:07:23 +00:00

robbertbos force-pushed renovate/nldd from efa08fbcc2 to 9134f31b7a 2026-09-04 02:07:22 +00:00 Compare

robbertbos changed title from Update dependency @nldd/design-system to ^0.8.85 to Update dependency @nldd/design-system to ^0.8.86 2026-09-04 02:07:25 +00:00

robbertbos referenced this pull request from a commit 2026-09-05 11:29:52 +00:00

Bundle the open Renovate updates

robbertbos referenced this pull request 2026-09-05 11:30:07 +00:00

Bundle the open Renovate updates #352

robbertbos commented 2026-09-05 11:34:01 +00:00

Author

Owner

Copy link

Kept out of the bundled Renovate PR (#352), because 0.8.86 is not a clean bump. Two guard tests catch it, both correctly:

1. nlddTokens.test.ts - 0.8.86 drops --semantics-forms-gap-tight (0.8.82 had it at var(--primitives-space-10), 10px). AccountPanel.vue:612 still references it, and a dangling var() drops the whole gap declaration silently. There is no replacement token: the surviving ones are --semantics-forms-fields-gap (16px) and --semantics-forms-columns-gap (8px). So it is a choice between keeping today's 10px via the primitive, or moving the form to NLDD's own 16px field gap.

2. nlddImports.test.ts - nldd-form-field-error-text no longer exists. nldd-form-field now adopts nldd-validation-list children instead and wires describedByElements to them itself. Four files use the old element: AccountPanel.vue, AccountDeletePanel.vue, ImportPanel.vue, MattermostServerFields.vue.

The second one is a real migration with an a11y and a visual side to it, not a version number, so it wants a decision and a look at the running app rather than a mechanical rename.

Kept out of the bundled Renovate PR (#352), because 0.8.86 is not a clean bump. Two guard tests catch it, both correctly: 1. `nlddTokens.test.ts` - 0.8.86 drops `--semantics-forms-gap-tight` (0.8.82 had it at `var(--primitives-space-10)`, 10px). `AccountPanel.vue:612` still references it, and a dangling `var()` drops the whole `gap` declaration silently. There is no replacement token: the surviving ones are `--semantics-forms-fields-gap` (16px) and `--semantics-forms-columns-gap` (8px). So it is a choice between keeping today's 10px via the primitive, or moving the form to NLDD's own 16px field gap. 2. `nlddImports.test.ts` - `nldd-form-field-error-text` no longer exists. `nldd-form-field` now adopts `nldd-validation-list` children instead and wires `describedByElements` to them itself. Four files use the old element: `AccountPanel.vue`, `AccountDeletePanel.vue`, `ImportPanel.vue`, `MattermostServerFields.vue`. The second one is a real migration with an a11y and a visual side to it, not a version number, so it wants a decision and a look at the running app rather than a mechanical rename.

robbertbos force-pushed renovate/nldd from 9134f31b7a to fbf9b3b4be 2026-09-05 12:02:11 +00:00 Compare

robbertbos commented 2026-09-05 12:02:33 +00:00

Author

Owner

Copy link

Rebased on main and migrated. Eighteen breaking changes sit between 0.8.82 and 0.8.86; I walked all of them against this codebase. Six touch Waggle, four of those silently.

nldd-form-field-error-text is gone (0.8.84). All five of our field errors are decided by the server or the app rather than by a rule, so each becomes a rule-less nldd-validation-item in an nldd-validation-list, named in unmet on the control. Migrated in AccountPanel (2), MattermostServerFields, AccountDeletePanel and ImportPanel. Leaving the element in place would have been worse than a blank: an undefined custom element has no shadow styles, so its text renders permanently.

error-message on an input is unmet, no fallback (0.8.84). Nine sites. Nothing warns, no test sees it - every message on the page just stops appearing. This is the one that would have shipped quietly.

--semantics-forms-gap-tight is gone (0.8.84). The three form-gap tokens became two, and there is no tight one any more. The inline forms in Instellingen take --semantics-forms-fields-gap, which is NLDD's own form rhythm, so they space 16px instead of 10px. That is the one deliberate visual change in this PR.

unmet is bound as … : undefined, never false. Vue writes setAttribute('unmet', "false") while the element has not upgraded, and NLDD reads such attributes with hasAttribute(). ImportPanel's !! needed rewriting for that; the other three already yielded true | undefined.

Not applicable, checked rather than assumed: nldd-list-item-action → -segment, arrow-navigation, nldd-box's variant → background (we moved in 0.8.80), the renamed icon aliases, nldd-timeline-track-cell, nldd-tab-bar-item's selected, nldd-collection's gap, and --context-layer-top/-bottom. Our four empty-text uses are on Waggle's own OverzichtShell and SortableSection, not on nldd-list, so the removal there does not reach us. Every @close is bound on the overlay itself, so close no longer bubbling changes nothing - and it silently fixes a popover inside CardDetailsModal that used to reach the card's own handler.

Checked in the preview, not only in CI. A 422 on the base URL renders red under the field with the field's own validation icon, as before; so does the e-mail mismatch in the delete dialog. Focus, the menu and Instellingen are unchanged.

And the check that names alone cannot give you: of the 102 tokens Waggle references, none were removed and none changed value between 0.8.82 and 0.8.86.

Gates: 1421 vitest, 122 e2e, typecheck, pre-commit --all-files.

Worth a look yourself: the 10px → 16px in the "Token vervangen" and "Mattermost-server toevoegen" forms under Instellingen is a judgement call. Following NLDD is the reason for it; if you would rather keep today's spacing, var(--primitives-space-10) holds it at 10px.

Rebased on main and migrated. Eighteen breaking changes sit between 0.8.82 and 0.8.86; I walked all of them against this codebase. Six touch Waggle, four of those silently. **`nldd-form-field-error-text` is gone (0.8.84).** All five of our field errors are decided by the server or the app rather than by a rule, so each becomes a rule-less `nldd-validation-item` in an `nldd-validation-list`, named in `unmet` on the control. Migrated in `AccountPanel` (2), `MattermostServerFields`, `AccountDeletePanel` and `ImportPanel`. Leaving the element in place would have been worse than a blank: an undefined custom element has no shadow styles, so its text renders permanently. **`error-message` on an input is `unmet`, no fallback (0.8.84).** Nine sites. Nothing warns, no test sees it - every message on the page just stops appearing. This is the one that would have shipped quietly. **`--semantics-forms-gap-tight` is gone (0.8.84).** The three form-gap tokens became two, and there is no tight one any more. The inline forms in Instellingen take `--semantics-forms-fields-gap`, which is NLDD's own form rhythm, so they space **16px instead of 10px**. That is the one deliberate visual change in this PR. **`unmet` is bound as `… : undefined`, never `false`.** Vue writes `setAttribute('unmet', "false")` while the element has not upgraded, and NLDD reads such attributes with `hasAttribute()`. ImportPanel's `!!` needed rewriting for that; the other three already yielded `true | undefined`. Not applicable, checked rather than assumed: `nldd-list-item-action` → `-segment`, `arrow-navigation`, `nldd-box`'s `variant` → `background` (we moved in 0.8.80), the renamed icon aliases, `nldd-timeline-track-cell`, `nldd-tab-bar-item`'s `selected`, `nldd-collection`'s `gap`, and `--context-layer-top/-bottom`. Our four `empty-text` uses are on Waggle's own `OverzichtShell` and `SortableSection`, not on `nldd-list`, so the removal there does not reach us. Every `@close` is bound on the overlay itself, so `close` no longer bubbling changes nothing - and it silently fixes a popover inside `CardDetailsModal` that used to reach the card's own handler. **Checked in the preview, not only in CI.** A 422 on the base URL renders red under the field with the field's own validation icon, as before; so does the e-mail mismatch in the delete dialog. Focus, the menu and Instellingen are unchanged. And the check that names alone cannot give you: of the **102 tokens Waggle references, none were removed and none changed value** between 0.8.82 and 0.8.86. Gates: 1421 vitest, 122 e2e, typecheck, `pre-commit --all-files`. **Worth a look yourself:** the 10px → 16px in the "Token vervangen" and "Mattermost-server toevoegen" forms under Instellingen is a judgement call. Following NLDD is the reason for it; if you would rather keep today's spacing, `var(--primitives-space-10)` holds it at 10px.

robbertbos changed title from Update dependency @nldd/design-system to ^0.8.86 to NLDD 0.8.86: field errors move to nldd-validation-list 2026-09-05 12:02:41 +00:00

robbertbos force-pushed renovate/nldd from fbf9b3b4be to 3e62a46697 2026-09-05 12:05:01 +00:00 Compare

robbertbos commented 2026-09-05 12:05:17 +00:00

Author

Owner

Copy link

Terecht - dat was fout, en het is rechtgezet in 3e62a466.

#352 was gemerged terwijl ik hieraan werkte, dus main had de bundel al. Ik nam frontend/package.json in z'n geheel over van de oude renovate/nldd-branch, die nog van vóór de bundel dateerde, en daarmee draaide ik alle bumps eruit terug: vue, vue-router, marked, dompurify, CodeMirror, Playwright, vitest, vite, eslint, happy-dom en de markdown-it-override.

Nu is main opnieuw de basis en wijzigt package.json één regel, @nldd/design-system van ^0.8.82 naar ^0.8.86. De hele diff is 9 bestanden: die regel, 4 regels lockfile, de vier gemigreerde componenten, main.ts, test-setup.ts en de CHANGELOG.

Gates opnieuw gedraaid op de gecorrigeerde basis: 1421 vitest, 122 e2e, typecheck, pre-commit --all-files.

Terecht - dat was fout, en het is rechtgezet in `3e62a466`. `#352` was gemerged terwijl ik hieraan werkte, dus main had de bundel al. Ik nam `frontend/package.json` in z'n geheel over van de oude `renovate/nldd`-branch, die nog van vóór de bundel dateerde, en daarmee draaide ik alle bumps eruit terug: vue, vue-router, marked, dompurify, CodeMirror, Playwright, vitest, vite, eslint, happy-dom en de markdown-it-override. Nu is main opnieuw de basis en wijzigt `package.json` één regel, `@nldd/design-system` van `^0.8.82` naar `^0.8.86`. De hele diff is 9 bestanden: die regel, 4 regels lockfile, de vier gemigreerde componenten, `main.ts`, `test-setup.ts` en de CHANGELOG. Gates opnieuw gedraaid op de gecorrigeerde basis: 1421 vitest, 122 e2e, typecheck, `pre-commit --all-files`.

robbertbos commented 2026-09-06 02:01:47 +00:00

Author

Owner

Copy link

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

### Edited/Blocked Notification Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR. You can manually request rebase by checking the rebase/retry box above. ⚠️ **Warning**: custom changes will be lost.

robbertbos force-pushed renovate/nldd from 3e62a46697 to 4c069065fc 2026-09-19 12:41:57 +00:00 Compare

robbertbos added 1 commit 2026-09-19 12:56:59 +00:00

Move to NLDD design system 0.8.90 ... 1ace59926a

0.8.87 fixes the four editor issues we filed: bold no longer flickers
while typed (#213), wrapping a selection leaves a trailing space out
(#212), the caret sits on the insertion point (#215) and the link badge
behaves like one character (#214).

None of the 0.8.87 renames reach Waggle: it sets no mentionSource,
timing="default", color="default" or modeless. No NLDD token Waggle
references changed value or went away between 0.8.86 and 0.8.90.

robbertbos changed title from NLDD 0.8.86: field errors move to nldd-validation-list to NLDD 0.8.90: field errors move to nldd-validation-list, editor fixes 2026-09-19 12:57:14 +00:00

robbertbos merged commit be8926e3d5 into main 2026-09-19 13:12:42 +00:00

robbertbos deleted branch renovate/nldd 2026-09-19 13:12:42 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

nldd ds

  

question

More information is needed

  

wontfix

This won't be fixed

No labels

bug

duplicate

enhancement

help wanted

invalid

nldd ds

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

robbertbos/waggle!341

No description provided.