One button system: adopt the four roles and gate them in CI - #1119
Merged
Conversation
Converts 31 dialog buttons to the four roles the frontend now defines — .btn-primary, .btn-cancel, .btn-delete, .btn-quiet — across 15 templates. Every id, binding, tooltip, cdkFocusInitial, data-e2e attribute, label and button order is preserved; only the Material directive and its inert `color` input are gone. Role follows the label and intent, not the old colour: Deactivate and the adhoc/area/task deletes are .btn-delete, while "Complete task", "Add" and the OTP "OK" are confirms and stay .btn-primary even where they carried color="warn". adhoc-copy-modal has two copy variants; only one was color="primary", so "Without comments" became .btn-quiet to keep that hierarchy rather than putting two filled buttons side by side. Also adds the gate to both workflows. This matters more than the conversion: the checker lives in the frontend repo, but a frontend CI run cannot see these templates at all — src/app/plugins/ is gitignored there — so without this step nothing checks plugin buttons and this file set drifts straight back. The frontend PR fixed 55 violations in core and could never have seen the 91 here. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015sXLtgzZU8QL9m84GqMkoJ
There was a problem hiding this comment.
Pull request overview
This PR updates the Backend Configuration plugin’s Angular templates to use the standardized “four button roles” system (primary/cancel/delete/quiet) and adds CI gating so button drift in plugin templates is detected even though the core frontend repo cannot see src/app/plugins/ by default.
Changes:
- Converted dialog action buttons from Angular Material button directives (
mat-*button+color) to role-based classes (.btn-primary,.btn-cancel,.btn-delete,.btn-quiet). - Updated one existing custom-styled dialog action button to align with the role system (
btn-warning→btn-primaryon the OK action). - Added a CI step in both PR and master workflows to run
scripts/check-button-conventions.jsagainst this plugin module before Jest runs.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-wizard/components/task-wizard-actions/task-wizard-multiple-deactivate/task-wizard-multiple-deactivate.component.html | Dialog actions migrated to btn-delete / btn-cancel. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-tracker/components/task-tracker-actions/task-tracker-shown-columns/task-tracker-shown-columns.component.html | Save/Cancel dialog actions migrated to btn-primary / btn-cancel. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-management/components/task-management-actions/task-management-delete-modal/task-management-delete-modal.component.html | Delete confirmation dialog actions migrated to btn-cancel / btn-delete. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/components/property-worker-otp-modal/property-worker-otp-modal.component.html | OK action aligned to btn-primary role styling. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/calendar/components/calendar-compliance-view/calendar-compliance-view.component.html | Delete-confirm template dialog actions migrated to btn-cancel / btn-delete. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/area-rules/components/area-rule-delete-modal/area-rule-delete-modal.component.html | Delete dialog actions migrated to btn-delete / btn-cancel. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/adhoc/components/adhoc-photo-delete-modal/adhoc-photo-delete-modal.component.html | Photo delete dialog actions migrated to btn-cancel / btn-delete while preserving focus behavior. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/adhoc/components/adhoc-delete-modal/adhoc-delete-modal.component.html | Delete dialog actions migrated to btn-cancel / btn-delete. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/adhoc/components/adhoc-copy-modal/adhoc-copy-modal.component.html | Copy dialog actions migrated to btn-cancel / btn-quiet / btn-primary. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/adhoc/components/adhoc-complete-modal/adhoc-complete-modal.component.html | Complete dialog actions migrated to btn-cancel / btn-primary. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/adhoc/components/adhoc-area-create-modal/adhoc-area-create-modal.component.html | Create areas dialog actions migrated to btn-cancel / btn-primary. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/modules/adhoc/components/adhoc-area-admin-modal/adhoc-area-admin-modal.component.html | Area admin dialog actions migrated to role-based classes for close/cancel/delete flows. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/components/properties/property-actions/property-docx-report-modal/property-docx-report-modal.component.html | Report download dialog actions migrated to btn-primary / btn-cancel. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/components/area-rule-plan-modal/area-rule-plan-modal.component.html | Save/Cancel dialog actions migrated to btn-primary / btn-cancel. |
| eform-client/src/app/plugins/modules/backend-configuration-pn/components/area-rule-entity-list-modal/area-rule-entity-list-modal.component.html | Save/Cancel dialog actions migrated to btn-primary / btn-cancel. |
| .github/workflows/dotnet-core-pr.yml | Added “Button conventions” gate to run the frontend checker against the copied plugin module. |
| .github/workflows/dotnet-core-master.yml | Added the same “Button conventions” gate for master workflow runs. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Plugin half of the button consolidation. Depends on microting/eform-angular-frontend#8016, already merged to
stable, which defines the roles and ships the checker.Audit: Button Drift
What changes
31 dialog buttons move to the four roles:
.btn-primary(filled),.btn-cancel(outlined),.btn-delete(destructive),.btn-quiet(text). Everyid, binding, tooltip, label and button order is preserved — only the Material directive and itscolorinput go, andcolorwas inert on a plain button anyway.Role follows the label and intent, not the old colour. Several confirms carried
color="warn"without being destructive and are.btn-primary.Why the CI step matters more than the conversion
The checker lives in the frontend repo, but a frontend CI run cannot see these templates —
src/app/plugins/is gitignored there, so its checkout contains only the core app. The frontend PR fixed 55 violations in core and was structurally incapable of seeing the 91 in the plugins.So each plugin repo has to run the checker over its own module, or nothing checks its buttons and they drift straight back. That step is added to both workflows here.
What it enforces
Inside a
mat-dialog-actionsrow, every button must carry one of the four roles; no template may reference a class no stylesheet defines. Material's button directives are rejected in both spellings — the theme override targeted.mat-mdc-text-button, which Angular Material 20 never emits, somat-buttonrendered as a pill in the wrong colour and always had.🤖 Generated with Claude Code
https://claude.ai/code/session_015sXLtgzZU8QL9m84GqMkoJ