eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1bb9383344bf76397e793d3613d60744f63294eb
atomic-design-poc/docs/backlog/WP-10-button-fidelity.md
Edwin van den Houdt 44eb2d2186
Some checks failed
CI / frontend (push) Successful in 1m46s
Details
CI / storybook-a11y (push) Successful in 4m23s
Details
CI / backend (push) Successful in 1m14s
Details
CI / codeql (csharp) (push) Has been cancelled
Details
CI / codeql (javascript-typescript) (push) Has been cancelled
Details
CI / api-client-drift (push) Has been cancelled
Details
CI / e2e (push) Has been cancelled
Details
chore(deps): update npm packages within declared ranges; reformat for prettier 3.9.4 
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>
2026-07-05 10:29:36 +02:00

3.1 KiB
Raw Blame History

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.

Reference in New Issue View Git Blame Copy Permalink