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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
61 changed files with 218 additions and 190 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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";

View File

@ -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;

View File

@ -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%;
}

View File

@ -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 {

View File

@ -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>

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";

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>>;

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>

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<{

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";

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";

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,

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;

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";

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";

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";

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,

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,

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";

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 = {

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 {

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";

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;

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 }) => (
<>

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}

View File

@ -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);
}

View File

@ -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,
},

View File

@ -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";

View File

@ -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);

View File

@ -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);
}

View File

@ -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";

View File

@ -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

View File

@ -131,11 +131,11 @@ a.mx_reply_anchor:hover {
}
.mx_RoomHeader {
--mx-flex-display: flex;
--mx-flex-direction: row;
--mx-flex-align: center;
--mx-flex-justify: start;
--mx-flex-gap: var(--cpd-space-3x);
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
gap: var(--cpd-space-3x);
}
.mx_ReplyChain_Export {

View File

@ -98,7 +98,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
</span>
</p>
<div
class="mx_Flex mx_ErrorView_buttons"
class="flex mx_ErrorView_flexContainer mx_ErrorView_buttons"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<button
@ -139,7 +139,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
Use Element Desktop instead
</h2>
<div
class="mx_Flex"
class="flex mx_ErrorView_flexContainer"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<a
@ -209,7 +209,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
Or use our mobile app
</h2>
<div
class="mx_Flex"
class="flex mx_ErrorView_flexContainer"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
>
<a

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

View File

@ -71,7 +71,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
Add extensions
</button>
<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

@ -50,7 +50,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
tabindex="-1"
>
<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

@ -71,7 +71,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
title=""
/>
<section
class="mx_Flex mx_RoomSummaryCard_badges"
class="flex mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@ -110,11 +110,11 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</span>
</section>
<section
class="mx_Flex mx_RoomSummaryCard_topic"
class="flex mx_RoomSummaryCard_topic"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
style="--mx-box-flex: 1;"
>
<p
@ -152,7 +152,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
</div>
<div
class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
class="mx_RoomSummaryCard_topic_edit box-flex"
style="--mx-box-flex: 1;"
>
<a
@ -831,7 +831,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
title=""
/>
<section
class="mx_Flex mx_RoomSummaryCard_badges"
class="flex mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@ -870,11 +870,11 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</span>
</section>
<section
class="mx_Flex mx_RoomSummaryCard_topic"
class="flex mx_RoomSummaryCard_topic"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_Box mx_Box--flex"
class="mx_RoomSummaryCard_topic_box box-flex"
style="--mx-box-flex: 1;"
>
<a
@ -1553,7 +1553,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
title=""
/>
<section
class="mx_Flex mx_RoomSummaryCard_badges"
class="flex mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@ -1592,11 +1592,11 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</span>
</section>
<section
class="mx_Flex mx_RoomSummaryCard_topic"
class="flex mx_RoomSummaryCard_topic"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
style="--mx-box-flex: 1;"
>
<p
@ -1634,7 +1634,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
</div>
<div
class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
class="mx_RoomSummaryCard_topic_edit box-flex"
style="--mx-box-flex: 1;"
>
<a

View File

@ -77,7 +77,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="mx_Flex mx_UserInfo_profile"
class="flex mx_UserInfo_profile"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<h1
@ -85,7 +85,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
dir="auto"
>
<div
class="mx_Flex mx_UserInfo_profile_name"
class="flex mx_UserInfo_profile_name"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
@user:example.com
@ -113,7 +113,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</p>
</div>
<div
class="mx_Flex mx_UserInfo_verification"
class="flex mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<p
@ -364,7 +364,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="mx_Flex mx_UserInfo_profile"
class="flex mx_UserInfo_profile"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<h1
@ -372,7 +372,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
dir="auto"
>
<div
class="mx_Flex mx_UserInfo_profile_name"
class="flex mx_UserInfo_profile_name"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
@user:example.com
@ -400,7 +400,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
</p>
</div>
<div
class="mx_Flex mx_UserInfo_verification"
class="flex mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<p

View File

@ -3,7 +3,7 @@
exports[`<UserInfoHeaderVerificationView /> renders verification unavailable message 1`] = `
<div>
<div
class="mx_Flex mx_UserInfo_verification"
class="flex mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<p
@ -20,7 +20,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verification unavailable mes
exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is verified 1`] = `
<div>
<div
class="mx_Flex mx_UserInfo_verification"
class="flex mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
@ -52,7 +52,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is
exports[`<UserInfoHeaderVerificationView /> renders verify button 1`] = `
<div>
<div
class="mx_Flex mx_UserInfo_verification"
class="flex mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div

View File

