Files
atomic-design-poc/docs/project/archive/backlog/WP-10-button-fidelity.md
T
ehoandClaude Opus 5 12f17d9d73 docs: archive the finished backlogs (RD-30)
Two backlog trees are complete: `docs/project/backlog/` (75 files, every
WP done) and `docs/project/refactor-backlog-setup/` (the arc before it).
Move both under `docs/project/archive/` with `git mv`, so history stays
intact through `git log --follow`. `SHOWCASE-ROADMAP.md` moves with them,
because it points at the now-archived backlog README.

Add `docs/project/archive/README.md`. It states that these trees are
historical and names the two directories that are still live.

Repoint every inbound reference named in RD-30's Files table: CLAUDE.md,
the root README, both backend READMEs, `LetterHtml.cs`, `a11y.mdx`, the
`document-feature` and `new-ssp` skills, and the readable-codebase PLAN,
README, and RD-19 ticket. Fix two upward-relative links inside the moved
WP files (WP-68, WP-69) that gained a directory level and would otherwise
break. Repoint `.prettierignore`'s two agent-prompt exclusions to their
new path, so prettier keeps leaving those files' exact wording alone.

Mark RD-30 done and check off its acceptance criteria; flip its README
row to done.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-08 23:00:38 +02:00

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-upload by the earlier out-of-order "CIBG UI fidelity pass" (WP-11/12) — the vendored upload vocabulary (.btn-upload) supersedes this WP's original .btn-secondary assumption, 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.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

  1. Fix the variant map in the button atom; add ghost.
  2. file-input label-button → btn btn-secondary.
  3. RTE toolbar → btn btn-ghost (+ marked size CSS if needed).
  4. Grep-check btn-outline/btn-sm gone repo-wide.
  5. 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.