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

View File

@@ -52,7 +52,7 @@ exports[`FilePanel renders empty state 1`] = `
class="mx_RoomView_empty"
>
<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

View File

@@ -6,7 +6,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
class="mx_RoomView mx_RoomView--local"
>
<header
class="mx_Flex mx_RoomHeader light-panel"
class="flex 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
@@ -28,7 +28,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div
@@ -225,7 +225,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="mx_RoomView mx_RoomView--local"
>
<header
class="mx_Flex mx_RoomHeader light-panel"
class="flex 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
@@ -247,7 +247,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div
@@ -530,7 +530,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="mx_RoomView mx_RoomView--local"
>
<header
class="mx_Flex mx_RoomHeader light-panel"
class="flex 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
@@ -552,7 +552,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div
@@ -912,7 +912,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="mx_RoomView mx_RoomView--local"
>
<header
class="mx_Flex mx_RoomHeader light-panel"
class="flex 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
@@ -934,7 +934,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div
@@ -1375,7 +1375,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
data-layout="group"
>
<header
class="mx_Flex mx_RoomHeader light-panel"
class="flex 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
@@ -1397,7 +1397,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div
@@ -1587,7 +1587,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
data-layout="group"
>
<header
class="mx_Flex mx_RoomHeader light-panel"
class="flex 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
@@ -1609,7 +1609,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div
@@ -1976,7 +1976,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
data-layout="group"
>
<header
class="mx_Flex mx_RoomHeader light-panel"
class="flex 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
@@ -1998,7 +1998,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div