nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Make shared component build work in isolation (#31066)

Browse Source 
* Make shared component build work in isolation

 * Add deps that were missing because they were getting picked up
   from element-web main but shared-components needs itself
 * Exclude test files from dts generation
 * Bump version

* Change all the shared-component import to be the built artifact

* Don't randomly inhale eslint configs in parent dirs please

* maybe we don't need this anymore?

* maybe fix build

* Maybe fix docker build

* More build faff

 * build:res on the parent as part of shared component prepare
 * link shared component repo inn docker build

* 💅

* 💅x2

* Try converting the translation keys to a .d.ts file manually

so it gets bundled rather than left as a relative import to the json
file

* add the script

* Add this back for 2nd time now I think

* Shouldn't need this anymore

* patch-package on prepare

because we're patching a dev dependency so it won't be there if we're
installed as a dependency

* Unused import

* Prettier compliance

* Only use counterpart from shared components

as per comment

* Import shared components CSS

* Prettier

* Call the one from shared components

rather than recurse infinitely

* Hopefully make tests work

* wake up, comment goes before import

* Fix lint errors

* Fix dupe TranslationKey export

* Update compound-web to fix type error

An update to @types.react adds the 'hint' value to the enum of the
'popover' attribute and this version of compound-web uses the maching
verson of @types/react so they don't conflict.

* Maybe, hopefully, get the types working?

Please?

* Add copyright header to i18nkeys

as eslint complains otherwise since it's now in src

* prettier

* stop running shared-component tests in EW

* update snapshots

because flex is now from an external stylesheet I guess

* More snapshots

* Manual class update

* Avoid bundling compound bits

Because a) it's silly and b) it means we end up bundling a copy of
floating-ui too which causes absolute madness with its useDelayGroup
contexts.

* ignore test util files for coverage

* Add !important

because the styles are being applied in a different order now

* Another !important because css order has changed

* Try adding it here to make the test files ignored

* More !important

* commit yarn lock change

* Add shared components coverage file

* Update snapshots

Because the line height was being overridden to 22.5px somehow by
something I can't find, and now isn't: surely the normal 1.5rem is
more sensible.

* Update snapshots, attempt 2

* Another !important

* More snapshot updates

* Add test for i18n wrappers

& add test script

* lint

* Prettier

* Hopefully run shared component tests

* don't need this bit for non-matrix

* install ew deps

* rigfht coverage location

* Rename job here too

* Try different coverage filename

* Fix copyrights & comment

* Typo

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
David Baker
2025-11-03 16:26:47 +00:00
committed by GitHub
parent 486d4d59bc
commit b0cdbf5eff
133 changed files with 1708 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
View File

@@ -71,7 +71,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
Add extensions
</button>
<div
class="flex mx_EmptyState"
class="_flex_4dswl_9 mx_EmptyState"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<svg

2
test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
View File

@@ -50,7 +50,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
tabindex="-1"
>
<div
class="flex mx_EmptyState"
class="_flex_4dswl_9 mx_EmptyState"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<svg

22
test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
View File

@@ -69,7 +69,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
title=""
/>
<section
class="flex mx_RoomSummaryCard_badges"
class="_flex_4dswl_9 mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@@ -110,11 +110,11 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</span>
</section>
<section
class="flex mx_RoomSummaryCard_topic"
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<p
@@ -152,7 +152,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
</div>
<div
class="mx_RoomSummaryCard_topic_edit box-flex"
class="mx_RoomSummaryCard_topic_edit _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<a
@@ -782,7 +782,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
title=""
/>
<section
class="flex mx_RoomSummaryCard_badges"
class="_flex_4dswl_9 mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@@ -823,11 +823,11 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</span>
</section>
<section
class="flex mx_RoomSummaryCard_topic"
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomSummaryCard_topic_box box-flex"
class="mx_RoomSummaryCard_topic_box _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<a
@@ -1457,7 +1457,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
title=""
/>
<section
class="flex mx_RoomSummaryCard_badges"
class="_flex_4dswl_9 mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@@ -1498,11 +1498,11 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</span>
</section>
<section
class="flex mx_RoomSummaryCard_topic"
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<p
@@ -1540,7 +1540,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
</div>
<div
class="mx_RoomSummaryCard_topic_edit box-flex"
class="mx_RoomSummaryCard_topic_edit _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<a

