Add secondary filters to the new room list (#29818)
* Secondary filters * Update snapshots * Fix imports * Update screenshots * Add unit test * Imports * Prettier * Add playwright test
This commit is contained in:
David Baker
GitHub
@@ -0,0 +1,115 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render, type RenderOptions, screen } from "jest-matrix-react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { TooltipProvider } from "@vector-im/compound-web";
|
||||
|
||||
import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
|
||||
import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
|
||||
import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
|
||||
import { RoomListFilterMenu } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListFilterMenu";
|
||||
|
||||
function getRenderOptions(): RenderOptions {
|
||||
return {
|
||||
wrapper: ({ children }) => <TooltipProvider>{children}</TooltipProvider>,
|
||||
};
|
||||
}
|
||||
|
||||
describe("<RoomListFilterMenu />", () => {
|
||||
let vm: RoomListViewState;
|
||||
|
||||
beforeEach(() => {
|
||||
vm = {
|
||||
rooms: [],
|
||||
canCreateRoom: true,
|
||||
createRoom: jest.fn(),
|
||||
createChatRoom: jest.fn(),
|
||||
primaryFilters: [],
|
||||
activateSecondaryFilter: () => {},
|
||||
activeSecondaryFilter: SecondaryFilters.AllActivity,
|
||||
sort: jest.fn(),
|
||||
activeSortOption: SortOption.Activity,
|
||||
shouldShowMessagePreview: false,
|
||||
toggleMessagePreview: jest.fn(),
|
||||
activeIndex: undefined,
|
||||
};
|
||||
});
|
||||
|
||||
it("should render room list filter menu button", async () => {
|
||||
const { asFragment } = render(<RoomListFilterMenu vm={vm} />, getRenderOptions());
|
||||
expect(screen.getByRole("button", { name: "Filter" })).toBeInTheDocument();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("opens the menu on click", async () => {
|
||||
const userevent = userEvent.setup();
|
||||
|
||||
render(<RoomListFilterMenu vm={vm} />, getRenderOptions());
|
||||
await userevent.click(screen.getByRole("button", { name: "Filter" }));
|
||||
expect(screen.getByRole("menu", { name: "Filter" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows 'All activity' checked if selected", async () => {
|
||||
const userevent = userEvent.setup();
|
||||
|
||||
render(<RoomListFilterMenu vm={vm} />, getRenderOptions());
|
||||
await userevent.click(screen.getByRole("button", { name: "Filter" }));
|
||||
|
||||
const shouldBeSelected = screen.getByRole("menuitem", { name: "All activity" });
|
||||
expect(shouldBeSelected).toHaveAttribute("aria-selected", "true");
|
||||
expect(shouldBeSelected).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows 'Invites only' checked if selected", async () => {
|
||||
const userevent = userEvent.setup();
|
||||
|
||||
vm.activeSecondaryFilter = SecondaryFilters.InvitesOnly;
|
||||
render(<RoomListFilterMenu vm={vm} />, getRenderOptions());
|
||||
await userevent.click(screen.getByRole("button", { name: "Filter" }));
|
||||
|
||||
const shouldBeSelected = screen.getByRole("menuitem", { name: "Invites only" });
|
||||
expect(shouldBeSelected).toHaveAttribute("aria-selected", "true");
|
||||
expect(shouldBeSelected).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows 'Low priority' checked if selected", async () => {
|
||||
const userevent = userEvent.setup();
|
||||
|
||||
vm.activeSecondaryFilter = SecondaryFilters.LowPriority;
|
||||
render(<RoomListFilterMenu vm={vm} />, getRenderOptions());
|
||||
await userevent.click(screen.getByRole("button", { name: "Filter" }));
|
||||
|
||||
const shouldBeSelected = screen.getByRole("menuitem", { name: "Low priority" });
|
||||
expect(shouldBeSelected).toHaveAttribute("aria-selected", "true");
|
||||
expect(shouldBeSelected).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows 'Mentions only' checked if selected", async () => {
|
||||
const userevent = userEvent.setup();
|
||||
|
||||
vm.activeSecondaryFilter = SecondaryFilters.MentionsOnly;
|
||||
render(<RoomListFilterMenu vm={vm} />, getRenderOptions());
|
||||
await userevent.click(screen.getByRole("button", { name: "Filter" }));
|
||||
|
||||
const shouldBeSelected = screen.getByRole("menuitem", { name: "Mentions only" });
|
||||
expect(shouldBeSelected).toHaveAttribute("aria-selected", "true");
|
||||
expect(shouldBeSelected).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("activates filter when item clicked", async () => {
|
||||
const userevent = userEvent.setup();
|
||||
|
||||
vm.activateSecondaryFilter = jest.fn();
|
||||
render(<RoomListFilterMenu vm={vm} />, getRenderOptions());
|
||||
await userevent.click(screen.getByRole("button", { name: "Filter" }));
|
||||
await userevent.click(screen.getByRole("menuitem", { name: "Invites only" }));
|
||||
|
||||
expect(vm.activateSecondaryFilter).toHaveBeenCalledWith(SecondaryFilters.InvitesOnly);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,208 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<RoomListFilterMenu /> should render room list filter menu button 1`] = `
|
||||
<DocumentFragment>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Filter"
|
||||
aria-labelledby="«r2»"
|
||||
class="_icon-button_m2erp_8"
|
||||
data-state="closed"
|
||||
id="radix-«r0»"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_zr2a0_17"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<RoomListFilterMenu /> shows 'All activity' checked if selected 1`] = `
|
||||
<button
|
||||
aria-selected="true"
|
||||
class="_item_dyt4i_8 _interactive_dyt4i_26"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
class="_icon_dyt4i_50"
|
||||
fill="currentColor"
|
||||
height="20px"
|
||||
viewBox="0 0 24 24"
|
||||
width="20px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 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 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
|
||||
>
|
||||
All activity
|
||||
</span>
|
||||
<svg
|
||||
color="var(--cpd-color-icon-primary)"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`<RoomListFilterMenu /> shows 'Invites only' checked if selected 1`] = `
|
||||
<button
|
||||
aria-selected="true"
|
||||
class="_item_dyt4i_8 _interactive_dyt4i_26"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
class="_icon_dyt4i_50"
|
||||
fill="currentColor"
|
||||
height="20px"
|
||||
viewBox="0 0 24 24"
|
||||
width="20px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6h-2a.97.97 0 0 1-.712-.287A.97.97 0 0 1 16 5q0-.424.288-.713A.97.97 0 0 1 17 4h2V2q0-.424.288-.712A.97.97 0 0 1 20 1q.424 0 .712.288Q21 1.575 21 2v2h2q.424 0 .712.287Q24 4.576 24 5t-.288.713A.97.97 0 0 1 23 6h-2v2q0 .424-.288.713A.97.97 0 0 1 20 9a.97.97 0 0 1-.712-.287A.97.97 0 0 1 19 8z"
|
||||
/>
|
||||
<path
|
||||
d="M22 17v-6.341A6 6 0 0 1 20 11v6H6a2 2 0 0 0-1.414.586L4 18.172V5h10c0-.701.12-1.374.341-2H4a2 2 0 0 0-2 2v15.586c0 .89 1.077 1.337 1.707.707L6 19h14a2 2 0 0 0 2-2"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
|
||||
>
|
||||
Invites only
|
||||
</span>
|
||||
<svg
|
||||
color="var(--cpd-color-icon-primary)"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`<RoomListFilterMenu /> shows 'Low priority' checked if selected 1`] = `
|
||||
<button
|
||||
aria-selected="true"
|
||||
class="_item_dyt4i_8 _interactive_dyt4i_26"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
class="_icon_dyt4i_50"
|
||||
fill="currentColor"
|
||||
height="20px"
|
||||
viewBox="0 0 24 24"
|
||||
width="20px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 4.5a1 1 0 0 1 1 1v10.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.086V5.5a1 1 0 0 1 1-1"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
|
||||
>
|
||||
Low priority
|
||||
</span>
|
||||
<svg
|
||||
color="var(--cpd-color-icon-primary)"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`<RoomListFilterMenu /> shows 'Mentions only' checked if selected 1`] = `
|
||||
<button
|
||||
aria-selected="true"
|
||||
class="_item_dyt4i_8 _interactive_dyt4i_26"
|
||||
data-kind="primary"
|
||||
data-orientation="vertical"
|
||||
data-radix-collection-item=""
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
class="_icon_dyt4i_50"
|
||||
fill="currentColor"
|
||||
height="20px"
|
||||
viewBox="0 0 24 24"
|
||||
width="20px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
|
||||
>
|
||||
Mentions only
|
||||
</span>
|
||||
<svg
|
||||
color="var(--cpd-color-icon-primary)"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
@@ -116,17 +116,49 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
|
||||
<div
|
||||
aria-label="Secondary filters"
|
||||
class="mx_Flex mx_RoomListSecondaryFilters"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 8px; --mx-flex-wrap: nowrap;"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 4px; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Filter"
|
||||
aria-labelledby="«rk»"
|
||||
class="_icon-button_m2erp_8"
|
||||
data-state="closed"
|
||||
id="radix-«ri»"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_zr2a0_17"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
All activity
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Room Options"
|
||||
aria-labelledby="«rc»"
|
||||
aria-labelledby="«rr»"
|
||||
class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
|
||||
data-state="closed"
|
||||
id="radix-«ra»"
|
||||
id="radix-«rp»"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 32px;"
|
||||
tabindex="0"
|
||||
@@ -374,18 +406,50 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
|
||||
<div
|
||||
aria-label="Secondary filters"
|
||||
class="mx_Flex mx_RoomListSecondaryFilters"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 8px; --mx-flex-wrap: nowrap;"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 4px; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Room Options"
|
||||
aria-label="Filter"
|
||||
aria-labelledby="«r4»"
|
||||
class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
|
||||
class="_icon-button_m2erp_8"
|
||||
data-state="closed"
|
||||
id="radix-«r2»"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_zr2a0_17"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
All activity
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Room Options"
|
||||
aria-labelledby="«rb»"
|
||||
class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
|
||||
data-state="closed"
|
||||
id="radix-«r9»"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 32px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
|
||||
@@ -5,18 +5,50 @@ exports[`<RoomListSecondaryFilters /> should render 'room options' button 1`] =
|
||||
<div
|
||||
aria-label="Secondary filters"
|
||||
class="mx_Flex mx_RoomListSecondaryFilters"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 8px; --mx-flex-wrap: nowrap;"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 4px; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Room Options"
|
||||
aria-label="Filter"
|
||||
aria-labelledby="«r2»"
|
||||
class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
|
||||
class="_icon-button_m2erp_8"
|
||||
data-state="closed"
|
||||
id="radix-«r0»"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_zr2a0_17"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
All activity
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="menu"
|
||||
aria-label="Room Options"
|
||||
aria-labelledby="«r9»"
|
||||
class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
|
||||
data-state="closed"
|
||||
id="radix-«r7»"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 32px;"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user