From 297ad9bb8dd0837b008931b06f2b7754e162d9d8 Mon Sep 17 00:00:00 2001 From: rbondesson Date: Mon, 18 May 2026 07:59:03 +0200 Subject: [PATCH] Make shared-components tiles render identically outside Element Web - # 2 (#33485) * Adding correct layout/density attributes to unit tests * Move app/web styling to FileBodyView * Unify styling for MediaBody wrapped components * Fix prettier issues * Update app/web snapshots * Wrap file download and audio loading states in MediaBody * Revert the MediaBody for download buttons. * Revert changes for MediaBody wrappers * Updated snaphots for MediaBody components --- apps/web/res/css/_components.pcss | 2 - .../audio_messages/_PlaybackContainer.pcss | 2 +- .../res/css/views/messages/_MFileBody.pcss | 27 ----------- .../res/css/views/messages/_MediaBody.pcss | 24 ---------- .../audio_messages/RecordingPlayback.tsx | 7 +-- .../views/rooms/VoiceRecordComposerTile.tsx | 5 +- .../__snapshots__/MBodyFactory-test.tsx.snap | 10 ++-- .../default-auto.png | Bin 22536 -> 22538 bytes .../has-error-auto.png | Bin 25180 -> 25175 bytes .../no-media-name-auto.png | Bin 22294 -> 22297 bytes .../no-size-auto.png | Bin 21579 -> 21577 bytes .../audio-info-auto.png | Bin 20399 -> 20792 bytes .../FileBodyView.stories.tsx/default-auto.png | Bin 22077 -> 22464 bytes .../FileBodyView.stories.tsx/export-auto.png | Bin 18884 -> 19281 bytes .../FileBodyView.stories.tsx/invalid-auto.png | Bin 20232 -> 20640 bytes .../long-filename-info-auto.png | Bin 24184 -> 24588 bytes .../video-info-auto.png | Bin 18457 -> 18794 bytes .../animated-preview-auto.png | Bin 28522 -> 28810 bytes .../default-auto.png | Bin 27676 -> 27968 bytes .../loading-with-blurhash-auto.png | Bin 65158 -> 65546 bytes .../loading-with-spinner-auto.png | Bin 19113 -> 19437 bytes .../with-tooltip-auto.png | Bin 31402 -> 32005 bytes .../VideoBodyView.stories.tsx/ready-auto.png | Bin 30019 -> 30157 bytes .../TileErrorView/TileErrorView.test.tsx | 4 +- .../__snapshots__/TileErrorView.test.tsx.snap | 2 +- .../UrlPreviewGroupView.test.tsx | 4 +- .../UrlPreviewGroupView.test.tsx.snap | 2 +- .../AudioPlayerView.module.css | 1 - .../MFileBodyView/FileBodyView.module.css | 4 ++ .../MImageBodyView/ImageBodyView.module.css | 4 +- .../MVideoBodyView/VideoBodyView.module.css | 2 +- .../body/MediaBody/MediaBody.module.css | 9 ++-- .../src/test/utils/index.tsx | 43 ++++++++++++------ 33 files changed, 63 insertions(+), 89 deletions(-) delete mode 100644 apps/web/res/css/views/messages/_MFileBody.pcss delete mode 100644 apps/web/res/css/views/messages/_MediaBody.pcss diff --git a/apps/web/res/css/_components.pcss b/apps/web/res/css/_components.pcss index 9615dc52f9..723f8b0256 100644 --- a/apps/web/res/css/_components.pcss +++ b/apps/web/res/css/_components.pcss @@ -223,12 +223,10 @@ @import "./views/messages/_CreateEvent.pcss"; @import "./views/messages/_DisambiguatedProfile.pcss"; @import "./views/messages/_LegacyCallEvent.pcss"; -@import "./views/messages/_MFileBody.pcss"; @import "./views/messages/_MImageReplyBody.pcss"; @import "./views/messages/_MLocationBody.pcss"; @import "./views/messages/_MPollBody.pcss"; @import "./views/messages/_MStickerBody.pcss"; -@import "./views/messages/_MediaBody.pcss"; @import "./views/messages/_MessageActionBar.pcss"; @import "./views/messages/_ReactionsRow.pcss"; @import "./views/messages/_TextualEvent.pcss"; diff --git a/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss b/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss index 087726a1f7..6aba6a150e 100644 --- a/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss +++ b/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss @@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details. /* are shared amongst multiple voice message components. */ /* Container for live recording and playback controls */ -.mx_MediaBody.mx_VoiceMessagePrimaryContainer { +.mx_VoiceMessagePrimaryContainer { /* Match mx_MediaBody spacing, offsetting the waveform's 1px internal right padding. */ padding: 6px 11px 6px 12px; diff --git a/apps/web/res/css/views/messages/_MFileBody.pcss b/apps/web/res/css/views/messages/_MFileBody.pcss deleted file mode 100644 index 783a58c63d..0000000000 --- a/apps/web/res/css/views/messages/_MFileBody.pcss +++ /dev/null @@ -1,27 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2015-2021 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. -*/ - -.mx_MFileBody [data-type="download"] { - height: var(--cpd-space-9x); - - & object { - margin-left: -16px; - padding-right: 4px; - margin-top: -4px; - vertical-align: middle; - pointer-events: none; - } -} - -.mx_MFileBody [data-type="info"] { - svg { - color: $secondary-content !important; - background-color: $system !important; - border-radius: 20px !important; - } -} diff --git a/apps/web/res/css/views/messages/_MediaBody.pcss b/apps/web/res/css/views/messages/_MediaBody.pcss deleted file mode 100644 index aadf220885..0000000000 --- a/apps/web/res/css/views/messages/_MediaBody.pcss +++ /dev/null @@ -1,24 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2021 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. -*/ - -/* A "media body" is any file upload looking thing, apart from images and videos (they */ -/* have unique styles). */ - -.mx_MediaBody { - background-color: $panels; - border-radius: 12px; - max-width: 243px; /* use max-width instead of width so it fits within right panels */ - - color: $secondary-content; - font: var(--cpd-font-body-md-regular); - line-height: $font-24px; -} - -.mx_MAudioBody > .mx_MediaBody { - border-radius: var(--MBody-border-radius); -} diff --git a/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx b/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx index 4f5c392d41..769e762263 100644 --- a/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx +++ b/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { type ReactNode } from "react"; +import { MediaBody } from "@element-hq/web-shared-components"; import PlayPauseButton from "./PlayPauseButton"; import PlaybackClock from "./PlaybackClock"; @@ -74,8 +75,8 @@ export default class RecordingPlayback extends AudioPlayerBase { } return ( -
@@ -85,7 +86,7 @@ export default class RecordingPlayback extends AudioPlayerBase { ref={this.playPauseRef} /> {body} -
+ ); } } diff --git a/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx b/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx index 17b5664e81..9b6bd6ec49 100644 --- a/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { type ReactNode } from "react"; +import { MediaBody } from "@element-hq/web-shared-components"; import { type Room, type IEventRelation, type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { DeleteIcon, StopSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; @@ -239,10 +240,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent + - + ); } diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap index 40b956719c..671c1ce8d5 100644 --- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap @@ -3,10 +3,10 @@ exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder when showFileInfo is true 1`] = `