diff --git a/src/ui/ui.css b/src/ui/ui.css index 4011774..8628211 100644 --- a/src/ui/ui.css +++ b/src/ui/ui.css @@ -184,6 +184,24 @@ padding-right: 10px; } +.abledom-issue_warning + .abledom-issue-group-issues { + border-left: 3px solid rgba(163, 82, 1, 0.7); +} +#abledom-report.abledom-align-right + .abledom-issue_warning + + .abledom-issue-group-issues { + border-right: 3px solid rgba(163, 82, 1, 0.7); +} + +.abledom-issue_info + .abledom-issue-group-issues { + border-left: 3px solid rgba(0, 0, 255, 0.7); +} +#abledom-report.abledom-align-right + .abledom-issue_info + + .abledom-issue-group-issues { + border-right: 3px solid rgba(0, 0, 255, 0.7); +} + .abledom-issue-group-title { background-color: rgba(164, 2, 2, 0.7); color: white; diff --git a/src/ui/ui.ts b/src/ui/ui.ts index a86a9fe..cf20e85 100644 --- a/src/ui/ui.ts +++ b/src/ui/ui.ts @@ -976,11 +976,33 @@ export class IssuesUI { if (container && countElement) { const count = container.children.length; + + if (count === 0) { + this._removeIssueGroup(groupName, container); + continue; + } + countElement.textContent = `${count}`; } } } + private _removeIssueGroup( + groupName: string, + container: HTMLElementWithAbleDOMUIFlag, + ): void { + const groupElement = container.parentElement; + + if (groupElement?.classList.contains("abledom-issue-group")) { + groupElement.remove(); + } else { + container.remove(); + } + + delete this._issueGroupContainers[groupName]; + delete this._issueGroupCountElements[groupName]; + } + removeIssue(issue: IssueUI) { if (!this._issues.has(issue)) { return; diff --git a/tests/notificationsUI/notificationsUI.test.ts b/tests/notificationsUI/notificationsUI.test.ts index 8fce0f4..7405942 100644 --- a/tests/notificationsUI/notificationsUI.test.ts +++ b/tests/notificationsUI/notificationsUI.test.ts @@ -213,6 +213,12 @@ test.describe("Notifications UI", () => { // All 3 label issues should be gone. expect(await getVisibleIssueCount(page)).toBe(issuesBefore - 3); + + // Empty group title should be removed, not shown with "0". + const labelGroupTitles = page.locator( + `${groupTitleSelector}:has-text("Missing text label")`, + ); + await expect(labelGroupTitles).toHaveCount(0); }); test("group close button hides all issues within the group", async ({