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

* 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
@@ -71,7 +71,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
Add extensions
</button>
<div
class="mx_Flex mx_EmptyState"
class="flex 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
@@ -50,7 +50,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
tabindex="-1"
>
<div
class="mx_Flex mx_EmptyState"
class="flex 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
@@ -71,7 +71,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
title=""
/>
<section
class="mx_Flex mx_RoomSummaryCard_badges"
class="flex 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="mx_Flex mx_RoomSummaryCard_topic"
class="flex 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_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
style="--mx-box-flex: 1;"
>
<p
@@ -152,7 +152,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
</div>
<div
class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
class="mx_RoomSummaryCard_topic_edit box-flex"
style="--mx-box-flex: 1;"
>
<a
@@ -831,7 +831,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
title=""
/>
<section
class="mx_Flex mx_RoomSummaryCard_badges"
class="flex 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
@@ -870,11 +870,11 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</span>
</section>
<section
class="mx_Flex mx_RoomSummaryCard_topic"
class="flex 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_Box mx_Box--flex"
class="mx_RoomSummaryCard_topic_box box-flex"
style="--mx-box-flex: 1;"
>
<a
@@ -1553,7 +1553,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
title=""
/>
<section
class="mx_Flex mx_RoomSummaryCard_badges"
class="flex 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
@@ -1592,11 +1592,11 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</span>
</section>
<section
class="mx_Flex mx_RoomSummaryCard_topic"
class="flex 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_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
style="--mx-box-flex: 1;"
>
<p
@@ -1634,7 +1634,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
</div>
<div
class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
class="mx_RoomSummaryCard_topic_edit box-flex"
style="--mx-box-flex: 1;"
>
<a
@@ -77,7 +77,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="mx_Flex mx_UserInfo_profile"
class="flex 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="mx_Flex mx_UserInfo_profile_name"
class="flex 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="mx_Flex mx_UserInfo_verification"
class="flex 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="mx_Flex mx_UserInfo_profile"
class="flex 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="mx_Flex mx_UserInfo_profile_name"
class="flex 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="mx_Flex mx_UserInfo_verification"
class="flex 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
@@ -3,7 +3,7 @@
exports[`<UserInfoHeaderVerificationView /> renders verification unavailable message 1`] = `
<div>
<div
class="mx_Flex mx_UserInfo_verification"
class="flex 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="mx_Flex mx_UserInfo_verification"
class="flex 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="mx_Flex mx_UserInfo_verification"
class="flex 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
@@ -31,7 +31,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="mx_Flex mx_UserInfo_profile"
class="flex 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="mx_Flex mx_UserInfo_profile_name"
class="flex 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="mx_Flex mx_UserInfo_verification"
class="flex 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