diff --git a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
index d3aa060a2721f561400991092a6447feb1a33177..7f87f3f43ced7597628821121831e37df95e6f4e 100644
--- a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
@@ -22,13 +22,21 @@ test.describe("Room list filters and sort", () => {
});
function getPrimaryFilters(page: Page): Locator {
- return page.getByRole("listbox", { name: "Room list filters" });
+ return page.getByTestId("primary-filters");
}
function getRoomOptionsMenu(page: Page): Locator {
return page.getByRole("button", { name: "Room Options" });
}
+ function getFilterExpandButton(page: Page): Locator {
+ return getPrimaryFilters(page).getByRole("button", { name: "Expand filter list" });
+ }
+
+ function getFilterCollapseButton(page: Page): Locator {
+ return getPrimaryFilters(page).getByRole("button", { name: "Collapse filter list" });
+ }
+
/**
* Get the room list
* @param page
@@ -136,6 +144,7 @@ test.describe("Room list filters and sort", () => {
await tile.click();
// Enable Favourite filter
+ await getFilterExpandButton(page).click();
const primaryFilters = getPrimaryFilters(page);
await primaryFilters.getByRole("option", { name: "Favourite" }).click();
await expect(tile).not.toBeVisible();
@@ -223,10 +232,6 @@ test.describe("Room list filters and sort", () => {
expect(await roomList.locator("role=gridcell").count()).toBe(4);
await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
- await primaryFilters.getByRole("option", { name: "Favourite" }).click();
- await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
- expect(await roomList.locator("role=gridcell").count()).toBe(1);
-
await primaryFilters.getByRole("option", { name: "People" }).click();
await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
@@ -240,6 +245,12 @@ test.describe("Room list filters and sort", () => {
await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
expect(await roomList.locator("role=gridcell").count()).toBe(5);
+ await getFilterExpandButton(page).click();
+
+ await primaryFilters.getByRole("option", { name: "Favourite" }).click();
+ await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+ expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
await primaryFilters.getByRole("option", { name: "Mentions" }).click();
await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
expect(await roomList.locator("role=gridcell").count()).toBe(1);
@@ -247,6 +258,9 @@ test.describe("Room list filters and sort", () => {
await primaryFilters.getByRole("option", { name: "Invites" }).click();
await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+ await getFilterCollapseButton(page).click();
+ await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
});
test(
@@ -326,6 +340,8 @@ test.describe("Room list filters and sort", () => {
{ tag: "@screenshot" },
async ({ page, app, user }) => {
const primaryFilters = getPrimaryFilters(page);
+ await getFilterExpandButton(page).click();
+
await primaryFilters.getByRole("option", { name: filter }).click();
const emptyRoomList = getEmptyRoomList(page);
@@ -343,6 +359,8 @@ test.describe("Room list filters and sort", () => {
{ tag: "@screenshot" },
async ({ page, app, user }) => {
const primaryFilters = getPrimaryFilters(page);
+ await getFilterExpandButton(page).click();
+
await primaryFilters.getByRole("option", { name: filter }).click();
const emptyRoomList = getEmptyRoomList(page);
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png
index 6c71c11b1d41832fad170f51d4663ce4943adc99..8cf4a3c97b3343d8e769223e3eb2f06e46d28876 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Invites-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Invites-empty-room-list-linux.png
index c7396da41d9b653dabe8c46f088985e8ba1f1088..c770da3377a94f840e872c41fe6e5355ed56468f 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Invites-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Invites-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Mentions-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Mentions-empty-room-list-linux.png
index 15620d361269e2d4cc192737e09da573b100a1fb..44e27d96189cb41580c27a5241e74651b5814c7c 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Mentions-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Mentions-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/People-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/People-empty-room-list-linux.png
index 7b73e0b819f00ade315b3e3fe7fb1771950668b7..3f700037cbcc7c8f3409c2219161c9720613388c 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/People-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/People-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Rooms-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Rooms-empty-room-list-linux.png
index eb3add5733661d3673b984e88caba9c44d2275f7..e01564eeb402247b7f882d96436fdbefb868be48 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Rooms-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Rooms-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Unreads-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Unreads-empty-room-list-linux.png
index 70ed4bb782d0f5d37e2f001186a49804ae602d34..94b09ac14f5fad1a0127f0d994bd0a84d07463e3 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Unreads-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Unreads-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/default-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/default-empty-room-list-linux.png
index 6781c1d3641440d541c651f2e22825ef5794ad62..45d2a775ea0a53a0d381139b79707dd3c5e27613 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/default-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/default-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png
index 4c82dc21e738d3d0daa991f6da79cc284c26a5b1..fc391d56cfb296788d52639cba156683131e5cd0 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png
index 2f12ee4e41563b54423a9f3783bfa5ee223322d3..13577e0a1bc5efab6eb57c148c7979b1d904da10 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png
index 5458395e673d8592a21aa185651a54354c7318cf..ac8abd60adbedc2783b8d5ec2c065a64539a3357 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png
index 878818f820aba0ddc198cbb63afcb1ef6ea41cfd..0b879c18fe1ba451b0407617b90256e74c2712c7 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png
index c706e71b0fae1d008fe0cd0f405b0ad802528b2e..43d8781239ae0c4af7781c5d3ac2cb251131bd1a 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png
index bada16f154b47858e96923c0c7360030212f947a..75cea916c91f777302b5b5cfdda6a93a6c500484 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png
index b0de5b5253a137f7f698d9fe39b942c40129dab9..e023a0d34d5f03f92a4981195b0ab262574a3b49 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png
index aa73d79988bb19ee375f2f18861c1aa7028c8fe6..bc1aa9f4f115dfdd148806089d2b9770cbc8e501 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png
index 55f4af3972d1148b6e5d6f3b411b76dc8d65936a..1315363e7edc21b613d42a6bf75c29a894d2a934 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png
index 36b7304a010eaec4031c30431448628387f7d90f..b400beac7c45fe2f37078cff9a933c0355efbb17 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png
index 1f2b691b4ac3f243d34205d78b034f4de2156361..44d90bac3417494a03862b6390591e3a62a6278c 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png
index cc2adcc5989ba6ab2b8c1b9ca41f5969d5f222a3..fe5ef29ecf2ee03f9f52818ed3023573913c58b7 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png
index 310912e50da212422f864b4593234c6029856284..86032973a3b60393e0d7eab020a81a6f2531705c 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png
index 9fa531f5b1548493313039c8afcf471bdecd62a9..b134c90d3aa37db01673f03c37f106bb58317b86 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png
index dac349eb2dbfe1c7a37291f23466a1d5b9e5947e..8970c20cb5f7d17f69fe54c6c6c0d396d293f5a8 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png
index 144604ffebfa0538133418329d0d50ae528c3287..0c99720d01af0519226fab7dfe2392c033cc5670 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
index 126f5d718deffbb8831e1d07a2a7b1dd8abfc69f..e9f1db7361f2fb234c98e1230a20d00cf29f3f6e 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png
index a8fbeb0b0320e39219d1e6576e2599c2d1ebdc35..b638b2880e258385f3873c280f2d891d9918e256 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
index 724218249bacf380477773e384596a5c88a3d846..43077507877612ae2c2360fe8748d35bb2c887eb 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png
index d6ecbc1c40f2b0e09da5e5d1df479c5af8b64220..c75c1d08cc39ddc101c2a53c3f4e3c8166703186 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png
index 1bd0eaab1bd0b17ad8944f86ee6eaebb376ba2d8..cf8bb5a058f9d85592726489f2f83dae18b14c35 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png
index b654a1f592dbe5aff8fb7444e8b5b0b384df25a2..e6d3d50e93e125db933aa2f2359e70f84ab2250d 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png
index 1a53f6151e7c34eb64348367a11a83810eb90c5e..8fab88fc7f7bf7e541153a31faa21228f21f3dbd 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png
index 05f824a2c89259869459c0ce8631da6f72065564..85a30b02f2825d8f25d3e5f4ddd9a95e9a4bc1e5 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png differ
diff --git a/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss b/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss
index ac85782bbd0ac2f0e5f06ad1356dd880640716cc..f8fc31ae124709c3dfc9d43a7a905f80024b63b8 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss
@@ -6,7 +6,32 @@
*/
.mx_RoomListPrimaryFilters {
- margin: unset;
- list-style-type: none;
- padding: var(--cpd-space-2x) var(--cpd-space-3x);
+ padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-2x) var(--cpd-space-3x);
+
+ .mx_RoomListPrimaryFilters_wrapping {
+ display: none;
+ }
+
+ ul {
+ margin: unset;
+ padding: unset;
+ list-style-type: none;
+ /**
+ * The InteractionObserver needs the height to be set to work properly.
+ */
+ height: 100%;
+ flex: 1;
+ }
+
+ .mx_RoomListPrimaryFilters_IconButton {
+ svg {
+ transition: transform 0.1s linear;
+ }
+ }
+
+ .mx_RoomListPrimaryFilters_IconButton[aria-expanded="true"] {
+ svg {
+ transform: rotate(180deg);
+ }
+ }
}
diff --git a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
index ebf972d36137f55f7c7c66a4267b5f13671c0f82..892f2b56b74257d483d9cfe54cc35d14a2ffaf9e 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
@@ -5,8 +5,9 @@
* Please see LICENSE files in the repository root for full details.
*/
-import React, { type JSX } from "react";
-import { ChatFilter } from "@vector-im/compound-web";
+import React, { type JSX, useEffect, useId, useRef, useState, type RefObject } from "react";
+import { ChatFilter, IconButton } from "@vector-im/compound-web";
+import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
import { Flex } from "../../../utils/Flex";
@@ -23,23 +24,146 @@ interface RoomListPrimaryFiltersProps {
* The primary filters for the room list
*/
export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX.Element {
+ const id = useId();
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const { ref, isWrapping: displayChevron, wrappingIndex } = useCollapseFilters<HTMLUListElement>(isExpanded);
+ const filters = useVisibleFilters(vm.primaryFilters, wrappingIndex);
+
return (
<Flex
- as="ul"
- role="listbox"
- aria-label={_t("room_list|primary_filters")}
className="mx_RoomListPrimaryFilters"
- align="center"
- gap="var(--cpd-space-2x)"
- wrap="wrap"
+ data-testid="primary-filters"
+ gap="var(--cpd-space-3x)"
+ direction="row-reverse"
>
- {vm.primaryFilters.map((filter) => (
- <li role="option" aria-selected={filter.active} key={filter.name}>
- <ChatFilter selected={filter.active} onClick={filter.toggle}>
- {filter.name}
- </ChatFilter>
- </li>
- ))}
+ {displayChevron && (
+ <IconButton
+ subtleBackground={true}
+ aria-expanded={isExpanded}
+ aria-controls={id}
+ className="mx_RoomListPrimaryFilters_IconButton"
+ aria-label={isExpanded ? _t("room_list|collapse_filters") : _t("room_list|expand_filters")}
+ size="28px"
+ onClick={() => setIsExpanded((_expanded) => !_expanded)}
+ >
+ <ChevronDownIcon color="var(--cpd-color-icon-secondary)" />
+ </IconButton>
+ )}
+ <Flex
+ id={id}
+ as="ul"
+ role="listbox"
+ aria-label={_t("room_list|primary_filters")}
+ align="center"
+ gap="var(--cpd-space-2x)"
+ wrap="wrap"
+ ref={ref}
+ >
+ {filters.map((filter, i) => (
+ <li role="option" aria-selected={filter.active} key={i}>
+ <ChatFilter selected={filter.active} onClick={() => filter.toggle()}>
+ {filter.name}
+ </ChatFilter>
+ </li>
+ ))}
+ </Flex>
</Flex>
);
}
+
+/**
+ * A hook to manage the wrapping of filters in the room list.
+ * It observes the filter list and hides filters that are wrapping when the list is not expanded.
+ * @param isExpanded
+ * @returns an object containing:
+ * - `ref`: a ref to put on the filter list element
+ * - `isWrapping`: a boolean indicating if the filters are wrapping
+ * - `wrappingIndex`: the index of the first filter that is wrapping
+ */
+function useCollapseFilters<T extends HTMLElement>(
+ isExpanded: boolean,
+): { ref: RefObject<T | null>; isWrapping: boolean; wrappingIndex: number } {
+ const ref = useRef<T>(null);
+ const [isWrapping, setIsWrapping] = useState(false);
+ const [wrappingIndex, setWrappingIndex] = useState(-1);
+
+ useEffect(() => {
+ if (!ref.current) return;
+
+ const hideFilters = (list: Element): void => {
+ let isWrapping = false;
+ Array.from(list.children).forEach((node, i): void => {
+ const child = node as HTMLElement;
+ const wrappingClass = "mx_RoomListPrimaryFilters_wrapping";
+ child.setAttribute("aria-hidden", "false");
+ child.classList.remove(wrappingClass);
+
+ // If the filter list is expanded, all filters are visible
+ if (isExpanded) return;
+
+ // If the previous element is on the left element of the current one, it means that the filter is wrapping
+ const previousSibling = child.previousElementSibling as HTMLElement | null;
+ if (previousSibling && child.offsetLeft < previousSibling.offsetLeft) {
+ if (!isWrapping) setWrappingIndex(i);
+ isWrapping = true;
+ }
+
+ // If the filter is wrapping, we hide it
+ child.classList.toggle(wrappingClass, isWrapping);
+ child.setAttribute("aria-hidden", isWrapping.toString());
+ });
+
+ if (!isWrapping) setWrappingIndex(-1);
+ setIsWrapping(isExpanded || isWrapping);
+ };
+
+ hideFilters(ref.current);
+ const observer = new ResizeObserver((entries) => entries.forEach((entry) => hideFilters(entry.target)));
+
+ observer.observe(ref.current);
+ return () => {
+ observer.disconnect();
+ };
+ }, [isExpanded]);
+
+ return { ref, isWrapping, wrappingIndex };
+}
+
+/**
+ * A hook to sort the filters by active state.
+ * The list is sorted if the current filter index is greater than or equal to the wrapping index.
+ * If the wrapping index is -1, the filters are not sorted.
+ *
+ * @param filters - the list of filters to sort.
+ * @param wrappingIndex - the index of the first filter that is wrapping.
+ */
+export function useVisibleFilters(
+ filters: RoomListViewState["primaryFilters"],
+ wrappingIndex: number,
+): RoomListViewState["primaryFilters"] {
+ // By default, the filters are not sorted
+ const [sortedFilters, setSortedFilters] = useState(filters);
+
+ useEffect(() => {
+ const isActiveFilterWrapping = filters.findIndex((f) => f.active) >= wrappingIndex;
+ // If the active filter is not wrapping, we don't need to sort the filters
+ if (!isActiveFilterWrapping || wrappingIndex === -1) {
+ setSortedFilters(filters);
+ return;
+ }
+
+ // Sort the filters with the current filter at first position
+ setSortedFilters(
+ filters.slice().sort((filterA, filterB) => {
+ // If the filter is active, it should be at the top of the list
+ if (filterA.active && !filterB.active) return -1;
+ if (!filterA.active && filterB.active) return 1;
+ // If both filters are active or not, keep their original order
+ return 0;
+ }),
+ );
+ }, [filters, wrappingIndex]);
+
+ return sortedFilters;
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 1d18ec8c730eba08c46d56491a73a99043286804..5763e0a7811fc81a7ed26cc963b64c27396b9fb1 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2115,6 +2115,7 @@
"add_space_label": "Add space",
"breadcrumbs_empty": "No recently visited rooms",
"breadcrumbs_label": "Recently visited rooms",
+ "collapse_filters": "Collapse filter list",
"empty": {
"no_chats": "No chats yet",
"no_chats_description": "Get started by messaging someone or by creating a room",
@@ -2132,6 +2133,7 @@
"show_activity": "See all activity",
"show_chats": "Show all chats"
},
+ "expand_filters": "Expand filter list",
"failed_add_tag": "Failed to add tag %(tagName)s to room",
"failed_remove_tag": "Failed to remove tag %(tagName)s from room",
"failed_set_dm_tag": "Failed to set direct message tag",
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx
index 525a17e1ac805e856b432dd8e702b9e499818336..2b2cb3418583d3a356555908fcb75ea599b867f7 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx
@@ -28,16 +28,13 @@ describe("<RoomListPanel />", () => {
});
it("should render the RoomListSearch component when UIComponent.FilterContainer is at true", () => {
- const { asFragment } = renderComponent();
+ renderComponent();
expect(screen.getByRole("button", { name: "Search Ctrl K" })).toBeInTheDocument();
- expect(asFragment()).toMatchSnapshot();
});
it("should not render the RoomListSearch component when UIComponent.FilterContainer is at false", () => {
mocked(shouldShowComponent).mockReturnValue(false);
- const { asFragment } = renderComponent();
-
+ renderComponent();
expect(screen.queryByRole("button", { name: "Search Ctrl K" })).toBeNull();
- expect(asFragment()).toMatchSnapshot();
});
});
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx
index fe605ce70faafb5fa38591bca67daaabbf5bfaea..7128ecd1b8e5c3ca8860bd7b8e92ce17dda47186 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx
@@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
-import React from "react";
+import React, { act } from "react";
import { render, screen } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
@@ -15,31 +15,111 @@ import { FilterKey } from "../../../../../../src/stores/room-list-v3/skip-list/f
describe("<RoomListPrimaryFilters />", () => {
let vm: RoomListViewState;
+ const filterToggleMocks = [jest.fn(), jest.fn(), jest.fn()];
+
+ let resizeCallback: ResizeObserverCallback;
beforeEach(() => {
+ // Reset mocks between tests
+ filterToggleMocks.forEach((mock) => mock.mockClear());
+
+ // Mock ResizeObserver
+ global.ResizeObserver = jest.fn().mockImplementation((callback) => {
+ resizeCallback = callback;
+ return {
+ observe: jest.fn(),
+ unobserve: jest.fn(),
+ disconnect: jest.fn(),
+ };
+ });
+
vm = {
- isLoadingRooms: false,
- rooms: [],
- canCreateRoom: true,
- createRoom: jest.fn(),
- createChatRoom: jest.fn(),
primaryFilters: [
- { name: "People", active: false, toggle: jest.fn(), key: FilterKey.PeopleFilter },
- { name: "Rooms", active: true, toggle: jest.fn(), key: FilterKey.RoomsFilter },
+ { name: "People", active: false, toggle: filterToggleMocks[0], key: FilterKey.PeopleFilter },
+ { name: "Rooms", active: true, toggle: filterToggleMocks[1], key: FilterKey.RoomsFilter },
+ { name: "Unreads", active: false, toggle: filterToggleMocks[2], key: FilterKey.UnreadFilter },
],
- activeIndex: undefined,
- };
+ } as unknown as RoomListViewState;
});
- it("should render primary filters", async () => {
- const user = userEvent.setup();
-
+ it("should renders all filters correctly", () => {
const { asFragment } = render(<RoomListPrimaryFilters vm={vm} />);
+
+ // Check that all filters are rendered
expect(screen.getByRole("option", { name: "People" })).toBeInTheDocument();
+ expect(screen.getByRole("option", { name: "Rooms" })).toBeInTheDocument();
+ expect(screen.getByRole("option", { name: "Unreads" })).toBeInTheDocument();
+
+ // Check that the active filter is marked as selected
expect(screen.getByRole("option", { name: "Rooms" })).toHaveAttribute("aria-selected", "true");
+ expect(screen.getByRole("option", { name: "People" })).toHaveAttribute("aria-selected", "false");
+ expect(screen.getByRole("option", { name: "Unreads" })).toHaveAttribute("aria-selected", "false");
+
expect(asFragment()).toMatchSnapshot();
+ });
+
+ it("should call toggle function when a filter is clicked", async () => {
+ const user = userEvent.setup();
+ render(<RoomListPrimaryFilters vm={vm} />);
+ // Click on an inactive filter
await user.click(screen.getByRole("button", { name: "People" }));
- expect(vm.primaryFilters[0].toggle).toHaveBeenCalled();
+
+ // Check that the toggle function was called
+ expect(filterToggleMocks[0]).toHaveBeenCalledTimes(1);
+ });
+
+ function mockFiltersOffsetLeft() {
+ jest.spyOn(screen.getByRole("option", { name: "People" }), "offsetLeft", "get").mockReturnValue(0);
+ jest.spyOn(screen.getByRole("option", { name: "Rooms" }), "offsetLeft", "get").mockReturnValue(30);
+ // Unreads is wrapping
+ jest.spyOn(screen.getByRole("option", { name: "Unreads" }), "offsetLeft", "get").mockReturnValue(0);
+ }
+
+ it("should hide or display filters if they are wrapping", async () => {
+ const user = userEvent.setup();
+ render(<RoomListPrimaryFilters vm={vm} />);
+
+ // No filter is wrapping, so chevron shouldn't be visible
+ expect(screen.queryByRole("button", { name: "Expand filter list" })).toBeNull();
+ expect(screen.queryByRole("option", { name: "Unreads" })).toBeVisible();
+
+ mockFiltersOffsetLeft();
+ // @ts-ignore
+ act(() => resizeCallback([{ target: screen.getByRole("listbox", { name: "Room list filters" }) }]));
+
+ // The Unreads filter is wrapping, it should not be visible
+ expect(screen.queryByRole("option", { name: "Unreads" })).toBeNull();
+ // Now filters are wrapping, so chevron should be visible
+ await user.click(screen.getByRole("button", { name: "Expand filter list" }));
+ // The list is expanded, so Unreads should be visible
+ expect(screen.getByRole("option", { name: "Unreads" })).toBeVisible();
+ });
+
+ it("should move the active filter if the list is collapsed and the filter is wrapping", async () => {
+ vm = {
+ primaryFilters: [
+ { name: "People", active: false, toggle: filterToggleMocks[0], key: FilterKey.PeopleFilter },
+ { name: "Rooms", active: false, toggle: filterToggleMocks[1], key: FilterKey.RoomsFilter },
+ { name: "Unreads", active: true, toggle: filterToggleMocks[2], key: FilterKey.UnreadFilter },
+ ],
+ } as unknown as RoomListViewState;
+
+ const user = userEvent.setup();
+ render(<RoomListPrimaryFilters vm={vm} />);
+ mockFiltersOffsetLeft();
+ // @ts-ignore
+ act(() => resizeCallback([{ target: screen.getByRole("listbox", { name: "Room list filters" }) }]));
+
+ // Unread filter should be moved to the first position
+ expect(screen.getByRole("listbox", { name: "Room list filters" }).children[0]).toBe(
+ screen.getByRole("option", { name: "Unreads" }),
+ );
+
+ // When the list is expanded, the Unreads filter should move to its original position
+ await user.click(screen.getByRole("button", { name: "Expand filter list" }));
+ expect(screen.getByRole("listbox", { name: "Room list filters" }).children[0]).not.toEqual(
+ screen.getByRole("option", { name: "Unreads" }),
+ );
});
});
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
deleted file mode 100644
index 7708ab1adbe3e829932bbbe296cb779cb71f48f9..0000000000000000000000000000000000000000
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
+++ /dev/null
@@ -1,459 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RoomListPanel /> should not render the RoomListSearch component when UIComponent.FilterContainer is at false 1`] = `
-<DocumentFragment>
- <section
- class="mx_Flex mx_RoomListPanel"
- data-testid="room-list-panel"
- style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
- >
- <header
- aria-label="Room options"
- class="mx_Flex mx_RoomListHeaderView"
- data-testid="room-list-header"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
- >
- <div
- class="mx_Flex mx_RoomListHeaderView_title"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
- >
- <h1
- title="Home"
- >
- Home
- </h1>
- </div>
- <div
- class="mx_Flex"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
- >
- <button
- aria-disabled="false"
- aria-expanded="false"
- aria-haspopup="menu"
- aria-label="Room Options"
- aria-labelledby="«rc»"
- class="_icon-button_m2erp_8"
- data-state="closed"
- id="radix-«ra»"
- role="button"
- style="--cpd-icon-button-size: 32px;"
- tabindex="0"
- type="button"
- >
- <div
- class="_indicator-icon_zr2a0_17"
- style="--cpd-icon-button-size: 100%;"
- >
- <svg
- color="var(--cpd-color-icon-secondary)"
- fill="currentColor"
- height="1em"
- viewBox="0 0 24 24"
- width="1em"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
- />
- </svg>
- </div>
- </button>
- <button
- aria-label="New message"
- class="_icon-button_m2erp_8"
- role="button"
- style="--cpd-icon-button-size: 32px;"
- tabindex="0"
- >
- <div
- class="_indicator-icon_zr2a0_17"
- style="--cpd-icon-button-size: 100%;"
- >
- <svg
- color="var(--cpd-color-icon-secondary)"
- fill="currentColor"
- height="1em"
- viewBox="0 0 24 24"
- width="1em"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- clip-rule="evenodd"
- d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
- fill-rule="evenodd"
- />
- <path
- d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
- />
- </svg>
- </div>
- </button>
- </div>
- </header>
- <ul
- aria-label="Room list filters"
- class="mx_Flex mx_RoomListPrimaryFilters"
- role="listbox"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
- >
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Unreads
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- People
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Rooms
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Mentions
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Invites
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Favourites
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Low priority
- </button>
- </li>
- </ul>
- <div
- class="mx_RoomListSkeleton"
- />
- </section>
-</DocumentFragment>
-`;
-
-exports[`<RoomListPanel /> should render the RoomListSearch component when UIComponent.FilterContainer is at true 1`] = `
-<DocumentFragment>
- <section
- class="mx_Flex mx_RoomListPanel"
- data-testid="room-list-panel"
- style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
- >
- <div
- class="mx_Flex mx_RoomListSearch"
- role="search"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
- >
- <button
- class="_button_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
- data-kind="secondary"
- data-size="sm"
- role="button"
- tabindex="0"
- >
- <svg
- aria-hidden="true"
- fill="currentColor"
- height="20"
- viewBox="0 0 24 24"
- width="20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
- />
- </svg>
- <span
- class="mx_Flex"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
- >
- <span
- class="mx_RoomListSearch_search_text"
- >
- Search
- </span>
- <kbd>
- Ctrl K
- </kbd>
- </span>
- </button>
- <button
- aria-label="Explore rooms"
- class="_button_vczzf_8 mx_RoomListSearch_button _has-icon_vczzf_57 _icon-only_vczzf_50"
- data-kind="secondary"
- data-size="sm"
- role="button"
- tabindex="0"
- >
- <svg
- aria-hidden="true"
- fill="currentColor"
- height="20"
- viewBox="0 0 24 24"
- width="20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M12 13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 12q0-.424.287-.713A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 12 13m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20m0 0q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4t5.675 2.325T20 12t-2.325 5.675T12 20m1.675-5.85q.15-.075.275-.2t.2-.275l2.925-6.25q.125-.25-.062-.437-.188-.188-.438-.063l-6.25 2.925q-.15.075-.275.2t-.2.275l-2.925 6.25q-.125.25.063.438.186.186.437.062z"
- />
- </svg>
- </button>
- </div>
- <header
- aria-label="Room options"
- class="mx_Flex mx_RoomListHeaderView"
- data-testid="room-list-header"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
- >
- <div
- class="mx_Flex mx_RoomListHeaderView_title"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
- >
- <h1
- title="Home"
- >
- Home
- </h1>
- </div>
- <div
- class="mx_Flex"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
- >
- <button
- aria-disabled="false"
- aria-expanded="false"
- aria-haspopup="menu"
- aria-label="Room Options"
- aria-labelledby="«r2»"
- class="_icon-button_m2erp_8"
- data-state="closed"
- id="radix-«r0»"
- role="button"
- style="--cpd-icon-button-size: 32px;"
- tabindex="0"
- type="button"
- >
- <div
- class="_indicator-icon_zr2a0_17"
- style="--cpd-icon-button-size: 100%;"
- >
- <svg
- color="var(--cpd-color-icon-secondary)"
- fill="currentColor"
- height="1em"
- viewBox="0 0 24 24"
- width="1em"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
- />
- </svg>
- </div>
- </button>
- <button
- aria-disabled="false"
- aria-expanded="false"
- aria-haspopup="menu"
- aria-label="Add"
- class="_icon-button_m2erp_8"
- data-state="closed"
- id="radix-«r7»"
- role="button"
- style="--cpd-icon-button-size: 32px;"
- tabindex="0"
- type="button"
- >
- <div
- class="_indicator-icon_zr2a0_17"
- style="--cpd-icon-button-size: 100%;"
- >
- <svg
- color="var(--cpd-color-icon-secondary)"
- fill="currentColor"
- height="1em"
- viewBox="0 0 24 24"
- width="1em"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- clip-rule="evenodd"
- d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
- fill-rule="evenodd"
- />
- <path
- d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
- />
- </svg>
- </div>
- </button>
- </div>
- </header>
- <ul
- aria-label="Room list filters"
- class="mx_Flex mx_RoomListPrimaryFilters"
- role="listbox"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
- >
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Unreads
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- People
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Rooms
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Mentions
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Invites
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Favourites
- </button>
- </li>
- <li
- aria-selected="false"
- role="option"
- >
- <button
- aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
- >
- Low priority
- </button>
- </li>
- </ul>
- <div
- class="mx_RoomListSkeleton"
- />
- </section>
-</DocumentFragment>
-`;
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
index 6c705944b86a78a31f3de234662dd35f089c9463..ee68963b2f881a2c9a74c8e557265ba403fe41f8 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
@@ -1,39 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`<RoomListPrimaryFilters /> should render primary filters 1`] = `
+exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
<DocumentFragment>
- <ul
- aria-label="Room list filters"
+ <div
class="mx_Flex mx_RoomListPrimaryFilters"
- role="listbox"
- style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+ data-testid="primary-filters"
+ style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
- <li
- aria-selected="false"
- role="option"
+ <ul
+ aria-label="Room list filters"
+ class="mx_Flex"
+ id="«r0»"
+ role="listbox"
+ style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
- <button
+ <li
+ aria-hidden="false"
aria-selected="false"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
+ role="option"
>
- People
- </button>
- </li>
- <li
- aria-selected="true"
- role="option"
- >
- <button
+ <button
+ aria-selected="false"
+ class="_chat-filter_5qdp0_8"
+ role="button"
+ tabindex="0"
+ >
+ People
+ </button>
+ </li>
+ <li
+ aria-hidden="false"
aria-selected="true"
- class="_chat-filter_5qdp0_8"
- role="button"
- tabindex="0"
+ role="option"
+ >
+ <button
+ aria-selected="true"
+ class="_chat-filter_5qdp0_8"
+ role="button"
+ tabindex="0"
+ >
+ Rooms
+ </button>
+ </li>
+ <li
+ aria-hidden="false"
+ aria-selected="false"
+ role="option"
>
- Rooms
- </button>
- </li>
- </ul>
+ <button
+ aria-selected="false"
+ class="_chat-filter_5qdp0_8"
+ role="button"
+ tabindex="0"
+ >
+ Unreads
+ </button>
+ </li>
+ </ul>
+ </div>
</DocumentFragment>
`;