Aman-Mittal opened a new issue, #569: URL: https://github.com/apache/fineract-backoffice-ui/issues/569
## Business value ADR 0005 replaces vendor components with app-owned primitives one at a time, and the lint baseline in `eslint-suppressions.json` is how that progress is held: a file that migrates loses its entry, and the count only goes down. 47 list screens moved onto `app-button`/`app-icon`/`app-spinner` in one batch and the vendor count went 290 → 243. 16 more were left behind, not because they are hard, but because their icons say something `app-icon` has no way to express. Each one is a small, self-contained change, and each removes a suppression entry outright. The wider point is the one ADR 0005 makes: a primitive that cannot express what its call sites already do is not a boundary, it is a bottleneck. Closing these gaps is what lets the remaining screens move without anyone having to argue for an exception. ## Finding them ```bash grep -rn '<ion-icon' src/app --include=*.ts | grep -v spec | grep -vE 'name="[a-z0-9-]+"\s*/?>' ``` Grouped by what the call site needs: **Needs a new input — 4 files** | File | Uses | | --- | --- | | `features/clients/tabs/client-addresses-list.component.ts` | `[color]` | | `features/organization/staff/staff-list.component.ts` | `[color]` | | `features/organization/group-levels/group-levels-list.component.ts` | `color` | | `features/errors/access-denied.component.ts` | `class` | `app-icon` has neither a colour input nor any way to let a caller style the rendered `ion-icon`. A `class` on the `<app-icon>` host does not reach the element inside it. **Needs more than one thing — 1 file** `shared/components/help-icon/help-icon.component.ts` uses `class`, `role`, `[attr.aria-label]`, `[appTooltip]` and `data-testid` together. This is the one genuinely awkward case and is probably best left until the simpler ones have settled the shape. **Probably already fine, but unverified — 11 files** `features/products/savings-products-list`, `products/shares/share-accounts-list`, `products/shares/share-products-list`, `products/tax-components/tax-components-list`, `products/tax-groups/tax-groups-list`, `system/codes/code-values-list`, `system/codes/codes-list`, `tellers/cashiers/cashiers-list`, `tellers/tellers-list`, `transfers/standing-instructions-list` use `slot`; `layout/sidebar.component.ts` uses `aria-hidden` and `class`. These were excluded from the batch conservatively rather than because they were proven impossible. `slot` on the `<app-icon>` host very likely works already — `app-button` renders `<app-icon slot="start">` inside an `ion-button` today and Ionic slots it correctly — and `aria-hidden` is what `app-icon` does by default, so those attributes may simply be droppable. **Check one before assuming the rest**; if `slot` works, ten of these become the same trivial substitution the batch already did. `layout/sidebar.component.ts` needs care for a different reason: its icons appear in the axe baseline in `e2e/accessibility.spec.ts`, so making them `aria-hidden` may leave entries there stale. Run the accessibility spec for that one. ## Describing the change For the colour cases, add an input that names an application intent rather than re-exporting Ionic's palette, in the same spirit as `app-button`'s `intent`: ```ts // before <ion-icon name="ellipse" [color]="statusColor(row)"></ion-icon> // after <app-icon name="ellipse" [tone]="statusTone(row)" /> ``` What the tones should be is worth deciding from the call sites rather than in advance — read the four before picking names. If they all express status, a `tone` of `success | warning | danger | neutral` is likely enough; `app-button`'s `INTENT_COLOR` map is the pattern to follow, and the mapping onto `ion-icon`'s `color` stays private to the component. For `class`, prefer an input that names the intent over passing styling through. If a call site only wants a size, a `size` input is better than letting arbitrary CSS reach the vendor element — ADR 0005 is explicit that primitives should not export vendor styling as public API. ## Scope In scope: the `app-icon` inputs these call sites need, their tests, and migrating the files that then become migratable. Out of scope: `help-icon.component.ts` (see above), and anything requiring changes to `app-button` or `app-spinner`. ## Getting started - The primitive and its spec: `src/app/ui/icon/icon.component.ts`, `icon.component.test.ts`. - `app-button`'s `intent`/`emphasis` mapping is the worked example of keeping a vendor palette private. - After migrating a file, run `npm run lint:prune` — its suppression entry should disappear. If the count does not drop, the file still imports something from `@ionic/angular`. - `npm run lint`, `npm test`, `npm run check:icons` and `npm run check:a11y-names` must pass. The mocked e2e project (`npx playwright test --project=mocked`) needs no backend and is worth running for any screen it covers. - One pull request per feature directory is easiest to review. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
