From 1e689ac098f41e82e58eb94633d700dbf48f242b Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Tue, 22 Jul 2025 18:25:45 +0200 Subject: [PATCH] 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 --- jest.config.ts | 2 + package.json | 1 + res/css/_components.pcss | 2 - res/css/structures/ErrorView.pcss | 2 +- .../views/right_panel/_RoomSummaryCard.pcss | 2 +- res/css/views/right_panel/_UserInfo.pcss | 5 --- src/async-components/structures/ErrorView.tsx | 8 ++-- .../security/AccessSecretStorageDialog.tsx | 2 +- .../views/right_panel/EmptyState.tsx | 2 +- .../views/right_panel/RoomSummaryCardView.tsx | 8 ++-- .../UserInfoHeaderVerificationView.tsx | 2 +- .../user_info/UserInfoHeaderView.tsx | 2 +- .../rooms/MemberList/MemberListHeaderView.tsx | 2 +- .../views/rooms/MemberList/MemberListView.tsx | 2 +- .../tiles/common/InvitedIconView.tsx | 2 +- .../views/rooms/NotificationDecoration.tsx | 2 +- .../views/rooms/RoomHeader/RoomHeader.tsx | 4 +- .../rooms/RoomListPanel/EmptyRoomList.tsx | 2 +- .../RoomListPanel/RoomListHeaderView.tsx | 2 +- .../RoomListPanel/RoomListItemMenuView.tsx | 2 +- .../rooms/RoomListPanel/RoomListItemView.tsx | 2 +- .../rooms/RoomListPanel/RoomListPanel.tsx | 2 +- .../RoomListPanel/RoomListPrimaryFilters.tsx | 2 +- .../rooms/RoomListPanel/RoomListSearch.tsx | 2 +- .../views/rooms/ThirdPartyMemberInfo.tsx | 2 +- .../views/settings/UserProfileSettings.tsx | 2 +- .../EncryptionCardEmphasisedContent.tsx | 2 +- .../utils/Box/Box.module.css | 6 +-- .../utils/Box}/Box.tsx | 14 ++++--- src/shared-components/utils/Box/index.ts | 8 ++++ .../utils/Flex/Flex.module.css | 2 +- .../utils/Flex}/Flex.tsx | 4 +- src/shared-components/utils/Flex/index.ts | 8 ++++ src/utils/exportUtils/HtmlExport.tsx | 2 +- src/utils/exportUtils/exportCustomCSS.css | 10 ++--- .../__snapshots__/ErrorView-test.tsx.snap | 6 +-- .../__snapshots__/FilePanel-test.tsx.snap | 2 +- .../__snapshots__/RoomView-test.tsx.snap | 28 ++++++------- .../ExtensionsCard-test.tsx.snap | 2 +- .../PinnedMessagesCard-test.tsx.snap | 2 +- .../RoomSummaryCardView-test.tsx.snap | 22 +++++----- .../__snapshots__/UserInfo-test.tsx.snap | 12 +++--- ...erInfoHeaderVerificationView-test.tsx.snap | 6 +-- .../UserInfoHeaderView-test.tsx.snap | 6 +-- .../__snapshots__/RoomHeader-test.tsx.snap | 4 +- .../__snapshots__/EmptyRoomList-test.tsx.snap | 22 +++++----- .../__snapshots__/RoomList-test.tsx.snap | 40 +++++++++---------- .../RoomListHeaderView-test.tsx.snap | 30 +++++++------- .../RoomListItemMenuView-test.tsx.snap | 4 +- .../RoomListItemView-test.tsx.snap | 18 ++++----- .../RoomListPrimaryFilters-test.tsx.snap | 4 +- .../RoomListSearch-test.tsx.snap | 16 ++++---- .../NotificationDecoration-test.tsx.snap | 16 ++++---- .../ThirdPartyMemberInfo-test.tsx.snap | 8 ++-- .../MemberTileView-test.tsx.snap | 2 +- .../DeleteKeyStoragePanel-test.tsx.snap | 2 +- .../ResetIdentityPanel-test.tsx.snap | 10 ++--- .../EncryptionUserSettingsTab-test.tsx.snap | 2 +- .../__snapshots__/HTMLExport-test.ts.snap | 2 +- .../vector/__snapshots__/init-test.ts.snap | 6 +-- yarn.lock | 12 ++++++ 61 files changed, 218 insertions(+), 190 deletions(-) rename res/css/components/views/utils/_Box.pcss => src/shared-components/utils/Box/Box.module.css (88%) rename src/{components/utils => shared-components/utils/Box}/Box.tsx (82%) create mode 100644 src/shared-components/utils/Box/index.ts rename res/css/components/views/utils/_Flex.pcss => src/shared-components/utils/Flex/Flex.module.css (97%) rename src/{components/utils => shared-components/utils/Flex}/Flex.tsx (96%) create mode 100644 src/shared-components/utils/Flex/index.ts diff --git a/jest.config.ts b/jest.config.ts index f40ac487a2..459bcf5f08 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -22,6 +22,8 @@ const config: Config = { setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"], setupFilesAfterEnv: ["/test/setupTests.ts"], moduleNameMapper: { + // Support CSS module + "\\.(module.css)$": "identity-obj-proxy", "\\.(css|scss|pcss)$": "/__mocks__/cssMock.js", "\\.(gif|png|ttf|woff2)$": "/__mocks__/imageMock.js", "\\.svg$": "/__mocks__/svg.js", diff --git a/package.json b/package.json index fef29cd1f5..fe893c099e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/res/css/_components.pcss b/res/css/_components.pcss index b68da87167..bd002fb80c 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -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"; diff --git a/res/css/structures/ErrorView.pcss b/res/css/structures/ErrorView.pcss index ddc510e188..805456bdbb 100644 --- a/res/css/structures/ErrorView.pcss +++ b/res/css/structures/ErrorView.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; diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index 3c1c07677c..96d1b0867e 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -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%; } diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index 3030b93c03..2b6480bd84 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -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 { diff --git a/src/async-components/structures/ErrorView.tsx b/src/async-components/structures/ErrorView.tsx index 0f9a61781e..5ce2a900a1 100644 --- a/src/async-components/structures/ErrorView.tsx +++ b/src/async-components/structures/ErrorView.tsx @@ -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 }) => ( - + {appleAppStoreUrl && ( Apple App Store @@ -84,7 +84,7 @@ const DesktopAppLinks: React.FC<{ linuxUrl?: string; }> = ({ macOsUrl, win64Url, win64ArmUrl, linuxUrl }) => { return ( - + {macOsUrl && ( diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx index 10f4788580..bfe99b80c8 100644 --- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx +++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx @@ -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"; diff --git a/src/components/views/right_panel/EmptyState.tsx b/src/components/views/right_panel/EmptyState.tsx index f6b2a940a6..547f365463 100644 --- a/src/components/views/right_panel/EmptyState.tsx +++ b/src/components/views/right_panel/EmptyState.tsx @@ -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>; diff --git a/src/components/views/right_panel/RoomSummaryCardView.tsx b/src/components/views/right_panel/RoomSummaryCardView.tsx index d994e697c6..b8eac3429f 100644 --- a/src/components/views/right_panel/RoomSummaryCardView.tsx +++ b/src/components/views/right_panel/RoomSummaryCardView.tsx @@ -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> = ({ room }): JSX.Element | null gap="var(--cpd-space-2x)" className="mx_RoomSummaryCard_topic" > - + {_t("right_panel|add_topic")} @@ -103,7 +103,7 @@ const RoomTopic: React.FC> = ({ room }): JSX.Element | null mx_RoomSummaryCard_topic_collapsed: !vm.expanded, })} > - + {content} diff --git a/src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx b/src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx index a8a66c8c7d..9d42f618dd 100644 --- a/src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx +++ b/src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx @@ -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<{ diff --git a/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx b/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx index 25dd0a5cde..71c38f3baa 100644 --- a/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx +++ b/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx @@ -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"; diff --git a/src/components/views/rooms/MemberList/MemberListHeaderView.tsx b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx index 0e5bcc2ebc..c1520acd44 100644 --- a/src/components/views/rooms/MemberList/MemberListHeaderView.tsx +++ b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx @@ -10,7 +10,7 @@ import React from "react"; import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add"; 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"; diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx index 8901a77b95..1c85b3188e 100644 --- a/src/components/views/rooms/MemberList/MemberListView.tsx +++ b/src/components/views/rooms/MemberList/MemberListView.tsx @@ -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, diff --git a/src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx b/src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx index 8a7f0e06a4..f8b6788e2b 100644 --- a/src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx +++ b/src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx @@ -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; diff --git a/src/components/views/rooms/NotificationDecoration.tsx b/src/components/views/rooms/NotificationDecoration.tsx index a93f1428fd..a6c6c5c93a 100644 --- a/src/components/views/rooms/NotificationDecoration.tsx +++ b/src/components/views/rooms/NotificationDecoration.tsx @@ -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"; diff --git a/src/components/views/rooms/RoomHeader/RoomHeader.tsx b/src/components/views/rooms/RoomHeader/RoomHeader.tsx index 663c8e9ff0..e060077805 100644 --- a/src/components/views/rooms/RoomHeader/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader/RoomHeader.tsx @@ -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"; diff --git a/src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx b/src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx index 0e3412f588..031e63ac22 100644 --- a/src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx +++ b/src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx @@ -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"; diff --git a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx index 752f065fd4..d66e3d28c9 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx @@ -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, diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx index a901003342..66107074b7 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx @@ -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, diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx index a0259d0a6a..a124c33851 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx @@ -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"; diff --git a/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx b/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx index f5c0620a66..8673463ef8 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx @@ -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 = { diff --git a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx index 676501a3ea..d094d9682f 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx @@ -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 { diff --git a/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx b/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx index ca3644b650..39ac3209c0 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx @@ -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"; diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx index da626992a1..536669dca8 100644 --- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx +++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx @@ -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; diff --git a/src/components/views/settings/UserProfileSettings.tsx b/src/components/views/settings/UserProfileSettings.tsx index 11b6a5bb69..4590f948ef 100644 --- a/src/components/views/settings/UserProfileSettings.tsx +++ b/src/components/views/settings/UserProfileSettings.tsx @@ -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 }) => ( <> diff --git a/src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx b/src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx index e630ebaa9f..3e343b638c 100644 --- a/src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx +++ b/src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx @@ -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} diff --git a/res/css/components/views/utils/_Box.pcss b/src/shared-components/utils/Box/Box.module.css similarity index 88% rename from res/css/components/views/utils/_Box.pcss rename to src/shared-components/utils/Box/Box.module.css index 5721e32633..7daf7889b7 100644 --- a/res/css/components/views/utils/_Box.pcss +++ b/src/shared-components/utils/Box/Box.module.css @@ -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); } diff --git a/src/components/utils/Box.tsx b/src/shared-components/utils/Box/Box.tsx similarity index 82% rename from src/components/utils/Box.tsx rename to src/shared-components/utils/Box/Box.tsx index 2c5dfa56d2..8f31984664 100644 --- a/src/components/utils/Box.tsx +++ b/src/shared-components/utils/Box/Box.tsx @@ -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): JSX.Element { +}: React.PropsWithChildren): JSX.Element { const style = useMemo(() => { const style: Record = {}; 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, }, diff --git a/src/shared-components/utils/Box/index.ts b/src/shared-components/utils/Box/index.ts new file mode 100644 index 0000000000..ad4f27e89d --- /dev/null +++ b/src/shared-components/utils/Box/index.ts @@ -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"; diff --git a/res/css/components/views/utils/_Flex.pcss b/src/shared-components/utils/Flex/Flex.module.css similarity index 97% rename from res/css/components/views/utils/_Flex.pcss rename to src/shared-components/utils/Flex/Flex.module.css index 9cfa6424f0..dba85c1faa 100644 --- a/res/css/components/views/utils/_Flex.pcss +++ b/src/shared-components/utils/Flex/Flex.module.css @@ -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); diff --git a/src/components/utils/Flex.tsx b/src/shared-components/utils/Flex/Flex.tsx similarity index 96% rename from src/components/utils/Flex.tsx rename to src/shared-components/utils/Flex/Flex.tsx index 0a8c3c2fa4..7404bf1874 100644 --- a/src/components/utils/Flex.tsx +++ b/src/shared-components/utils/Flex/Flex.tsx @@ -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> = { /** * The type of the HTML element @@ -82,5 +84,5 @@ export function Flex
-
+
${roomAvatar}
should match snapshot 1`] = `

should show the empty state when there are no pi tabindex="-1" >
has button to edit topic 1`] = ` title="" />
has button to edit topic 1`] = `

has button to edit topic 1`] = `

renders the room summary 1`] = ` title="" />
renders the room summary 1`] = `
renders the room topic in the summary 1`] = ` title="" />
renders the room topic in the summary 1`] = `

renders the room topic in the summary 1`] = `

with crypto enabled renders 1`] = ` class="mx_UserInfo_container mx_UserInfo_header" >

with crypto enabled renders 1`] = ` dir="auto" >
@user:example.com @@ -113,7 +113,7 @@ exports[` with crypto enabled renders 1`] = `

with crypto enabled should render a deactivate button for class="mx_UserInfo_container mx_UserInfo_header" >

with crypto enabled should render a deactivate button for dir="auto" >
@user:example.com @@ -400,7 +400,7 @@ exports[` with crypto enabled should render a deactivate button for

renders verification unavailable message 1`] = `

renders verification unavailable mes exports[` renders verified badge when user is verified 1`] = `

renders verified badge when user is exports[` renders verify button 1`] = `
renders custom user identifiers in the header 1` class="mx_UserInfo_container mx_UserInfo_header" >

renders custom user identifiers in the header 1` dir="auto" >
@user:example.com @@ -62,7 +62,7 @@ exports[` renders custom user identifiers in the header 1`

should display empty state for filter favourite 1`] = `
@@ -24,7 +24,7 @@ exports[` should display empty state for filter favourite 1`] = exports[` should display empty state for filter people 1`] = `
@@ -45,7 +45,7 @@ exports[` should display empty state for filter people 1`] = ` exports[` should display empty state for filter rooms 1`] = `
@@ -66,7 +66,7 @@ exports[` should display empty state for filter rooms 1`] = ` exports[` should display the empty state for the invite filter 1`] = `
@@ -91,7 +91,7 @@ exports[` should display the empty state for the invite filter exports[` should display the empty state for the low priority filter 1`] = `
@@ -116,7 +116,7 @@ exports[` should display the empty state for the low priority f exports[` should display the empty state for the mention filter 1`] = `
@@ -141,7 +141,7 @@ exports[` should display the empty state for the mention filter exports[` should display the empty state for the unread filter 1`] = `
@@ -166,7 +166,7 @@ exports[` should display the empty state for the unread filter exports[` should not render the new room button if the user doesn't have the rights to create a room 1`] = `
@@ -181,7 +181,7 @@ exports[` should not render the new room button if the user doe Get started by messaging someone

Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features: diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap index e745de0695..1a00f42660 100644 --- a/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap +++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap @@ -84,7 +84,7 @@ exports[` should display the 'forgot recovery key' variant

    should display the 'sync failed' variant correct

    should reset the encryption when the continue bu
    should reset the encryption when the continue bu