Edwin van den Houdt
44eb2d2186
Some checks failed
CI / frontend (push) Successful in 1m46s
CI / storybook-a11y (push) Successful in 4m23s
CI / backend (push) Successful in 1m14s
CI / codeql (csharp) (push) Has been cancelled
CI / codeql (javascript-typescript) (push) Has been cancelled
CI / api-client-drift (push) Has been cancelled
CI / e2e (push) Has been cancelled
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>
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.
|