element-hq · florianduros · Jul 22, 2025 · Jul 21, 2025 · Jul 21, 2025 · Jul 21, 2025
@@ -22,6 +22,8 @@ const config: Config = {
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
     moduleNameMapper: {
+        // Support CSS module
+        "\\.(module.css)$": "identity-obj-proxy",
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",

@@ -264,6 +264,7 @@
         "file-loader": "^6.0.0",
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",

@@ -53,8 +53,6 @@
 @import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./components/views/typography/_Caption.pcss";
-@import "./components/views/utils/_Box.pcss";
-@import "./components/views/utils/_Flex.pcss";
 @import "./compound/_Icon.pcss";
 @import "./compound/_SuccessDialog.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";

@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
         color: var(--cpd-color-text-secondary);
     }
 
-    .mx_Flex {
+    .mx_ErrorView_flexContainer {
         margin: 0 auto;
         max-width: max-content;
         flex-wrap: wrap;

@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
         padding: 0 12px;
         color: var(--cpd-color-text-secondary);
 
-        .mx_Box {
+        .mx_RoomSummaryCard_topic_box {
             width: 100%;
         }
 

@@ -108,11 +108,6 @@ Please see LICENSE files in the repository root for full details.
             margin: 0;
             font-size: $font-20px;
             line-height: $font-25px;
-
-            /* E2E icon wrapper */
-            .mx_Flex > span {
-                display: inline-block;
-            }
         }
 
         .mx_UserInfo_profile_name {

@@ -10,7 +10,7 @@ import { Text, Heading, Button, Separator } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 
 import SdkConfig from "../../SdkConfig";
-import { Flex } from "../../components/utils/Flex";
+import { Flex } from "../../shared-components/utils/Flex";
 import { _t } from "../../languageHandler";
 import { Icon as AppleIcon } from "../../../res/themes/element/img/compound/apple.svg";
 import { Icon as MicrosoftIcon } from "../../../res/themes/element/img/compound/microsoft.svg";
@@ -58,7 +58,7 @@ const MobileAppLinks: React.FC<{
     googlePlayUrl?: string;
     fdroidUrl?: string;
 }> = ({ appleAppStoreUrl, googlePlayUrl, fdroidUrl }) => (
-    <Flex gap="var(--cpd-space-6x)">
+    <Flex gap="var(--cpd-space-6x)" className="mx_ErrorView_flexContainer">
         {appleAppStoreUrl && (
             <a href={appleAppStoreUrl} target="_blank" rel="noreferrer noopener">
                 <img height="64" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
@@ -84,7 +84,7 @@ const DesktopAppLinks: React.FC<{
     linuxUrl?: string;
 }> = ({ macOsUrl, win64Url, win64ArmUrl, linuxUrl }) => {
     return (
-        <Flex gap="var(--cpd-space-4x)">
+        <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_flexContainer">
             {macOsUrl && (
                 <Button as="a" href={macOsUrl} kind="secondary" Icon={AppleIcon}>
                     {_t("incompatible_browser|macos")}
@@ -193,7 +193,7 @@ export const UnsupportedBrowserView: React.FC<{
                 )}
             </Text>
 
-            <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_buttons">
+            <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_flexContainer mx_ErrorView_buttons">
                 <Button Icon={PopOutIcon} kind="secondary" size="sm">
                     {_t("incompatible_browser|learn_more")}
                 </Button>

@@ -14,7 +14,7 @@ import React, { type ChangeEvent, type FormEvent } from "react";
 import { type SecretStorage } from "matrix-js-sdk/src/matrix";
 
 import Field from "../../elements/Field";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 import { EncryptionCard } from "../../settings/encryption/EncryptionCard";
 import { EncryptionCardButtons } from "../../settings/encryption/EncryptionCardButtons";

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ComponentType } from "react";
 import { Text } from "@vector-im/compound-web";
 
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 
 interface Props {
     Icon: ComponentType<React.SVGAttributes<SVGElement>>;

@@ -46,9 +46,9 @@ import RoomAvatar from "../avatars/RoomAvatar.tsx";
 import { E2EStatus } from "../../../utils/ShieldUtils.ts";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks.ts";
 import RoomName from "../elements/RoomName.tsx";
-import { Flex } from "../../utils/Flex.tsx";
+import { Flex } from "../../../shared-components/utils/Flex";
 import { Linkify, topicToHtml } from "../../../HtmlUtils.tsx";
-import { Box } from "../../utils/Box.tsx";
+import { Box } from "../../../shared-components/utils/Box";
 import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
 import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
 import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
@@ -80,7 +80,7 @@ const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null
                 gap="var(--cpd-space-2x)"
                 className="mx_RoomSummaryCard_topic"
             >
-                <Box flex="1">
+                <Box flex="1" className="mx_RoomSummaryCard_topic_box">
                     <Link kind="primary" onClick={vm.onEditClick}>
                         <Text size="sm" weight="regular">
                             {_t("right_panel|add_topic")}
@@ -103,7 +103,7 @@ const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null
                 mx_RoomSummaryCard_topic_collapsed: !vm.expanded,
             })}
         >
-            <Box flex="1" className="mx_RoomSummaryCard_topic_container">
+            <Box flex="1" className="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box">
                 <Text size="sm" weight="regular" onClick={vm.onTopicLinkClick}>
                     {content}
                 </Text>

@@ -12,7 +12,7 @@ import { VerifiedIcon } from "@vector-im/compound-design-tokens/assets/web/icons
 
 import { useUserInfoVerificationViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel";
 import { type IDevice } from "../UserInfo";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 export const UserInfoHeaderVerificationView: React.FC<{

@@ -12,7 +12,7 @@ import { Heading, Tooltip, Text } from "@vector-im/compound-web";
 import { useUserfoHeaderViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderViewModel";
 import MemberAvatar from "../../avatars/MemberAvatar";
 import { Container, type Member, type IDevice } from "../UserInfo";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import PresenceLabel from "../../rooms/PresenceLabel";
 import CopyableText from "../../elements/CopyableText";
 import { UserInfoHeaderVerificationView } from "./UserInfoHeaderVerificationView";

@@ -10,7 +10,7 @@ import React from "react";
 import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
 import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { type MemberListViewState } from "../../../viewmodels/memberlist/MemberListViewModel";
 import { _t } from "../../../../languageHandler";
 

@@ -10,7 +10,7 @@ import React, { type JSX } from "react";
 import { List, type ListRowProps } from "react-virtualized/dist/commonjs/List";
 import { AutoSizer } from "react-virtualized";
 
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import {
     type MemberWithSeparator,
     SEPARATOR,

@@ -9,7 +9,7 @@ import React, { type JSX } from "react";
 import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
 import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
 
-import { Flex } from "../../../../../utils/Flex";
+import { Flex } from "../../../../../../shared-components/utils/Flex";
 
 interface Props {
     isThreePid: boolean;

@@ -13,7 +13,7 @@ import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/vi
 import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
 import { UnreadCounter, Unread } from "@vector-im/compound-web";
 
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 import { type RoomNotificationState } from "../../../stores/notifications/RoomNotificationState";
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";

@@ -25,8 +25,8 @@ import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStore
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx";
 import { useRoomMemberCount, useRoomMembers } from "../../../../hooks/useRoomMembers.ts";
 import { _t } from "../../../../languageHandler.tsx";
-import { Flex } from "../../../utils/Flex.tsx";
-import { Box } from "../../../utils/Box.tsx";
+import { Flex } from "../../../../shared-components/utils/Flex";
+import { Box } from "../../../../shared-components/utils/Box";
 import { getPlatformCallTypeProps, useRoomCall } from "../../../../hooks/room/useRoomCall.tsx";
 import { useRoomThreadNotifications } from "../../../../hooks/room/useRoomThreadNotifications.ts";
 import { useGlobalNotificationState } from "../../../../hooks/useGlobalNotificationState.ts";

@@ -11,7 +11,7 @@ import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user
 import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
 
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 import { FilterKey } from "../../../../stores/room-list-v3/skip-list/filters";
 import { type PrimaryFilter } from "../../../viewmodels/roomlist/useFilteredRooms";

@@ -16,7 +16,7 @@ import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/set
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
 
 import { _t } from "../../../../languageHandler";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import {
     type RoomListHeaderViewState,
     useRoomListHeaderViewModel,

@@ -21,7 +21,7 @@ import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"
 import { type Room } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../../languageHandler";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import {
     type RoomListItemMenuViewState,
     useRoomListItemMenuViewModel,

@@ -10,7 +10,7 @@ import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
 import { useRoomListItemViewModel } from "../../../viewmodels/roomlist/RoomListItemViewModel";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { RoomListItemMenuView } from "./RoomListItemMenuView";
 import { NotificationDecoration } from "../NotificationDecoration";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";

@@ -12,7 +12,7 @@ import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
 import { RoomListView } from "./RoomListView";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 type RoomListPanelProps = {

@@ -10,7 +10,7 @@ import { ChatFilter, IconButton } from "@vector-im/compound-web";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 interface RoomListPrimaryFiltersProps {

@@ -20,7 +20,7 @@ import { MetaSpace } from "../../../../stores/spaces";
 import { Action } from "../../../../dispatcher/actions";
 import PosthogTrackers from "../../../../PosthogTrackers";
 import defaultDispatcher from "../../../../dispatcher/dispatcher";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { useTypedEventEmitterState } from "../../../../hooks/useEventEmitter";
 import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../../LegacyCallHandler";
 

@@ -19,7 +19,7 @@ import { isValid3pidInvite } from "../../../RoomInvite";
 import { Action } from "../../../dispatcher/actions";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import BaseCard from "../right_panel/BaseCard";
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 
 interface IProps {
     event: MatrixEvent;

@@ -26,7 +26,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>

@@ -7,7 +7,7 @@
 
 import React, { type JSX, type PropsWithChildren } from "react";
 
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 
 /**
  * A component for emphasised text within an {@link EncryptionCard}

@@ -6,14 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_Box--flex {
+.box-flex {
     flex: var(--mx-box-flex, unset);
 }
 
-.mx_Box--shrink {
+.box-shrink {
     flex-shrink: var(--mx-box-shrink, unset);
 }
 
-.mx_Box--grow {
+.box-grow {
     flex-grow: var(--mx-box-grow, unset);
 }
@@ -9,7 +9,9 @@ Please see LICENSE files in the repository root for full details.
 import classNames from "classnames";
 import React, { type JSX, useMemo } from "react";
 
-type FlexProps = {
+import styles from "./Box.module.css";
+
+type BoxProps = {
     /**
      * The type of the HTML element
      * @default div
@@ -51,7 +53,7 @@ export function Box({
     className,
     children,
     ...props
-}: React.PropsWithChildren<FlexProps>): JSX.Element {
+}: React.PropsWithChildren<BoxProps>): JSX.Element {
     const style = useMemo(() => {
         const style: Record<string, any> = {};
         if (flex) style["--mx-box-flex"] = flex;
@@ -64,10 +66,10 @@ export function Box({
         as,
         {
             ...props,
-            className: classNames("mx_Box", className, {
-                "mx_Box--flex": !!flex,
-                "mx_Box--shrink": !!shrink,
-                "mx_Box--grow": !!grow,
+            className: classNames(className, {
+                [styles["box-flex"]]: !!flex,
+                [styles["box-shrink"]]: !!shrink,
+                [styles["box-grow"]]: !!grow,
             }),
             style,
         },

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * 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.
+ */
+
+export { Box } from "./Box";
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_Flex {
+.flex {
     display: var(--mx-flex-display, unset);
     flex-direction: var(--mx-flex-direction, unset);
     align-items: var(--mx-flex-align, unset);

@@ -9,6 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import classNames from "classnames";
 import React, { type JSX, type ComponentProps, type JSXElementConstructor, useMemo } from "react";
 
+import styles from "./Flex.module.css";
+
 type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = {
     /**
      * The type of the HTML element
@@ -82,5 +84,5 @@ export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstruct
         [align, direction, display, gap, justify, wrap],
     );
 
-    return React.createElement(as, { ...props, className: classNames("mx_Flex", className), style }, children);
+    return React.createElement(as, { ...props, className: classNames(styles.flex, className), style }, children);
 }
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * 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.
+ */
+
+export { Flex } from "./Flex";
@@ -161,7 +161,7 @@ export default class HTMLExporter extends Exporter {
                     <div class="mx_MatrixChat_wrapper" aria-hidden="false">
                         <div class="mx_MatrixChat">
                         <main class="mx_RoomView">
-                            <div class="mx_Flex mx_RoomHeader light-panel">
+                            <div class="mx_RoomHeader light-panel">
                                 ${roomAvatar}
                                 <div class="mx_RoomHeader_infoWrapper">
                                     <div