@ -31,7 +31,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
class="mx_UserInfo_container mx_UserInfo_header"
>
<div
class="mx_Flex mx_UserInfo_profile"
class="flex mx_UserInfo_profile"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<h1
@ -39,7 +39,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
dir="auto"
>
<div
class="mx_Flex mx_UserInfo_profile_name"
class="flex mx_UserInfo_profile_name"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
@user:example.com
@ -62,7 +62,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
</p>
</div>
<div
class="mx_Flex mx_UserInfo_verification"
class="flex mx_UserInfo_verification"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<svg

View File

@ -3,7 +3,7 @@
exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
<DocumentFragment>
<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
@ -25,7 +25,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 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

View File

@ -3,7 +3,7 @@
exports[`<EmptyRoomList /> should display empty state for filter favourite 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -24,7 +24,7 @@ exports[`<EmptyRoomList /> should display empty state for filter favourite 1`] =
exports[`<EmptyRoomList /> should display empty state for filter people 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -45,7 +45,7 @@ exports[`<EmptyRoomList /> should display empty state for filter people 1`] = `
exports[`<EmptyRoomList /> should display empty state for filter rooms 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -66,7 +66,7 @@ exports[`<EmptyRoomList /> should display empty state for filter rooms 1`] = `
exports[`<EmptyRoomList /> should display the empty state for the invite filter 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -91,7 +91,7 @@ exports[`<EmptyRoomList /> should display the empty state for the invite filter
exports[`<EmptyRoomList /> should display the empty state for the low priority filter 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -116,7 +116,7 @@ exports[`<EmptyRoomList /> should display the empty state for the low priority f
exports[`<EmptyRoomList /> should display the empty state for the mention filter 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -141,7 +141,7 @@ exports[`<EmptyRoomList /> should display the empty state for the mention filter
exports[`<EmptyRoomList /> should display the empty state for the unread filter 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -166,7 +166,7 @@ exports[`<EmptyRoomList /> should display the empty state for the unread filter
exports[`<EmptyRoomList /> should not render the new room button if the user doesn't have the rights to create a room 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -181,7 +181,7 @@ exports[`<EmptyRoomList /> should not render the new room button if the user doe
Get started by messaging someone
</span>
<div
class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
class="flex mx_EmptyRoomList_DefaultPlaceholder"
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;"
>
<button
@ -213,7 +213,7 @@ exports[`<EmptyRoomList /> should not render the new room button if the user doe
exports[`<EmptyRoomList /> should render the default placeholder when there is no filter 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
class="flex mx_EmptyRoomList_GenericPlaceholder"
data-testid="empty-room-list"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -228,7 +228,7 @@ exports[`<EmptyRoomList /> should render the default placeholder when there is n
Get started by messaging someone or by creating a room
</span>
<div
class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
class="flex mx_EmptyRoomList_DefaultPlaceholder"
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;"
>
<button

View File

@ -34,7 +34,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -57,7 +57,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -85,7 +85,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -108,7 +108,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -136,7 +136,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -159,7 +159,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -187,7 +187,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -210,7 +210,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -238,7 +238,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -261,7 +261,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -289,7 +289,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -312,7 +312,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -340,7 +340,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -363,7 +363,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -391,7 +391,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -414,7 +414,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -442,7 +442,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -465,7 +465,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -493,7 +493,7 @@ exports[`<RoomList /> should render a room list 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -516,7 +516,7 @@ exports[`<RoomList /> should render a room list 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div

View File

@ -4,12 +4,12 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_Flex mx_RoomListHeaderView_title"
class="flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@ -51,7 +51,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
</button>
</div>
<div
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
@ -133,12 +133,12 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_Flex mx_RoomListHeaderView_title"
class="flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@ -180,7 +180,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
</button>
</div>
<div
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
@ -256,12 +256,12 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_Flex mx_RoomListHeaderView_title"
class="flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@ -303,7 +303,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
</button>
</div>
<div
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
@ -385,12 +385,12 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_Flex mx_RoomListHeaderView_title"
class="flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@ -432,7 +432,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
</button>
</div>
<div
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
@ -514,12 +514,12 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
<DocumentFragment>
<header
aria-label="Room options"
class="mx_Flex mx_RoomListHeaderView"
class="flex mx_RoomListHeaderView"
data-testid="room-list-header"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_Flex mx_RoomListHeaderView_title"
class="flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@ -529,7 +529,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
</h1>
</div>
<div
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button

View File

@ -3,7 +3,7 @@
exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListItemMenuView"
class="flex mx_RoomListItemMenuView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<button
@ -80,7 +80,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
exports[`<RoomListItemMenuView /> should render the notification options menu 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListItemMenuView"
class="flex mx_RoomListItemMenuView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<button

View File

@ -10,7 +10,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -33,7 +33,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -62,7 +62,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -85,7 +85,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -100,7 +100,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
</div>
<div
aria-hidden="true"
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -126,7 +126,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -149,7 +149,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
@ -178,7 +178,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
type="button"
>
<div
class="mx_Flex mx_RoomListItemView_container"
class="flex mx_RoomListItemView_container"
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;"
>
<span
@ -201,7 +201,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
/>
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
class="flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div

View File

@ -3,13 +3,13 @@
exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListPrimaryFilters"
class="flex mx_RoomListPrimaryFilters"
data-testid="primary-filters"
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
aria-label="Room list filters"
class="mx_Flex"
class="flex"
id="«r0»"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"

View File

@ -3,7 +3,7 @@
exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListSearch"
class="flex mx_RoomListSearch"
role="search"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -27,7 +27,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
/>
</svg>
<span
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
@ -68,7 +68,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
exports[`<RoomListSearch /> should display the dial button when the PTSN protocol is not supported 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListSearch"
class="flex mx_RoomListSearch"
role="search"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -92,7 +92,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
/>
</svg>
<span
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
@ -154,7 +154,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
exports[`<RoomListSearch /> should hide the explore button when UIComponent.ExploreRooms is disabled 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListSearch"
class="flex mx_RoomListSearch"
role="search"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -178,7 +178,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
/>
</svg>
<span
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
@ -198,7 +198,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
exports[`<RoomListSearch /> should hide the explore button when the active space is not MetaSpace.Home 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListSearch"
class="flex mx_RoomListSearch"
role="search"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
@ -222,7 +222,7 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
/>
</svg>
<span
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span

View File

@ -3,7 +3,7 @@
exports[`<NotificationDecoration /> should render the activity decoration 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -19,7 +19,7 @@ exports[`<NotificationDecoration /> should render the activity decoration 1`] =
exports[`<NotificationDecoration /> should render the invitation decoration 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -41,7 +41,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -68,7 +68,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -93,7 +93,7 @@ exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
exports[`<NotificationDecoration /> should render the notification decoration 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -109,7 +109,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
exports[`<NotificationDecoration /> should render the notification decoration without count 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -123,7 +123,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
exports[`<NotificationDecoration /> should render the unset message decoration 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
@ -145,7 +145,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
exports[`<NotificationDecoration /> should render the video decoration 1`] = `
<DocumentFragment>
<div
class="mx_Flex"
class="flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>

View File

@ -50,11 +50,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
tabindex="-1"
>
<div
class="mx_Flex mx_ThirdPartyMemberInfo"
class="flex mx_ThirdPartyMemberInfo"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<section
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span
@ -125,11 +125,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
tabindex="-1"
>
<div
class="mx_Flex mx_ThirdPartyMemberInfo"
class="flex mx_ThirdPartyMemberInfo"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<section
class="mx_Flex"
class="flex"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<span

View File

@ -231,7 +231,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
Invited
</div>
<div
class="mx_Flex mx_InvitedIconView"
class="flex mx_InvitedIconView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<svg

View File

@ -84,7 +84,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
</h2>
</div>
<div
class="mx_Flex mx_EncryptionCard_emphasisedContent"
class="flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features:

View File

@ -84,7 +84,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
</h2>
</div>
<div
class="mx_Flex mx_EncryptionCard_emphasisedContent"
class="flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@ -267,7 +267,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
</h2>
</div>
<div
class="mx_Flex mx_EncryptionCard_emphasisedContent"
class="flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@ -450,7 +450,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</h2>
</div>
<div
class="mx_Flex mx_EncryptionCard_emphasisedContent"
class="flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@ -636,7 +636,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</h2>
</div>
<div
class="mx_Flex mx_EncryptionCard_emphasisedContent"
class="flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
@ -740,7 +740,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
Reset in progress...
</button>
<div
class="mx_Flex mx_EncryptionCard_emphasisedContent"
class="flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span

View File

@ -255,7 +255,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
</h2>
</div>
<div
class="mx_Flex mx_EncryptionCard_emphasisedContent"
class="flex mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul

View File

@ -17,7 +17,7 @@ exports[`HTMLExport should export 1`] = `
<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">
<span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size:32px">!</span>
<div class="mx_RoomHeader_infoWrapper">
<div

View File

@ -102,7 +102,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
</span>
</p>
<div
class="mx_Flex mx_ErrorView_buttons"
class="flex mx_ErrorView_flexContainer mx_ErrorView_buttons"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<button
@ -152,7 +152,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
Use Element Desktop instead
</h2>
<div
class="mx_Flex"
class="flex mx_ErrorView_flexContainer"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<a
@ -222,7 +222,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
Or use our mobile app
</h2>
<div
class="mx_Flex"
class="flex mx_ErrorView_flexContainer"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
>
<a

View File

@ -8813,6 +8813,11 @@ handle-thing@^2.0.0:
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
harmony-reflect@^1.4.6:
version "1.6.2"
resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
has-bigints@^1.0.2:
version "1.1.0"
resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
@ -9179,6 +9184,13 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
identity-obj-proxy@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
integrity sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==
dependencies:
harmony-reflect "^1.4.6"
ieee754@^1.1.12, ieee754@^1.1.13, ieee754@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"