12
test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View File

@@ -77,7 +77,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="flex mx_UserInfo_profile"
class="_flex_4dswl_9 mx_UserInfo_profile"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<h1
@@ -85,7 +85,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
dir="auto"
>
<div
class="flex mx_UserInfo_profile_name"
class="_flex_4dswl_9 mx_UserInfo_profile_name"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
@user:example.com
@@ -113,7 +113,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</p>
</div>
<div
class="flex mx_UserInfo_verification"
class="_flex_4dswl_9 mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<p
@@ -364,7 +364,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="flex mx_UserInfo_profile"
class="_flex_4dswl_9 mx_UserInfo_profile"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<h1
@@ -372,7 +372,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
dir="auto"
>
<div
class="flex mx_UserInfo_profile_name"
class="_flex_4dswl_9 mx_UserInfo_profile_name"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
@user:example.com
@@ -400,7 +400,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
</p>
</div>
<div
class="flex mx_UserInfo_verification"
class="_flex_4dswl_9 mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<p

6
test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`<UserInfoHeaderVerificationView /> renders verification unavailable message 1`] = `
<div>
<div
class="flex mx_UserInfo_verification"
class="_flex_4dswl_9 mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<p
@@ -20,7 +20,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verification unavailable mes
exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is verified 1`] = `
<div>
<div
class="flex mx_UserInfo_verification"
class="_flex_4dswl_9 mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
@@ -52,7 +52,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is
exports[`<UserInfoHeaderVerificationView /> renders verify button 1`] = `
<div>
<div
class="flex mx_UserInfo_verification"
class="_flex_4dswl_9 mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div

6
test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
View File

@@ -31,7 +31,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="flex mx_UserInfo_profile"
class="_flex_4dswl_9 mx_UserInfo_profile"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<h1
@@ -39,7 +39,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
dir="auto"
>
<div
class="flex mx_UserInfo_profile_name"
class="_flex_4dswl_9 mx_UserInfo_profile_name"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
@user:example.com
@@ -62,7 +62,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
</p>
</div>
<div
class="flex mx_UserInfo_verification"
class="_flex_4dswl_9 mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<svg

4
test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
<DocumentFragment>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
@@ -25,7 +25,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div

2
test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
View File

