ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-06 14:38:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move Flex & Box component into shared component folder (#30357)

Browse Source 
* refactor: move Flex component in shared components

* refactor: update imports

* refactor: remove Flex pcss file

* fix: Flex component css override

* test: update snapshots

* fix: html export

* chore: add css module support to jest

* chore: keep old copyright

* refactor: change `mx_Flex` in `ErrorView` to `mx_ErrorView_flexContainer`

* test: update snapshots

* refactor: move Box component in shared components

* refactor: update import and css override

* test: update snapshots
This commit is contained in:
Florian Duros
2025-07-22 18:25:45 +02:00
committed by GitHub
parent 16ab7ffbc7
commit 1e689ac098
61 changed files with 218 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/EmptyRoomList-test.tsx.snap
+11 -11
View File
@@ -3,7 +3,7 @@
exports[`<EmptyRoomList /> should display empty state for filter favourite 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex 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="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
class="flex 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
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
+20 -20
View File
@@ -34,7 +34,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -57,7 +57,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -85,7 +85,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -108,7 +108,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -136,7 +136,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -159,7 +159,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -187,7 +187,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -210,7 +210,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -238,7 +238,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -261,7 +261,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -289,7 +289,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -312,7 +312,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -340,7 +340,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -363,7 +363,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -391,7 +391,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -414,7 +414,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -442,7 +442,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -465,7 +465,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -493,7 +493,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -516,7 +516,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
+15 -15
View File
@@ -4,12 +4,12 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="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"
class="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
@@ -51,7 +51,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
</button>
</div>
<div
class="mx_Flex"
class="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
@@ -133,12 +133,12 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="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"
class="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
@@ -180,7 +180,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
</button>
</div>
<div
class="mx_Flex"
class="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
@@ -256,12 +256,12 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="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"
class="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
@@ -303,7 +303,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
</button>
</div>
<div
class="mx_Flex"
class="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
@@ -385,12 +385,12 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="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"
class="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
@@ -432,7 +432,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
</button>
</div>
<div
class="mx_Flex"
class="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
@@ -514,12 +514,12 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="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"
class="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
@@ -529,7 +529,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
</h1>
</div>
<div
class="mx_Flex"
class="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
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
+2 -2
View File
@@ -3,7 +3,7 @@
exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListItemMenuView"
class="flex 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
@@ -80,7 +80,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
exports[`<RoomListItemMenuView /> should render the notification options menu 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListItemMenuView"
class="flex 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
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
+9 -9
View File
@@ -10,7 +10,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -33,7 +33,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -62,7 +62,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -85,7 +85,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -100,7 +100,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
</div>
<div
aria-hidden="true"
class="mx_Flex"
class="flex"
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;"
>
@@ -126,7 +126,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -149,7 +149,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
@@ -178,7 +178,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@@ -201,7 +201,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex 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
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
+2 -2
View File
@@ -3,13 +3,13 @@
exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListPrimaryFilters"
class="flex mx_RoomListPrimaryFilters"
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;"
>
<ul
aria-label="Room list filters"
class="mx_Flex"
class="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;"
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap
+8 -8
View File
@@ -3,7 +3,7 @@
exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListSearch"
class="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;"
>
@@ -27,7 +27,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
/>
</svg>
<span
class="mx_Flex"
class="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
@@ -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="mx_Flex mx_RoomListSearch"
class="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;"
>
@@ -92,7 +92,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
/>
</svg>
<span
class="mx_Flex"
class="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
@@ -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="mx_Flex mx_RoomListSearch"
class="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;"
>
@@ -178,7 +178,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
/>
</svg>
<span
class="mx_Flex"
class="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
@@ -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="mx_Flex mx_RoomListSearch"
class="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;"
>
@@ -222,7 +222,7 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
/>
</svg>
<span
class="mx_Flex"
class="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