[OP-19459] Use Primer Counter in notifications menu, fixing clipped counts - #23558
Merged
myabc merged 3 commits intoJun 13, 2026
Merged
Conversation
myabc
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces the existing “bubble” count rendering in notification-related UI with Primer counters to avoid clipped counts and align styling with Primer components.
Changes:
- Added a new Angular
PrimerCounterLabelComponent(with unit tests) and exported it viaOpSharedModule. - Updated in-app notification entry UI to render counts using the new Primer counter component (and removed the old bubble mixin styling).
- Switched the Rails submenu item count bubble to
Primer::Beta::Counter.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/app/shared/shared.module.ts | Exports the new Primer counter component for reuse across the frontend. |
| frontend/src/app/shared/components/primer/counter-label.component.ts | Introduces the Angular Primer counter label implementation (value/title logic, limiting, schemes). |
| frontend/src/app/shared/components/primer/counter-label.component.html | Renders a Primer-styled .Counter span with scheme modifiers and bindings. |
| frontend/src/app/shared/components/primer/counter-label.component.spec.ts | Adds unit tests for counter rendering, limiting, schemes, null/infinity, and hide-if-zero behavior. |
| frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html | Replaces the plain count bubble with <primer-counter-label> in the notifications list and loading state. |
| frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass | Removes the old indicator-bubble mixin usage for the notification count. |
| app/components/open_project/common/submenu_component.html.erb | Replaces submenu count bubble spans with Primer::Beta::Counter components. |
myabc
force-pushed
the
bug/OP-19459-notifications-center-clipped-count-badges
branch
from
June 7, 2026 22:47
0751058 to
072fc6c
Compare
myabc
added
needs review
javascript
myabc
marked this pull request as ready for review
June 7, 2026 22:51
Contributor
|
I did not look at it yet, but I'd vote for changing the base to dev. |
HDinger
requested changes
Jun 9, 2026
Comment on lines
+68
to
+70
| if (count === Infinity || count === -Infinity) { | ||
| return '∞'; | ||
| } |
Contributor
There was a problem hiding this comment.
I am no fan of this.. When will we ever want to display the infinity sign? Is this supported by the Primer component?
Contributor
Author
There was a problem hiding this comment.
Primer::Beta::Counter does support this — it renders ∞ for Float::INFINITY (with Infinity title attribute). I don't think we're currently rendering infinity anywhere in OP (in JS or Ruby), but kept this for API parity.
myabc
force-pushed
the
bug/OP-19459-notifications-center-clipped-count-badges
branch
from
June 11, 2026 15:46
072fc6c to
f603f8d
Compare
Switches from custom CSS implementation to `Primer::Beta::Counter` for rendering counters in menu on Notifications page. Fixes clipping of larger notification numbers (≥ 3 digits), including applying rounding of very large numbers (e.g. `4k+`). https://community.openproject.org/wp/OP-19459
Ports a simplified `Primer::Beta::Counter` to Angular as `PrimerCounterLabelComponent` so the `.Counter` badge can be used from Angular templates. Supports `count`, `scheme`, `limit`, and `hideIfZero`; the Ruby `text` and `round` options are omitted.
Aligns the look and behaviour of counters on the Notifications page by rendering the aggregated-notification count badge with the new `primer-counter-label` component in place of the bespoke `indicator-bubble` span, so IAN entries inherit the shared limit and delimiting behaviour.
myabc
force-pushed
the
bug/OP-19459-notifications-center-clipped-count-badges
branch
from
June 11, 2026 15:53
f603f8d to
6c1dc64
Compare
HDinger
approved these changes
Jun 12, 2026
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Ticket
https://community.openproject.org/wp/OP-19459
What are you trying to accomplish?
Fix clipped notification count badges by replacing the legacy bubble styling with Primer counters in the notification menu and notification center entries.
Screenshots
What approach did you choose and why?
Use
Primer::Beta::Counterfor server-rendered submenu counts and add a small standalone Angular counter component for in-app notification entries, matching the Primer counter API for the options needed here.This implementation currently only uses the primary (dark grey) counter variant for the Inbox - with the secondary variant used elsewhere. This is a personal preference - but is open for discussion!
Merge checklist