@@ -119,7 +119,7 @@ describe("<RoomListItemView />", () => {
});
const listItem = screen.getByRole("option", { name: `Open room ${room.name}` });
expect(listItem).toHaveClass("flex mx_RoomListItemView mx_RoomListItemView_hover");
expect(listItem).toHaveClass("_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_hover");
rerender(
<RoomListItemView

22
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/EmptyRoomList-test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`<EmptyRoomList /> should display empty state for filter favourite 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -24,7 +24,7 @@ exports[`<EmptyRoomList /> should display empty state for filter favourite 1`] =
exports[`<EmptyRoomList /> should display empty state for filter people 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -45,7 +45,7 @@ exports[`<EmptyRoomList /> should display empty state for filter people 1`] = `
exports[`<EmptyRoomList /> should display empty state for filter rooms 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -66,7 +66,7 @@ exports[`<EmptyRoomList /> should display empty state for filter rooms 1`] = `
exports[`<EmptyRoomList /> should display the empty state for the invite filter 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -91,7 +91,7 @@ exports[`<EmptyRoomList /> should display the empty state for the invite filter
exports[`<EmptyRoomList /> should display the empty state for the low priority filter 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -116,7 +116,7 @@ exports[`<EmptyRoomList /> should display the empty state for the low priority f
exports[`<EmptyRoomList /> should display the empty state for the mention filter 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -141,7 +141,7 @@ exports[`<EmptyRoomList /> should display the empty state for the mention filter
exports[`<EmptyRoomList /> should display the empty state for the unread filter 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -166,7 +166,7 @@ exports[`<EmptyRoomList /> should display the empty state for the unread filter
exports[`<EmptyRoomList /> should not render the new room button if the user doesn't have the rights to create a room 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -181,7 +181,7 @@ exports[`<EmptyRoomList /> should not render the new room button if the user doe
Get started by messaging someone
</span>
<div
class="flex mx_EmptyRoomList_DefaultPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_DefaultPlaceholder"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<button
@@ -213,7 +213,7 @@ exports[`<EmptyRoomList /> should not render the new room button if the user doe
exports[`<EmptyRoomList /> should render the default placeholder when there is no filter 1`] = `
<DocumentFragment>
<div
class="flex mx_EmptyRoomList_GenericPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@@ -228,7 +228,7 @@ exports[`<EmptyRoomList /> should render the default placeholder when there is n
Get started by messaging someone or by creating a room
</span>
<div
class="flex mx_EmptyRoomList_DefaultPlaceholder"
class="_flex_4dswl_9 mx_EmptyRoomList_DefaultPlaceholder"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<button

40
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
View File

@@ -29,7 +29,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="1"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -56,7 +56,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -83,7 +83,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="2"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -110,7 +110,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -137,7 +137,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="3"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -164,7 +164,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -191,7 +191,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="4"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -218,7 +218,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -245,7 +245,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="5"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -272,7 +272,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -299,7 +299,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="6"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -326,7 +326,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -353,7 +353,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="7"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -380,7 +380,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -407,7 +407,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="8"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -434,7 +434,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -461,7 +461,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="9"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -488,7 +488,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -515,7 +515,7 @@ exports[`<RoomList /> should render a room list 1`] = `
aria-posinset="10"
aria-selected="false"
aria-setsize="10"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -542,7 +542,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div

30
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
View File

@@ -4,12 +4,12 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
<DocumentFragment>
<header
aria-label="Room options"
class="flex mx_RoomListHeaderView"
class="_flex_4dswl_9 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="flex mx_RoomListHeaderView_title"
class="_flex_4dswl_9 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
@@ -51,7 +51,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
</button>
</div>
<div
class="flex"
class="_flex_4dswl_9"
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;"
>
<div
@@ -143,12 +143,12 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
<DocumentFragment>
<header
aria-label="Room options"
class="flex mx_RoomListHeaderView"
class="_flex_4dswl_9 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="flex mx_RoomListHeaderView_title"
class="_flex_4dswl_9 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
@@ -190,7 +190,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
</button>
</div>
<div
class="flex"
class="_flex_4dswl_9"
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;"
>
<div
@@ -276,12 +276,12 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="flex mx_RoomListHeaderView"
class="_flex_4dswl_9 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="flex mx_RoomListHeaderView_title"
class="_flex_4dswl_9 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
@@ -323,7 +323,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
</button>
</div>
<div
class="flex"
class="_flex_4dswl_9"
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;"
>
<div
@@ -415,12 +415,12 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="flex mx_RoomListHeaderView"
class="_flex_4dswl_9 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="flex mx_RoomListHeaderView_title"
class="_flex_4dswl_9 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
@@ -462,7 +462,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
</button>
</div>
<div
class="flex"
class="_flex_4dswl_9"
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;"
>
<div
@@ -554,12 +554,12 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
<DocumentFragment>
<header
aria-label="Room options"
class="flex mx_RoomListHeaderView"
class="_flex_4dswl_9 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="flex mx_RoomListHeaderView_title"
class="_flex_4dswl_9 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
@@ -569,7 +569,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
</h1>
</div>
<div
class="flex"
class="_flex_4dswl_9"
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;"
>
<div

4
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
<DocumentFragment>
<div
class="flex mx_RoomListItemMenuView"
class="_flex_4dswl_9 mx_RoomListItemMenuView"
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;"
>
<button
@@ -82,7 +82,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
exports[`<RoomListItemMenuView /> should render the notification options menu 1`] = `
<DocumentFragment>
<div
class="flex mx_RoomListItemMenuView"
class="_flex_4dswl_9 mx_RoomListItemMenuView"
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;"
>
<button

18
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
View File

@@ -7,7 +7,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
aria-posinset="1"
aria-selected="true"
aria-setsize="1"
class="flex mx_RoomListItemView mx_RoomListItemView_selected"
class="_flex_4dswl_9 mx_RoomListItemView mx_RoomListItemView_selected"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
@@ -33,7 +33,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -58,7 +58,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
aria-posinset="1"
aria-selected="false"
aria-setsize="1"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
@@ -84,7 +84,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -99,7 +99,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
</div>
<div
aria-hidden="true"
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -121,7 +121,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
aria-posinset="1"
aria-selected="false"
aria-setsize="0"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
@@ -147,7 +147,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@@ -172,7 +172,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
aria-posinset="1"
aria-selected="false"
aria-setsize="1"
class="flex mx_RoomListItemView"
class="_flex_4dswl_9 mx_RoomListItemView"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
@@ -198,7 +198,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
/>
</span>
<div
class="flex mx_RoomListItemView_content"
class="_flex_4dswl_9 mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div

4
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
View File

@@ -3,13 +3,13 @@
exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
<DocumentFragment>
<div
class="flex mx_RoomListPrimaryFilters"
class="_flex_4dswl_9 mx_RoomListPrimaryFilters"
data-testid="primary-filters"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<div
aria-label="Room list filters"
class="flex mx_RoomListPrimaryFilters_list"
class="_flex_4dswl_9 mx_RoomListPrimaryFilters_list"
id="_r_0_"
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;"

16
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
<DocumentFragment>
<div
class="flex mx_RoomListSearch"
class="_flex_4dswl_9 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;"
>
@@ -27,7 +27,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
/>
</svg>
<span
class="flex"
class="_flex_4dswl_9"
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
@@ -68,7 +68,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
exports[`<RoomListSearch /> should display the dial button when the PTSN protocol is not supported 1`] = `
<DocumentFragment>
<div
class="flex mx_RoomListSearch"
class="_flex_4dswl_9 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;"
>
@@ -92,7 +92,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
/>
</svg>
<span
class="flex"
class="_flex_4dswl_9"
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
@@ -154,7 +154,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
exports[`<RoomListSearch /> should hide the explore button when UIComponent.ExploreRooms is disabled 1`] = `
<DocumentFragment>
<div
class="flex mx_RoomListSearch"
class="_flex_4dswl_9 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;"
>
@@ -178,7 +178,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
/>
</svg>
<span
class="flex"
class="_flex_4dswl_9"
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
@@ -198,7 +198,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
exports[`<RoomListSearch /> should hide the explore button when the active space is not MetaSpace.Home 1`] = `
<DocumentFragment>
<div
class="flex mx_RoomListSearch"
class="_flex_4dswl_9 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;"
>
@@ -222,7 +222,7 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
/>
</svg>
<span
class="flex"
class="_flex_4dswl_9"
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

16
test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`<NotificationDecoration /> should render the activity decoration 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -19,7 +19,7 @@ exports[`<NotificationDecoration /> should render the activity decoration 1`] =
exports[`<NotificationDecoration /> should render the invitation decoration 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -41,7 +41,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -68,7 +68,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -93,7 +93,7 @@ exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
exports[`<NotificationDecoration /> should render the notification decoration 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -109,7 +109,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
exports[`<NotificationDecoration /> should render the notification decoration without count 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -123,7 +123,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
exports[`<NotificationDecoration /> should render the unset message decoration 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@@ -145,7 +145,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
exports[`<NotificationDecoration /> should render the video decoration 1`] = `
<DocumentFragment>
<div
class="flex"
class="_flex_4dswl_9"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>

8
test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
View File

@@ -50,11 +50,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
tabindex="-1"
>
<div
class="flex mx_ThirdPartyMemberInfo"
class="_flex_4dswl_9 mx_ThirdPartyMemberInfo"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<section
class="flex"
class="_flex_4dswl_9"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@@ -125,11 +125,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
tabindex="-1"
>
<div
class="flex mx_ThirdPartyMemberInfo"
class="_flex_4dswl_9 mx_ThirdPartyMemberInfo"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<section
class="flex"
class="_flex_4dswl_9"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span

2
test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
View File

@@ -251,7 +251,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
Invited
</div>
<div
class="flex mx_InvitedIconView"
class="_flex_4dswl_9 mx_InvitedIconView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<svg

2
test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
View File

@@ -84,7 +84,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features:

10
test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
View File

@@ -84,7 +84,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@@ -267,7 +267,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@@ -450,7 +450,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@@ -636,7 +636,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@@ -740,7 +740,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
Reset in progress...
</button>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span

2
test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
View File

@@ -255,7 +255,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul