Move Flex & Box component into shared component folder #30357

florianduros · 2025-07-21T16:06:42Z

Flex & Box components will be used by some shared components (ongoing PRs). This PR:

moves the Flex/Box component
transform the pcss into a css module
fix some dirty class override of the flex/Box component

florianduros · 2025-07-21T16:26:41Z

res/css/views/right_panel/_UserInfo.pcss

            line-height: $font-25px;
-
-            /* E2E icon wrapper */
-            .mx_Flex > span {


Doesn't seem to be used anymore

florianduros · 2025-07-21T16:31:39Z

src/async-components/structures/ErrorView.tsx

    fdroidUrl?: string;
 }> = ({ appleAppStoreUrl, googlePlayUrl, fdroidUrl }) => (
-    <Flex gap="var(--cpd-space-6x)">
+    <Flex gap="var(--cpd-space-6x)" className="mx_Flex">


Override already declared here:

element-web/res/css/structures/ErrorView.pcss

Lines 53 to 58 in 0b6d270

.mx_Flex {

margin: 0 auto;

max-width: max-content;

flex-wrap: wrap;

justify-content: space-evenly;

}

Adding the class manually since the Flex component use a css module.

in which case this class should be changed to something scoped to mx_ErrorView

t3chguy

I think Box should be taken with it, given it is the same style of component

t3chguy · 2025-07-22T08:43:07Z

src/shared-components/utils/Flex/Flex.module.css

 /*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
+ * Copyright 2025 New Vector Ltd.


I don't think this can just shed the old copyrights given the majority of the file hasn't changed

Done in 7b4f240

t3chguy · 2025-07-22T08:43:12Z

src/shared-components/utils/Flex/Flex.tsx

-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+ * Copyright 2025 New Vector Ltd.


t3chguy · 2025-07-22T08:44:29Z

src/utils/exportUtils/HtmlExport.tsx

                        <div class="mx_MatrixChat">
                        <main class="mx_RoomView">
-                            <div class="mx_Flex mx_RoomHeader light-panel">
+                            <div class="mx_RoomHeader light-panel">


Flex class name not showing up in snapshots seems like an issue, you can't differentiate between a div and a Flex container

I can keep a dummy mx_Flex classname in the Flex component

Why is the css module classname not visible? it is for e.g. Compound components

Hmmm, I suppose we are missing some jest/webpack configuration. In compound we are using vitest using the vite conf

https://jestjs.io/docs/webpack#mocking-css-modules seems the way to go

…ner`

florianduros · 2025-07-22T15:06:18Z

I moved the Box component too. Completed the jest conf to handle the css module.

richvdh

Haven't checked the detail of most of the changes, but the crypto stuff looks fine

) * 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

refactor: move Flex component in shared components

0b6d270

florianduros added the T-Task Tasks for the team like planning label Jul 21, 2025

github-actions bot requested a deployment to Netlify July 21, 2025 16:08 In progress

florianduros added 2 commits July 21, 2025 18:09

refactor: update imports

fc81dc3

refactor: remove Flex pcss file

f535e94

florianduros force-pushed the florianduros/share-flex branch from 3500418 to 0d17e61 Compare July 21, 2025 16:10

github-actions bot deployed to Netlify July 21, 2025 16:13 View deployment

github-actions bot deployed to EndToEndTests July 21, 2025 16:23 View deployment

fix: Flex component css override

a32a52f

florianduros force-pushed the florianduros/share-flex branch from 0d17e61 to 926bee6 Compare July 21, 2025 16:25

florianduros commented Jul 21, 2025

View reviewed changes

github-actions bot deployed to Netlify July 21, 2025 16:28 View deployment

florianduros commented Jul 21, 2025

View reviewed changes

test: update snapshots

5feef11

florianduros force-pushed the florianduros/share-flex branch from 926bee6 to 5feef11 Compare July 21, 2025 16:34

github-actions bot deployed to Netlify July 21, 2025 16:37 View deployment

github-actions bot deployed to EndToEndTests July 21, 2025 16:49 View deployment

github-actions bot deployed to EndToEndTests July 21, 2025 17:01 View deployment

github-actions bot deployed to Netlify July 22, 2025 07:47 View deployment

github-actions bot deployed to EndToEndTests July 22, 2025 07:57 View deployment

fix: html export

b179cfe

florianduros force-pushed the florianduros/share-flex branch from 7883e22 to b179cfe Compare July 22, 2025 07:58

github-actions bot deployed to Netlify July 22, 2025 08:01 View deployment

github-actions bot deployed to EndToEndTests July 22, 2025 08:12 View deployment

florianduros marked this pull request as ready for review July 22, 2025 08:15

florianduros requested review from a team as code owners July 22, 2025 08:15

florianduros requested review from MidhunSureshR, dbkr and uhoreg July 22, 2025 08:15

t3chguy reviewed Jul 22, 2025

View reviewed changes

chore: add css module support to jest

d1ac31d

florianduros requested a review from a team as a code owner July 22, 2025 13:51

florianduros added 3 commits July 22, 2025 15:53

chore: keep old copyright

7b4f240

refactor: change mx_Flex in ErrorView to `mx_ErrorView_flexContai…

bc5a783

…ner`

test: update snapshots

a38ec2b

florianduros force-pushed the florianduros/share-flex branch from 65e15b4 to a38ec2b Compare July 22, 2025 13:53

github-actions bot deployed to Netlify July 22, 2025 14:21 View deployment

github-actions bot deployed to EndToEndTests July 22, 2025 14:35 View deployment

florianduros changed the title ~~Move Flex component into shared component folder~~ Move Flex & Box component into shared component folder Jul 22, 2025

florianduros force-pushed the florianduros/share-flex branch from b0d5b7a to d041219 Compare July 22, 2025 14:46

florianduros added 3 commits July 22, 2025 16:47

refactor: move Box component in shared components

773a436

refactor: update import and css override

e405961

test: update snapshots

a447d51

florianduros force-pushed the florianduros/share-flex branch from d041219 to a447d51 Compare July 22, 2025 14:48

github-actions bot deployed to Netlify July 22, 2025 14:51 View deployment

github-actions bot deployed to EndToEndTests July 22, 2025 15:03 View deployment

florianduros requested a review from t3chguy July 22, 2025 15:05

t3chguy approved these changes Jul 22, 2025

View reviewed changes

florianduros enabled auto-merge July 22, 2025 16:02

richvdh approved these changes Jul 22, 2025

View reviewed changes

florianduros added this pull request to the merge queue Jul 22, 2025

Merged via the queue into develop with commit 1e689ac Jul 22, 2025
37 checks passed

florianduros deleted the florianduros/share-flex branch July 22, 2025 17:18

	.mx_Flex {
	margin: 0 auto;
	max-width: max-content;
	flex-wrap: wrap;
	justify-content: space-evenly;
	}

Uh oh!

Move Flex & Box component into shared component folder #30357

Move Flex & Box component into shared component folder #30357

Uh oh!

Conversation

florianduros commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t3chguy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

florianduros Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

florianduros commented Jul 22, 2025

Uh oh!

richvdh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

florianduros commented Jul 21, 2025 •

edited

Loading

florianduros Jul 22, 2025 •

edited

Loading