Edwin van den Houdt
cbf697b8fa
Some checks failed
CI / storybook-a11y (push) Successful in 4m2s
CI / backend (push) Successful in 1m2s
CI / codeql (csharp) (push) Failing after 1m40s
CI / frontend (push) Failing after 54s
CI / codeql (javascript-typescript) (push) Failing after 1m23s
CI / api-client-drift (push) Successful in 1m30s
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
74 lines
3.1 KiB
Markdown
74 lines
3.1 KiB
Markdown
# 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
|
|
|
|
- [x] `grep -rn "btn-outline\|btn-sm" src/app` → empty.
|
|
- [x] Button story shows all CIBG variants incl. ghost; visuals match the design system.
|
|
- [x] 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.
|