sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Fix notification badge sizing (#34655)

Browse Source 
* Fix notification badge sizing

* Update snapshots

* Add space panel badge regression test

* Update snapshot

* Updated test to test assert screenshot

* Update snapshot to look correct

* Update playwright test

* fix aliased issues
This commit is contained in:
Zack
2026-08-12 07:04:55 +00:00
committed by GitHub
parent 00a5546fe6
commit 23a666a9de
6 changed files with 78 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/e2e/spaces/spaces.spec.ts
+60
View File
@@ -261,6 +261,66 @@ test.describe("Spaces", () => {
await expect(buttons.nth(2)).toHaveAttribute("aria-label", "My Space");
});
test(
"should render readable notification badges in the space panel",
{ tag: "@screenshot" },
async ({ app, user, bot }) => {
const roomId = await app.client.createRoom({
name: "Unread Room",
});
await app.client.createSpace({
name: "Unread Space",
initial_state: [spaceChildInitialState(user.homeServer, roomId)],
});
const spaceButton = await app.getSpacePanelButton("Unread Space");
await expect(spaceButton).toBeVisible();
await bot.prepareClient();
const botUserId = await bot.evaluate((client) => client.getSafeUserId());
await app.client.evaluate(
async (client, { botUserId, roomId }) => {
await client.invite(roomId, botUserId);
},
{ botUserId, roomId },
);
await bot.joinRoom(roomId);
for (let i = 0; i < 10; i++) {
await bot.sendMessage(roomId, `${user.displayName} unread message ${i}`);
}
const badge = spaceButton.locator(".mx_SpacePanel_notificationBadge");
await expect(badge).toHaveText("10");
await expect(spaceButton).toMatchScreenshot("space-panel-notification-badge.png", {
css: `
/* Mask the unstable anti-aliased badge edge at the screenshot crop boundary. */
.mx_SpacePanel .mx_SpaceButton {
position: relative !important;
}
.mx_SpacePanel .mx_SpaceButton::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--cpd-color-bg-canvas-default);
z-index: 1;
pointer-events: none;
}
/* Avatar initials can render differently in CI; keep this snapshot focused on the badge. */
.mx_SpacePanel [role="img"][data-color],
.mx_SpacePanel .mx_BaseAvatar {
color: transparent !important;
}
`,
});
},
);
test("should include rooms in space home", async ({ page, app, user }) => {
const roomId1 = await app.client.createRoom({
name: "Music",
apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-notification-badge-linux.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+4 -4
View File
@@ -640,13 +640,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<span>
Show a badge
<div
class="mx_NotificationSettings2_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _badge2Char_kb9ny_56 cpd-theme-light"
class="mx_NotificationSettings2_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
data-badge-type="badge_2char"
data-notification-level="notification"
data-testid="notification-badge"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
>
1
</span>
@@ -1658,13 +1658,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<span>
Show a badge
<div
class="mx_NotificationSettings2_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _badge2Char_kb9ny_56 cpd-theme-light"
class="mx_NotificationSettings2_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
data-badge-type="badge_2char"
data-notification-level="notification"
data-testid="notification-badge"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
>
1
</span>
apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
+2 -2
View File
@@ -27,7 +27,7 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
>
<button
aria-label="Jump to first unread room."
class="mx_SpacePanel_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _badge2Char_kb9ny_56 cpd-theme-light"
class="mx_SpacePanel_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
data-badge-type="badge_2char"
data-notification-level="notification"
data-testid="notification-badge"
@@ -35,7 +35,7 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
type="button"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
>
8
</span>
apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+10 -10
View File
@@ -66,13 +66,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
/>
</svg>
<div
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
data-badge-type="dot"
data-notification-level="highlight"
data-testid="notification-badge"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
/>
</div>
</button>
@@ -117,13 +117,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
/>
</svg>
<div
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _dot_kb9ny_32"
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _dot_19whq_33"
data-badge-type="dot"
data-notification-level="notification"
data-testid="notification-badge"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
/>
</div>
</button>
@@ -231,13 +231,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
/>
</svg>
<div
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
data-badge-type="dot"
data-notification-level="highlight"
data-testid="notification-badge"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
/>
</div>
</button>
@@ -282,13 +282,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
/>
</svg>
<div
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
data-badge-type="dot"
data-notification-level="highlight"
data-testid="notification-badge"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
/>
</div>
</button>
@@ -333,13 +333,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
/>
</svg>
<div
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
data-badge-type="dot"
data-notification-level="highlight"
data-testid="notification-badge"
>
<span
class="_count_kb9ny_39"
class="_count_19whq_40"
/>
</div>
</button>
packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.module.css
+2 -1
View File
@@ -6,7 +6,8 @@
*/
.notificationBadge {
box-sizing: border-box;
/* App-side badge borders should sit outside the fixed badge size. */
box-sizing: content-box;
padding: 0;
border: 0;
font: inherit;