sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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

Browse Source 
* 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 16:25:45 +00:00
committed by GitHub
parent 16ab7ffbc7
commit 1e689ac098
61 changed files with 218 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/utils/Box.tsx
-76
View File
@@ -1,76 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
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.
*/
import classNames from "classnames";
import React, { type JSX, useMemo } from "react";
type FlexProps = {
/**
* The type of the HTML element
* @default div
*/
as?: string;
/**
* The CSS class name.
*/
className?: string;
/**
* the on click event callback
*/
onClick?: (e: React.MouseEvent) => void;
/**
* The flex space to use
* @default null
*/
flex?: string | null;
/**
* The flex shrink factor
* @default null
*/
shrink?: string | null;
/**
* The flex grow factor
* @default null
*/
grow?: string | null;
};
/**
* A flex child helper
*/
export function Box({
as = "div",
flex = null,
shrink = null,
grow = null,
className,
children,
...props
}: React.PropsWithChildren<FlexProps>): JSX.Element {
const style = useMemo(() => {
const style: Record<string, any> = {};
if (flex) style["--mx-box-flex"] = flex;
if (shrink) style["--mx-box-shrink"] = shrink;
if (grow) style["--mx-box-grow"] = grow;
return style;
}, [flex, grow, shrink]);
return React.createElement(
as,
{
...props,
className: classNames("mx_Box", className, {
"mx_Box--flex": !!flex,
"mx_Box--shrink": !!shrink,
"mx_Box--grow": !!grow,
}),
style,
},
children,
);
}
src/components/utils/Flex.tsx
-86
View File
@@ -1,86 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
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.
*/
import classNames from "classnames";
import React, { type JSX, type ComponentProps, type JSXElementConstructor, useMemo } from "react";
type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = {
/**
* The type of the HTML element
* @default div
*/
as?: T;
/**
* The CSS class name.
*/
className?: string;
/**
* The type of flex container
* @default flex
*/
display?: "flex" | "inline-flex";
/**
* The flow direction of the flex children
* @default row
*/
direction?: "row" | "column" | "row-reverse" | "column-reverse";
/**
* The alignment of the flex children
* @default start
*/
align?: "start" | "center" | "end" | "baseline" | "stretch" | "normal";
/**
* The justification of the flex children
* @default start
*/
justify?: "start" | "center" | "end" | "space-between";
/**
* The wrapping of the flex children
* @default nowrap
*/
wrap?: "wrap" | "nowrap" | "wrap-reverse";
/**
* The spacing between the flex children, expressed with the CSS unit
* @default 0
*/
gap?: string;
/**
* the on click event callback
*/
onClick?: (e: React.MouseEvent) => void;
} & ComponentProps<T>;
/**
* A flexbox container helper
*/
export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">({
as = "div",
display = "flex",
direction = "row",
align = "start",
justify = "start",
gap = "0",
wrap = "nowrap",
className,
children,
...props
}: React.PropsWithChildren<FlexProps<T>>): JSX.Element {
const style = useMemo(
() => ({
"--mx-flex-display": display,
"--mx-flex-direction": direction,
"--mx-flex-align": align,
"--mx-flex-justify": justify,
"--mx-flex-gap": gap,
"--mx-flex-wrap": wrap,
}),
[align, direction, display, gap, justify, wrap],
);
return React.createElement(as, { ...props, className: classNames("mx_Flex", className), style }, children);
}
src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
+1 -1
View File
@@ -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";
src/components/views/right_panel/EmptyState.tsx
+1 -1
View File
@@ -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>>;
src/components/views/right_panel/RoomSummaryCardView.tsx
+4 -4
View File
@@ -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>
src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx
+1 -1
View File
@@ -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<{
src/components/views/right_panel/user_info/UserInfoHeaderView.tsx
+1 -1
View File
@@ -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";
src/components/views/rooms/MemberList/MemberListHeaderView.tsx
+1 -1
View File
@@ -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";
src/components/views/rooms/MemberList/MemberListView.tsx
+1 -1
View File
@@ -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,
src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx
+1 -1
View File
@@ -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;
src/components/views/rooms/NotificationDecoration.tsx
+1 -1
View File
@@ -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";
src/components/views/rooms/RoomHeader/RoomHeader.tsx
+2 -2
View File
@@ -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";
src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx
+1 -1
View File
@@ -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";
src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx
+1 -1
View File
@@ -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,
src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
+1 -1
View File
@@ -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,
src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
+1 -1
View File
@@ -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";
src/components/views/rooms/RoomListPanel/RoomListPanel.tsx
+1 -1
View File
@@ -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 = {
src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
+1 -1
View File
@@ -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 {
src/components/views/rooms/RoomListPanel/RoomListSearch.tsx
+1 -1
View File
@@ -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";
src/components/views/rooms/ThirdPartyMemberInfo.tsx
+1 -1
View File
@@ -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;
src/components/views/settings/UserProfileSettings.tsx
+1 -1
View File
@@ -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 }) => (
<>
src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx
+1 -1
View File
@@ -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}