Edwin van den Houdt
44eb2d2186
npm update brought every package to the latest version its existing package.json range allows (Angular tooling 22.0.2/22.0.4 -> 22.0.5, prettier 3.8.4 -> 3.9.4, typescript-eslint 8.62.0 -> 8.62.1); package.json itself needed no range changes. Auditing actual deprecation warnings (not just outdated versions) found nothing further to fix: @angular/platform-browser-dynamic and @angular-devkit/build-angular are deprecated by Angular but still required peer dependencies of the latest published @storybook/angular (10.4.6 — peer range still `>=18.0.0 < 22.0.0`, already why .npmrc sets legacy-peer-deps); jest-process-manager/expect-playwright are transitive-only through @storybook/test-runner's latest stable (0.24.4). No newer version of either Storybook package exists yet that drops them. The remaining npm audit advisory (@babel/core, low severity) is the same already-documented, deliberately-left issue in README.md (fixing it downgrades Angular). Left package.json's overrides untouched. The prettier bump alone changed formatting opinions on files this session didn't otherwise touch (a stale markdown italics marker, a few object-literal wrap points) — reformatted everything so `format:check` (part of CI) doesn't regress. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
3.1 KiB
WP-10 — CIBG button fidelity
Status: done (69880ef)
Phase: 2 — CIBG fidelity
Deviation: file-input's label-button was already reworked to
.btn-primary .btn-uploadby the earlier out-of-order "CIBG UI fidelity pass" (WP-11/12) — the vendored upload vocabulary (.btn-upload) supersedes this WP's original.btn-secondaryassumption, so no change was needed there. Icon affordances (chevron/pijl classes) are verified present in the vendored CSS, but no in-scope button (atom, file-input, RTE toolbar) currently has a next/previous affordance to attach one to — skipped as not applicable, not recorded as a gap (nothing hand-rolled to mark).
Why
The vendored CIBG build ships .btn-primary / .btn-secondary / .btn-danger / .btn-ghost / .btn-link / .btn-link--underline / .btn-inline — and no .btn-outline-primary,
.btn-outline-secondary, or .btn-sm (verified absent from
public/cibg-huisstijl/css/huisstijl.min.css). Three components emit those dead classes
and render as unstyled Bootstrap defaults instead of CIBG buttons.
Read first
- https://designsystem.cibg.nl/componenten/knoppen/ (or grep the vendored CSS)
src/app/shared/ui/button/button.component.ts(~line 14)src/app/shared/ui/upload/file-input/file-input.component.ts(~line 38)src/app/shared/ui/rich-text-editor/rich-text-editor.component.ts(toolbar, ~lines 55-60)
Decisions (pre-made, don't relitigate)
variant='secondary'→.btn-secondary(CIBG's documented secondary).- RTE toolbar buttons →
.btn-ghost; drop.btn-sm— if the toolbar needs a smaller size, that's token-bridge CSS carrying the CIBG-gap marker (format per WP-13; define it inline if WP-13 hasn't run). - Add
'ghost'to the atom's variant union (CIBG documents it; the RTE needs it). - Icon affordances (chevron/pijl): implement only if icon classes exist in the vendored CSS — inspect first; otherwise record as a gap in the WP-13 register and skip.
Files
src/app/shared/ui/button/button.component.ts+button.stories.tssrc/app/shared/ui/upload/file-input/file-input.component.tssrc/app/shared/ui/rich-text-editor/rich-text-editor.component.ts- Any story/snapshot referencing the old classes
Steps
- Fix the variant map in the button atom; add
ghost. - file-input label-button →
btn btn-secondary. - RTE toolbar →
btn btn-ghost(+ marked size CSS if needed). - Grep-check
btn-outline/btn-smgone repo-wide. - Storybook visual review of Button (all variants), FileInput, RichTextEditor against designsystem.cibg.nl/componenten/knoppen.
Acceptance criteria
grep -rn "btn-outline\|btn-sm" src/app→ empty.- Button story shows all CIBG variants incl. ghost; visuals match the design system.
- Axe still green (contrast can change with real button styles).
Verification
GREEN + npm run test-storybook:ci. Manual Storybook review of the three components.
Out of scope
Other invented classes (WP-11); datablock (WP-12).
Risks
Visual regressions where outline-secondary "worked by accident" via Bootstrap base rules — the story review step is the catch.