@multiplatform.one/components 6.6.0 → 7.0.0

package/src/images/Image/Image.spec.tsx

@@ -1,57 +1,63 @@
+import { fireEvent } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { Image } from "./index";
 
+const SRC = "https://example.com/photo.jpg";
+
 describe("Image", () => {
   describe("rendering", () => {
     it("renders an img element on web", () => {
       const { container } = renderWithProviders(
-        <Image src="https://example.com/photo.jpg" alt="test" width={100} height={100} />,
+        <Image src={SRC} alt="test" width={100} height={100} />,
       );
       const img = container.querySelector("img");
       expect(img).toBeInTheDocument();
     });
 
-    it("applies layout styles directly to the img element on web", () => {
+    it("applies layout styles on a clipping frame", () => {
       const { container } = renderWithProviders(
-        <Image src="https://example.com/photo.jpg" alt="test" width={200} height={100} />,
+        <Image src={SRC} alt="test" width={200} height={100} />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("[data-image-frame]")).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
 
     it("returns null when no source is provided", () => {
       const { container } = renderWithProviders(<Image alt="no source" />);
       const img = container.querySelector("img");
       expect(img).not.toBeInTheDocument();
+      expect(container.querySelector("[data-image-fallback]")).not.toBeInTheDocument();
     });
 
     it("renders with source prop (object form)", () => {
       const { container } = renderWithProviders(
-        <Image
-          source={{ uri: "https://example.com/photo.jpg" }}
-          alt="object source"
-          width={100}
-          height={100}
-        />,
+        <Image source={{ uri: SRC }} alt="object source" width={100} height={100} />,
       );
       const img = container.querySelector("img");
       expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute("src", SRC);
+    });
+
+    it("does not leak the RN source object onto the img", () => {
+      const { container } = renderWithProviders(
+        <Image source={{ uri: SRC }} alt="object source" width={100} height={100} />,
+      );
+      const img = container.querySelector("img");
+      expect(img).not.toHaveAttribute("source");
     });
   });
 
   describe("web layout props on img", () => {
     it("passes width directly to the img element", () => {
-      const { container } = renderWithProviders(
-        <Image src="https://example.com/photo.jpg" alt="test" width={300} />,
-      );
+      const { container } = renderWithProviders(<Image src={SRC} alt="test" width={300} />);
       const img = container.querySelector("img");
       expect(img).toBeInTheDocument();
     });
 
     it("passes aspectRatio style to the img element on web", () => {
       const { container } = renderWithProviders(
-        <Image src="https://example.com/photo.jpg" alt="test" width={400} aspectRatio={16 / 9} />,
+        <Image src={SRC} alt="test" width={400} aspectRatio={16 / 9} />,
       );
       const img = container.querySelector("img");
       expect(img).toBeInTheDocument();
@@ -59,13 +65,7 @@ describe("Image", () => {
 
     it("passes borderRadius to the img element on web", () => {
       const { container } = renderWithProviders(
-        <Image
-          src="https://example.com/photo.jpg"
-          alt="test"
-          width={200}
-          height={200}
-          borderRadius={16}
-        />,
+        <Image src={SRC} alt="test" width={200} height={200} borderRadius={16} />,
       );
       const img = container.querySelector("img");
       expect(img).toBeInTheDocument();
@@ -77,8 +77,7 @@ describe("Image", () => {
       const { container } = renderWithProviders(
         <Image src="https://example.com/icon.svg" alt="svg" width={100} height={100} />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
 
     it("detects .svg with query params", () => {
@@ -90,8 +89,7 @@ describe("Image", () => {
           height={100}
         />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
 
     it("detects .svg with hash fragment", () => {
@@ -103,8 +101,7 @@ describe("Image", () => {
           height={100}
         />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
 
     it("detects data:image/svg+xml", () => {
@@ -116,99 +113,165 @@ describe("Image", () => {
           height={100}
         />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
 
     it("detects svg via the svg prop", () => {
       const { container } = renderWithProviders(
         <Image src="https://example.com/image" alt="forced svg" svg width={100} height={100} />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
 
     it("does not detect non-svg images as svg", () => {
       const { container } = renderWithProviders(
         <Image src="https://example.com/photo.jpg" alt="jpg" width={100} height={100} />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
   });
 
   describe("alt text", () => {
     it("sets alt attribute on the img", () => {
       const { container } = renderWithProviders(
-        <Image
-          src="https://example.com/photo.jpg"
-          alt="descriptive alt"
-          width={100}
-          height={100}
-        />,
+        <Image src={SRC} alt="descriptive alt" width={100} height={100} />,
       );
-      const img = container.querySelector("img");
-      expect(img).toHaveAttribute("alt", "descriptive alt");
+      expect(container.querySelector("img")).toHaveAttribute("alt", "descriptive alt");
     });
   });
 
   describe("objectFit", () => {
     it("renders with objectFit cover", () => {
       const { container } = renderWithProviders(
-        <Image
-          src="https://example.com/photo.jpg"
-          alt="cover"
-          width={200}
-          height={200}
-          objectFit="cover"
-        />,
+        <Image src={SRC} alt="cover" width={200} height={200} objectFit="cover" />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
 
     it("renders with objectFit contain", () => {
       const { container } = renderWithProviders(
-        <Image
-          src="https://example.com/photo.jpg"
-          alt="contain"
-          width={200}
-          height={200}
-          objectFit="contain"
-        />,
+        <Image src={SRC} alt="contain" width={200} height={200} objectFit="contain" />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toBeInTheDocument();
     });
   });
 
   describe("event handlers", () => {
     it("accepts onLoad handler", () => {
+      const onLoad = vi.fn();
       const { container } = renderWithProviders(
-        <Image
-          src="https://example.com/photo.jpg"
-          alt="test"
-          width={100}
-          height={100}
-          onLoad={() => {}}
-        />,
+        <Image src={SRC} alt="test" width={100} height={100} onLoad={onLoad} />,
       );
       const img = container.querySelector("img");
       expect(img).toBeInTheDocument();
+      fireEvent.load(img!);
+      expect(onLoad).toHaveBeenCalled();
     });
 
     it("accepts onError handler", () => {
+      const onError = vi.fn();
+      const { container } = renderWithProviders(
+        <Image src={SRC} alt="test" width={100} height={100} onError={onError} />,
+      );
+      const img = container.querySelector("img");
+      fireEvent.error(img!);
+      expect(onError).toHaveBeenCalled();
+    });
+  });
+
+  describe("Next.js contract", () => {
+    it("lazy-loads by default and eager-loads when priority", () => {
+      const lazy = renderWithProviders(<Image src={SRC} alt="lazy" width={100} height={100} />);
+      expect(lazy.container.querySelector("img")).toHaveAttribute("loading", "lazy");
+      const eager = renderWithProviders(
+        <Image src={SRC} alt="hero" width={100} height={100} priority />,
+      );
+      expect(eager.container.querySelector("img")).toHaveAttribute("loading", "eager");
+    });
+
+    it("forwards sizes", () => {
       const { container } = renderWithProviders(
         <Image
-          src="https://example.com/photo.jpg"
-          alt="test"
+          src={SRC}
+          alt="sizes"
           width={100}
           height={100}
-          onError={() => {}}
+          sizes="(max-width: 600px) 100vw, 400px"
         />,
       );
-      const img = container.querySelector("img");
-      expect(img).toBeInTheDocument();
+      expect(container.querySelector("img")).toHaveAttribute(
+        "sizes",
+        "(max-width: 600px) 100vw, 400px",
+      );
+    });
+
+    it("fill paints an absolute frame", () => {
+      const { container } = renderWithProviders(<Image src={SRC} alt="fill" fill />);
+      const frame = container.querySelector("[data-image-frame]");
+      expect(frame).toBeInTheDocument();
+    });
+  });
+
+  describe("Polaris thumbnail + LC-08 fallback", () => {
+    it("shows a type glyph when a sized thumbnail has no source", () => {
+      const { container } = renderWithProviders(<Image alt="Missing photo" size="medium" />);
+      expect(container.querySelector("img")).not.toBeInTheDocument();
+      expect(container.querySelector("[data-image-fallback]")).toBeInTheDocument();
+    });
+
+    it("replaces a failed asset with the fallback glyph", () => {
+      const { container } = renderWithProviders(
+        <Image src={SRC} alt="broken" width={80} height={80} />,
+      );
+      fireEvent.error(container.querySelector("img")!);
+      expect(container.querySelector("[data-image-fallback]")).toBeInTheDocument();
+      expect(container.querySelector("img")).not.toBeInTheDocument();
+    });
+
+    it("marks extraSmall thumbnails with nestedControl px", () => {
+      const { container } = renderWithProviders(
+        <Image src={SRC} alt="nested" size="extraSmall" compact />,
+      );
+      const frame = container.querySelector("[data-image-frame]");
+      expect(frame).toHaveAttribute("data-nested-px");
+    });
+  });
+
+  describe("LC-71 / LC-72 / 44px", () => {
+    it("rings the frame, not the img, when the image is a control", () => {
+      const onPress = vi.fn();
+      const { container } = renderWithProviders(
+        <Image src={SRC} alt="Open photo" size="medium" onPress={onPress} />,
+      );
+      const frame = container.querySelector("[data-image-frame]");
+      expect(frame).toHaveAttribute("role", "button");
+      expect(container.querySelector("img")).not.toHaveAttribute("role");
+    });
+
+    it("floors an unsized pressable image at 44px", () => {
+      const { container } = renderWithProviders(
+        <Image src={SRC} alt="Open photo" onPress={() => {}} />,
+      );
+      const frame = container.querySelector("[data-image-frame]");
+      expect(frame).toBeInTheDocument();
+      const style = window.getComputedStyle(frame!);
+      expect(Number.parseInt(style.minHeight, 10) >= 44 || style.minHeight === "44px").toBe(true);
+    });
+
+    it("rounds only outer corners on a stacked group", () => {
+      const { container } = renderWithProviders(
+        <Image
+          src={SRC}
+          alt="first"
+          size="medium"
+          groupPosition="first"
+          groupOrientation="horizontal"
+        />,
+      );
+      expect(container.querySelector("[data-image-frame]")).toHaveAttribute(
+        "data-group-position",
+        "first",
+      );
     });
   });
 });

package/src/images/Image/Image.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { View, YStack } from "tamagui";
+import { View, XStack, YStack } from "tamagui";
 import { Image } from "./index";
 
 const LANDSCAPE_IMG = "https://picsum.photos/id/10/800/400";
@@ -116,6 +116,69 @@ export const WithBorderRadius: Story = {
   },
 };
 
+export const Thumbnails: Story = {
+  render: () => (
+    <XStack gap="$3" alignItems="flex-end" padding="$4">
+      <Image src={SQUARE_IMG} alt="Extra small nested" size="extraSmall" compact />
+      <Image src={SQUARE_IMG} alt="Small" size="small" />
+      <Image src={SQUARE_IMG} alt="Medium" size="medium" />
+      <Image src={SQUARE_IMG} alt="Large" size="large" />
+    </XStack>
+  ),
+};
+
+export const FillParent: Story = {
+  render: () => (
+    <View width={280} height={160} position="relative" overflow="hidden" borderRadius="$4">
+      <Image src={LANDSCAPE_IMG} alt="Fill parent" fill sizes="280px" />
+    </View>
+  ),
+};
+
+export const MissingFallback: Story = {
+  args: {
+    alt: "Unavailable photo",
+    size: "medium",
+  },
+};
+
+export const StackedGroup: Story = {
+  render: () => (
+    <XStack>
+      <Image
+        src={SQUARE_IMG}
+        alt="First"
+        size="medium"
+        groupPosition="first"
+        groupOrientation="horizontal"
+      />
+      <Image
+        src={SQUARE_IMG}
+        alt="Middle"
+        size="medium"
+        groupPosition="middle"
+        groupOrientation="horizontal"
+      />
+      <Image
+        src={SQUARE_IMG}
+        alt="Last"
+        size="medium"
+        groupPosition="last"
+        groupOrientation="horizontal"
+      />
+    </XStack>
+  ),
+};
+
+export const Pressable: Story = {
+  args: {
+    src: SQUARE_IMG,
+    alt: "Open photo",
+    size: "medium",
+    onPress: () => {},
+  },
+};
+
 export const Gallery: Story = {
   render: () => (
     <YStack gap="$4" padding="$4" maxWidth={800}>
@@ -126,14 +189,55 @@ export const Gallery: Story = {
         height={200}
         testID="gallery-both"
       />
-      <Image src={LANDSCAPE_IMG} alt="Width only" width={400} testID="gallery-width-only" />
-      <Image
-        src={LANDSCAPE_IMG}
-        alt="Width + aspect ratio"
-        width={400}
-        aspectRatio={16 / 9}
-        testID="gallery-aspect-ratio"
-      />
+      <XStack gap="$3" alignItems="flex-end">
+        <Image src={SQUARE_IMG} alt="Extra small" size="extraSmall" compact testID="gallery-xs" />
+        <Image src={SQUARE_IMG} alt="Small" size="small" testID="gallery-sm" />
+        <Image src={SQUARE_IMG} alt="Medium" size="medium" testID="gallery-md" />
+        <Image src={SQUARE_IMG} alt="Large" size="large" testID="gallery-lg" />
+      </XStack>
+      <XStack>
+        <Image
+          src={SQUARE_IMG}
+          alt="Stack first"
+          size="medium"
+          groupPosition="first"
+          groupOrientation="horizontal"
+          testID="gallery-stack-first"
+        />
+        <Image
+          src={SQUARE_IMG}
+          alt="Stack middle"
+          size="medium"
+          groupPosition="middle"
+          groupOrientation="horizontal"
+        />
+        <Image
+          src={SQUARE_IMG}
+          alt="Stack last"
+          size="medium"
+          groupPosition="last"
+          groupOrientation="horizontal"
+        />
+      </XStack>
+      <XStack gap="$3">
+        <Image
+          src={LANDSCAPE_IMG}
+          alt="Cover"
+          width={160}
+          height={160}
+          objectFit="cover"
+          framed
+          testID="gallery-cover"
+        />
+        <Image alt="Unavailable" size="medium" testID="gallery-fallback" />
+        <Image
+          src={SQUARE_IMG}
+          alt="Open photo"
+          size="medium"
+          onPress={() => {}}
+          testID="gallery-press"
+        />
+      </XStack>
       <Image src={SVG_IMG} alt="SVG" width={100} height={100} testID="gallery-svg" />
       <Image src={GIF_IMG} alt="GIF" width={150} height={150} testID="gallery-gif" />
     </YStack>