Files

Edwin van den Houdt f769242f76 docs: replace SHOWCASE-ROADMAP.md with docs/backlog/ (17 WPs)

Turns the prior roadmap sketch into ordered, gated work packages (enforcement
gates, FP/DDD consistency, CIBG fidelity, Storybook curriculum, a11y) from the
2026-07-02 showcase-hardening audit.

2026-07-02 17:07:59 +02:00

2.5 KiB

Raw Blame History

WP-10 — CIBG button fidelity

Status: todo Phase: 2 — CIBG fidelity

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.ts
src/app/shared/ui/upload/file-input/file-input.component.ts
src/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-sm gone 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.

2.5 KiB Raw Blame History