@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/ImageField/ImageField.spec.tsx

@@ -47,6 +47,74 @@ describe("ImageField", () => {
       expect(result.findTextElement("Disabled")).toBeDefined();
     });
 
+    it("associates the label with the attach frame and is keyboard reachable", () => {
+      const result = renderWithProviders(<ImageField label="Avatar" name="avatar" />);
+      const label = result.container.querySelector("label[for]") as HTMLLabelElement | null;
+      expect(label?.textContent).toContain("Avatar");
+      const forId = label?.getAttribute("for") as string;
+      const frame = result.container.querySelector(`[id="${forId}"]`) as HTMLElement | null;
+      expect(frame?.getAttribute("role")).toBe("button");
+      expect(frame?.getAttribute("tabindex")).toBe("0");
+    });
+
+    it("does not put the hidden file input in the tab order", () => {
+      const result = renderWithProviders(<ImageField label="Avatar" name="avatar" />);
+      const input = result.container.querySelector("input[type='file']") as HTMLInputElement | null;
+      expect(input?.getAttribute("tabindex")).toBe("-1");
+      expect(input?.getAttribute("aria-hidden")).toBe("true");
+    });
+
+    it("opens the file dialog from Enter on the frame", async () => {
+      const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+      const result = renderWithProviders(<ImageField label="Avatar" name="avatar" />);
+      const frame = result.container.querySelector('[role="button"]') as HTMLElement | null;
+      expect(frame).toBeTruthy();
+      await act(async () => {
+        if (frame) fireEvent.keyDown(frame, { key: "Enter" });
+      });
+      expect(click).toHaveBeenCalled();
+      click.mockRestore();
+    });
+
+    it("shows a labelled fallback when the attached image fails to load", async () => {
+      const result = renderWithProviders(
+        <ImageField
+          label="Photo"
+          name="photo"
+          value="https://invalid.invalid/missing.png"
+          imageWidth={96}
+          imageHeight={96}
+        />,
+      );
+      const img = result.container.querySelector("img") as HTMLImageElement | null;
+      expect(img).toBeTruthy();
+      await act(async () => {
+        if (img) fireEvent.error(img);
+      });
+      expect(result.findTextElement("Image failed to load")).toBeDefined();
+      expect(result.findTextElement("Remove")).toBeDefined();
+    });
+
+    it("clears the value from the Remove action", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <ImageField
+          label="Photo"
+          name="photo"
+          value="https://example.com/a.png"
+          onChange={onChange}
+          imageWidth={96}
+          imageHeight={96}
+        />,
+      );
+      const remove = result.findTextElement("Remove");
+      expect(remove).toBeDefined();
+      await act(async () => {
+        if (remove) fireEvent.click(remove);
+      });
+      expect(onChange).toHaveBeenCalledWith(null);
+    });
+
     it("fires canonical onChange and the deprecated onValueChange alias once when an image is chosen", async () => {
       const onChange = vi.fn();
       const onValueChange = vi.fn();

package/src/fields/ImageField/ImageField.stories.tsx

@@ -7,6 +7,10 @@ import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { ImageField } from "./index";
 
+const ATTACHED = `data:image/svg+xml;utf8,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120"><rect width="240" height="120" fill="#4a90d9"/><circle cx="120" cy="60" r="36" fill="#fff"/></svg>',
+)}`;
+
 const meta: Meta<typeof ImageField> = {
   title: "Forms/ImageField",
   component: ImageField,
@@ -14,7 +18,7 @@ const meta: Meta<typeof ImageField> = {
     docs: {
       description: {
         component:
-          "An image upload field that shows a preview when an image exists, or a dashed upload area when empty. Both states have the same dimensions for consistent layout.",
+          "Frappe Attach Image: a preview frame that attaches, replaces, and accepts drops. Empty shows Add image; Remove is a sibling action. Keyboard focus rings the frame (LC-71), never the hidden file input.",
       },
     },
   },
@@ -28,7 +32,7 @@ const meta: Meta<typeof ImageField> = {
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
     imageWidth: { control: "number", description: "Width of the image area" },
     imageHeight: { control: "number", description: "Height of the image area" },
-    showRemove: { control: "boolean", description: "Show remove button on image" },
+    showRemove: { control: "boolean", description: "Show remove action when an image is set" },
     placeholder: { control: "text", description: "Placeholder text when no image" },
   },
 };
@@ -42,8 +46,8 @@ export const Main: Story = {
     const FormExample = () => {
       const form = useForm({
         defaultValues: {
-          avatar: null,
-          logo: null,
+          avatar: null as string | File | null,
+          logo: ATTACHED as string | File | null,
         },
         onSubmit: async ({ value }) => {
           action("onSubmit")(value);
@@ -57,18 +61,19 @@ export const Main: Story = {
               {...({
                 label: "Profile Avatar",
                 name: "avatar",
-                helperText: "Upload your profile picture",
-                imageWidth: 64,
-                imageHeight: 64,
+                helperText: "Drop or click to attach",
+                imageWidth: 96,
+                imageHeight: 96,
               } as any)}
             />
             <ImageField
               {...({
                 label: "Company Logo",
                 name: "logo",
-                helperText: "Upload your company logo",
-                imageWidth: 120,
-                imageHeight: 60,
+                helperText: "Click to replace · Remove clears the attachment",
+                imageWidth: 160,
+                imageHeight: 72,
+                objectFit: "contain",
               } as any)}
             />
             <Button action="submit">Submit</Button>
@@ -103,10 +108,10 @@ export const WithPlaceholder: Story = {
 export const WithExistingImage: Story = {
   args: {
     label: "Current Avatar",
-    value: "https://picsum.photos/200",
-    imageWidth: 80,
-    imageHeight: 80,
-    helperText: "Click to change image",
+    value: ATTACHED,
+    imageWidth: 96,
+    imageHeight: 96,
+    helperText: "Click to replace",
   },
   render: (args) => <ImageField {...args} />,
 };
@@ -125,9 +130,9 @@ export const ReadOnly: Story = {
   args: {
     label: "Read Only",
     readOnly: true,
-    value: "https://picsum.photos/200",
-    imageWidth: 64,
-    imageHeight: 64,
+    value: ATTACHED,
+    imageWidth: 96,
+    imageHeight: 96,
   },
   render: (args) => <ImageField {...args} />,
 };
@@ -181,12 +186,12 @@ export const Interactive: Story = {
           <ImageField
             label="Upload Image"
             value={image}
-            onValueChange={(val) => {
+            onChange={(val) => {
               setImage(val);
-              action("onValueChange")(val);
+              action("onChange")(val);
             }}
-            imageWidth={80}
-            imageHeight={80}
+            imageWidth={96}
+            imageHeight={96}
             helperText={
               image
                 ? typeof image === "string"
@@ -205,15 +210,26 @@ export const Interactive: Story = {
 export const NoRemoveButton: Story = {
   args: {
     label: "No Remove Button",
-    value: "https://picsum.photos/200",
+    value: ATTACHED,
     showRemove: false,
-    imageWidth: 64,
-    imageHeight: 64,
+    imageWidth: 96,
+    imageHeight: 96,
     helperText: "Click image to change",
   },
   render: (args) => <ImageField {...args} />,
 };
 
+export const BrokenImage: Story = {
+  args: {
+    label: "Broken attachment",
+    value: "https://invalid.invalid/missing.png",
+    imageWidth: 96,
+    imageHeight: 96,
+    helperText: "Failed load keeps the frame and stays labelled",
+  },
+  render: (args) => <ImageField {...args} />,
+};
+
 /** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
 export const SkeletonState: Story = {
   args: { label: "Profile Photo", skeleton: true },