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
2026-05-18 07:59:03 +02:00
parent 7fe8cdafe0
commit 297ad9bb8d
33 changed files with 63 additions and 89 deletions
@@ -29,7 +29,9 @@ describe("TileErrorView", () => {
    });

    it("renders the bubble layout variant", () => {
-        const { container } = render(<BubbleLayout />);
+        const { container } = render(<BubbleLayout />, {
+            presentation: { layout: "bubble" },
+        });
        expect(container).toMatchSnapshot();
    });

@@ -6,7 +6,7 @@ exports[`TileErrorView > renders the bubble layout variant 1`] = `
    <li
      class="TileErrorView-module_tileErrorView"
      data-event-density="default"
-      data-event-layout="group"
+      data-event-layout="bubble"
    >
      <div
        class="TileErrorView-module_line"
@@ -28,7 +28,9 @@ describe("UrlPreviewGroupView", () => {
        expect(container).toMatchSnapshot();
    });
    it("renders with compact density", () => {
-        const { container } = render(<WithCompactView />);
+        const { container } = render(<WithCompactView />, {
+            presentation: { density: "compact" },
+        });
        expect(container).toMatchSnapshot();
    });
 });
@@ -342,7 +342,7 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
 <div>
  <div
    class="UrlPreviewGroupView-module_wrapper"
-    data-event-density="default"
+    data-event-density="compact"
    data-event-layout="group"
  >
    <div
@@ -7,7 +7,6 @@

 .audioPlayer {
    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x);
-    border-radius: 8px;
 }

 .mediaInfo {
@@ -39,6 +39,9 @@
            width: 16px;
            height: 16px;
            padding: var(--cpd-space-2x);
+            color: var(--cpd-color-text-secondary);
+            background-color: var(--cpd-color-bg-subtle-primary);
+            border-radius: 20px;
        }

        & span {
@@ -57,6 +60,7 @@

 .content [data-type="download"] {
    align-items: center;
+    height: var(--cpd-space-9x);

    & iframe {
        margin: 0;
@@ -23,7 +23,7 @@
    position: relative;
    overflow: hidden;
    contain: paint;
-    border-radius: var(--MBody-border-radius);
+    border-radius: 8px;
 }

 .placeholder {
@@ -70,7 +70,7 @@
    max-width: min(100%, 350px);
    overflow: hidden;
    padding: var(--cpd-space-1x);
-    border-radius: var(--MBody-border-radius);
+    border-radius: 8px;
    background-color: rgb(0 0 0 / 0.6);
    color: #fff;
    text-overflow: ellipsis;
@@ -4,7 +4,7 @@

 .container {
    overflow: hidden;
-    border-radius: var(--MBody-border-radius);
+    border-radius: 8px;
 }

 .video {
@@ -6,12 +6,13 @@
 */

 .mediaBody {
+    color: var(--cpd-color-text-secondary);
    background-color: var(--cpd-color-bg-subtle-secondary);
-    border-radius: 12px;
+    border-radius: 8px;
    max-width: 243px; /* use max-width instead of width so it fits within right panels */

-    font: var(--cpd-font-body-md-regular);
-    color: var(--cpd-color-text-secondary);
-
    padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
+
+    font: var(--cpd-font-body-md-regular);
+    line-height: var(--cpd-font-size-heading-md);
 }
@@ -16,32 +16,49 @@ import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { TooltipProvider } from "@vector-im/compound-web";

-import { I18nApi, I18nContext } from "../..";
+import {
+    DEFAULT_EVENT_PRESENTATION,
+    EventPresentationProvider,
+    I18nApi,
+    I18nContext,
+    type EventPresentation,
+} from "../..";

-const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
+type SharedRenderOptions = RenderOptions & {
+    presentation?: Partial<EventPresentation>;
+};
+
+const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"], presentation?: Partial<EventPresentation>) => {
    return ({ children }: { children: React.ReactNode }) => {
+        const resolvedPresentation: EventPresentation | undefined = presentation
+            ? { ...DEFAULT_EVENT_PRESENTATION, ...presentation }
+            : undefined;
+        const content = resolvedPresentation ? (
+            <EventPresentationProvider value={resolvedPresentation}>
+                <TooltipProvider>{children}</TooltipProvider>
+            </EventPresentationProvider>
+        ) : (
+            <TooltipProvider>{children}</TooltipProvider>
+        );
+
        if (Wrapper) {
            return (
                <I18nContext.Provider value={new I18nApi()}>
-                    <Wrapper>
-                        <TooltipProvider>{children}</TooltipProvider>
-                    </Wrapper>
+                    <Wrapper>{content}</Wrapper>
                </I18nContext.Provider>
            );
        } else {
-            return (
-                <I18nContext.Provider value={new I18nApi()}>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </I18nContext.Provider>
-            );
+            return <I18nContext.Provider value={new I18nApi()}>{content}</I18nContext.Provider>;
        }
    };
 };

-const customRender = (ui: ReactElement, options: RenderOptions = {}): ReturnType<typeof render> => {
+const customRender = (ui: ReactElement, options: SharedRenderOptions = {}): ReturnType<typeof render> => {
+    const { presentation, wrapper, ...renderOptions } = options;
+
    return render(ui, {
-        ...options,
-        wrapper: wrapWithTooltipProvider(options?.wrapper) as RenderOptions["wrapper"],
+        ...renderOptions,
+        wrapper: wrapWithTooltipProvider(wrapper, presentation) as RenderOptions["wrapper"],
    }) as ReturnType<typeof render>;
 };