Skip to content

Restore the ITK admin styling and use EasyAdmin's own components - #94

Merged
turegjorup merged 3 commits into
developfrom
feature/easyadmin-55-simplifications
Aug 26, 2026
Merged

Restore the ITK admin styling and use EasyAdmin's own components#94
turegjorup merged 3 commits into
developfrom
feature/easyadmin-55-simplifications

Conversation

@turegjorup

Copy link
Copy Markdown
Contributor

Link to ticket

TODO: no ticket linked yet — please add before review.

Description

Follow-up to #93, which took EasyAdmin from 5.0.11 to 5.5.1. I read the maintainer's "New in EasyAdmin" posts for 5.2 through 5.5 and checked each addition against this codebase. Three things were worth doing; what I skipped is listed at the bottom.

The ITK colours have not been applied in the admin since May. Tracking admin.css through the history:

When What
2023-07-26, #33 public/css/admin.css added, holding the ITK :root block — blue rgb(0,123,166) for buttons, links, the active sidebar item and true-boolean badges; red rgb(228,73,48) for false badges and danger; grey rgb(66,66,66) for text
2026-05-20, #81 The AssetMapper migration deleted the file and moved its contents to assets/styles/app.css. configureAssets() kept adding css/admin.css, so every admin page has emitted a <link> to a 404 since
since then assets/styles/app.css reaches nothing. It is imported by assets/app.js, the AssetMapper app entrypoint, which only templates/base.html.twig would load — and that template calls encore_entry_link_tags('app'), an Encore entry that does not exist, and no template extends it

So the branding was not just unstyled in the admin, it was unreachable everywhere. This PR restores it in two parts:

  • The blue goes through 5.4's theme API: Theme::new()->primaryColor('#007ba6'). In 5.5 --button-primary-bg, --link-color, --sidebar-menu-active-item-color and --badge-boolean-true-bg all derive from --ea-primary, so one call replaces five overrides, and the theme computes the text colour that sits on top of it (--ea-primary-foreground: #fff) instead of us guessing.
  • The rest stays CSS, loaded by a new CSS-only Encore entry that DashboardController::configureAssets() adds for every admin page. What remains is what the theme API cannot express: the ITK red, and the grey text (grays() only takes named ramps like zinc or slate, not an arbitrary colour).

Badges and icons now use EasyAdmin's own components. 5.2 shipped a component library (<twig:ea:Badge>, <twig:ea:Icon>), and 5.3/5.4 moved styling onto design tokens and CSS cascade layers. Our field templates hand-rolled <span class="badge badge-danger"> in 17 places, which works today only because the old classes still exist. Upstream's own crud/field/association.html.twig is now written with the component, and going through it means the admin picks up the theming above rather than shadowing it.

The AutoBadge classes are gone. AutoBadgeMenuItem and AutoBadgeCrudMenuItem existed to hide a menu badge when its count was zero, by wrapping CrudMenuItem and proxying every other call through __call() — two classes, ~100 lines. MenuItemDto::hasVisibleBadge() now does that for null content, so setBadge($count ?: null, 'dark') covers it. Nothing referenced the two classes any more, so the dashboard had gone back to showing a literal "0"; that goes away too.

Screenshot of the result

The admin gets its ITK blue back, so this is worth a look on staging rather than from a diff. What I verified locally on the rendered /admin/server:

  • --ea-primary: #007ba6 and --ea-primary-foreground: #fff in the theme block
  • /build/admin.778bbafb.css served 200, where /css/admin.css used to 404
  • badge markup byte-identical to before the component swap, except the SSH terminal icon is now .badge > .icon > i, which 5.5's theme styles with a .badge:has(>.icon) rule that the hand-rolled <i> never matched

Checklist

  • My code is covered by test cases.
  • My code passes our test (all our tests).
  • My code passes our static analysis suite.
  • My code passes our continuous integration process.

AdminSmokeTest loads the index page of all 16 CRUD controllers as a logged-in user, so every template touched here is rendered by the suite. PHPUnit, PHPStan, PHP-CS-Fixer, twig-cs-fixer, markdownlint and Prettier (including yarn coding-standards-check for webpack.config.js and the stylesheet) all pass locally.

Additional comments or questions

assets/styles/app.css is EasyAdmin-only despite its name, and templates/base.html.twig still points at an Encore app entry that does not exist. Both are leftovers from #81's AssetMapper-then-Encore round trip. I left them alone: nothing extends base.html.twig, so it is inert, and renaming the stylesheet would drag assets/app.js and importmap.php into a PR that is meant to be about EasyAdmin.

Researched and deliberately not done:

  • Form field addons (5.5)prepend()/append(). Our custom field templates are all index/detail rendering, where addons do not apply. They would suit monthlyPrice, cybersecurityPrice and quarterlyHours on Service Agreements, but that adds a unit hint rather than removing code, and I do not know which currency those prices are in.
  • Nested AssociationField sorting (5.5) — no CRUD controller overrides createIndexQueryBuilder or joins for sorting, so there is nothing to replace.
  • Tab badges (5.2), detail template overrides (5.4), sidebar components and keepOpen() (5.3) — we use no tabs, override no detail templates, and the menu is flat.

DashboardController still counts advisories on every admin page load to draw that badge, the follow-up noted on #91. Caching it is a different change from this one.

@github-actions

Copy link
Copy Markdown

API Specification - Non-breaking changes

No changelog changes

@codecov-commenter

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 37.99%. Comparing base (bae8493) to head (6bf01ae).
⚠️ Report is 16 commits behind head on develop.

Additional details and impacted files
@@              Coverage Diff              @@
##             develop      #94      +/-   ##
=============================================
+ Coverage      37.14%   37.99%   +0.84%     
+ Complexity       948      946       -2     
=============================================
  Files            133      133              
  Lines           2972     2982      +10     
=============================================
+ Hits            1104     1133      +29     
+ Misses          1868     1849      -19     
Flag Coverage Δ
unittests 37.99% <100.00%> (+0.84%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@turegjorup turegjorup self-assigned this Aug 26, 2026
@turegjorup
turegjorup merged commit 27b3a68 into develop Aug 26, 2026
13 checks passed
@turegjorup
turegjorup deleted the feature/easyadmin-55-simplifications branch August 26, 2026 09:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants