Preserve MImageBody legacy class names

Author: ZacksBot

packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css

@@ -19,7 +19,8 @@
     text-decoration: none;
 }
 
-.thumbnailContainer {
+.thumbnailContainer,
+:global(.mx_MImageBody_thumbnail_container) {
     position: relative;
     overflow: hidden;
     contain: paint;
@@ -57,7 +58,8 @@
     max-height: 100%;
 }
 
-.image {
+.image,
+:global(.mx_MImageBody_thumbnail) {
     display: block;
     width: 100%;
     height: 100%;

packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx

@@ -112,6 +112,37 @@ describe("ImageBodyView", () => {
         expect(onLinkClick).toHaveBeenCalledTimes(1);
     });
 
+    it("preserves supplied legacy class names without appending module classes", () => {
+        const vm = new TestImageBodyViewModel({
+            state: ImageBodyViewState.READY,
+            alt: "Legacy class image",
+            src: "https://example.org/full.png",
+            thumbnailSrc: "https://example.org/thumb.png",
+            maxWidth: 320,
+            maxHeight: 240,
+            aspectRatio: "4 / 3",
+        });
+
+        const { container } = render(
+            <ImageBodyView
+                vm={vm}
+                className="mx_MImageBody"
+                containerClassName="mx_MImageBody_thumbnail_container"
+                imageClassName="mx_MImageBody_thumbnail"
+            />,
+        );
+
+        expect(container.querySelector(".mx_MImageBody")).toHaveAttribute("class", "mx_MImageBody");
+        expect(container.querySelector(".mx_MImageBody_thumbnail_container")).toHaveAttribute(
+            "class",
+            "mx_MImageBody_thumbnail_container",
+        );
+        expect(screen.getByRole("img", { name: "Legacy class image" })).toHaveAttribute(
+            "class",
+            "mx_MImageBody_thumbnail",
+        );
+    });
+
     it("swaps to the full source on hover for animated previews", async () => {
         const user = userEvent.setup();
         const vm = new TestImageBodyViewModel({

packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx

@@ -249,9 +249,9 @@ export function ImageBodyView({
     const [focus, setFocus] = useState(false);
     const hoverOrFocus = hover || focus;
 
-    const rootClassName = classNames(className, styles.root);
-    const resolvedContainerClassName = classNames(containerClassName, styles.thumbnailContainer);
-    const resolvedImageClassName = classNames(imageClassName, styles.image);
+    const rootClassName = className ?? styles.root;
+    const resolvedContainerClassName = containerClassName ?? styles.thumbnailContainer;
+    const resolvedImageClassName = imageClassName ?? styles.image;
 
     if (state === ImageBodyViewState.ERROR) {
         return (