@multiplatform.one/forms 7.66.0 → 7.68.0

package/src/fields/ColorPicker/ColorPicker.stories.tsx

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { ColorPicker } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof ColorPicker> = {
   title: "Forms/ColorPicker",
@@ -69,7 +69,7 @@ export const Main: Story = {
               helperText="Choose background color"
             />
             <ColorPicker label="Text Color" name="textColor" helperText="Choose text color" />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Combobox/Combobox.regularWidth.native.spec.tsx

@@ -0,0 +1,94 @@
+/**
+ * FZ-8116 (LC-266): on native the Link picker (Combobox) takes the window's
+ * size class like Select and ColorPicker do. At regular width (an iPad) it
+ * opens over its field with its search inside; at compact width (iPhone,
+ * Slide Over) it keeps the bottom sheet.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { authorOptions } from "./authorOptions";
+import { Combobox } from "./index";
+
+const screen = vi.hoisted(() => ({ width: 820, height: 1180 }));
+const sheetProps = vi.hoisted(() => [] as unknown[]);
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+    visible ? children : null,
+  useWindowDimensions: () => ({ ...screen, scale: 2, fontScale: 1 }),
+}));
+vi.mock("../../FloatingPanel", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../FloatingPanel")>();
+  const native = await import("../../FloatingPanel/index.native");
+  return {
+    ...actual,
+    FloatingPanel: (props: Parameters<typeof native.FloatingPanel>[0]) => {
+      sheetProps.push(props.sheet);
+      return <native.FloatingPanel {...props} />;
+    },
+  };
+});
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  sheetProps.length = 0;
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  screen.width = 820;
+  screen.height = 1180;
+});
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+function open() {
+  const view = renderWithProviders(<Combobox options={authorOptions} aria-label="Author" />);
+  tap(view.getByRole("button", { name: "Author" }));
+  return view;
+}
+
+const regular = () => document.querySelector('[data-testid="floating-panel-regular"]');
+const sheet = () => document.querySelector('[data-testid="floating-panel-sheet"]');
+
+describe("Combobox native at regular width (FZ-8116)", () => {
+  it("leaves the overlay form to the size class instead of forcing the sheet", () => {
+    renderWithProviders(<Combobox options={authorOptions} aria-label="Author" />);
+    expect(sheetProps.length).toBeGreaterThan(0);
+    expect(sheetProps.every((value) => value !== true)).toBe(true);
+  });
+
+  it("opens over its field on an iPad-wide window", () => {
+    open();
+    expect(regular()).not.toBeNull();
+    expect(sheet()).toBeNull();
+  });
+
+  it.each([
+    ["an iPhone", 390, 844],
+    ["iPad Slide Over", 320, 1180],
+  ])("keeps the bottom sheet on %s", (_name, width, height) => {
+    screen.width = width;
+    screen.height = height;
+    open();
+    expect(regular()).toBeNull();
+    expect(sheet()).not.toBeNull();
+  });
+});

package/src/fields/Combobox/Combobox.stories.tsx

@@ -4,11 +4,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Combobox, type ComboboxOption } from "./index";
 import { authorOptions } from "./authorOptions";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Combobox> = {
   title: "Forms/Combobox",
@@ -117,7 +117,7 @@ export const Main: StoryObj<typeof Combobox> = {
               searchPlaceholder="Type to search..."
             />
 
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Combobox/index.tsx

@@ -2509,7 +2509,9 @@ function NativeComboboxCore({
     <FloatingPanel
       open={open}
       onOpenChange={handleOpenChange}
-      sheet
+      // Native leaves the form to the window's size class (FZ-8116): a sheet
+      // when compact, a panel over the field at regular width.
+      sheet={isWeb}
       // Search-driven comboboxes open the sheet tall: results stream in as
       // the user types, so a content-fit sheet would open as a sliver.
       sheetFill={Boolean(onSearch)}

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -14,6 +14,7 @@ import { MonthPicker } from "./MonthPicker";
 import { MultiDatePicker } from "./MultiDatePicker";
 import { DatePicker } from "./index";
 import { formatCalendarDate, Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 import { TimePicker } from "../TimePicker";
 
 const meta: Meta<typeof DatePicker> = {
@@ -86,7 +87,7 @@ export const Main: Story = {
               name={"endDate" as any}
               helperText="Select project end date"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/DateRangePicker.stories.tsx

@@ -4,10 +4,10 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { DateRangePicker } from "./DateRangePicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof DateRangePicker> = {
   title: "Forms/DateRangePicker",
@@ -103,7 +103,7 @@ export const FormBound: Story = {
             <FormSubscribe selector={(s: any) => [s.values.range]}>
               {([range]: any[]) => <Text>{`form-value:${JSON.stringify(range)}`}</Text>}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/DatetimePicker.stories.tsx

@@ -8,6 +8,7 @@ import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { DatetimePicker } from "./DatetimePicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof DatetimePicker> = {
   title: "Forms/DatetimePicker",
@@ -170,7 +171,7 @@ export const FormBound: Story = {
                 </Text>
               )}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/MonthPicker.stories.tsx

@@ -2,10 +2,10 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MonthPicker } from "./MonthPicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof MonthPicker> = {
   title: "Forms/MonthPicker",
@@ -104,7 +104,7 @@ export const FormBound: Story = {
             <FormSubscribe selector={(s: any) => [s.values.period]}>
               {([period]: any[]) => <Text>{`form-value:${JSON.stringify(period)}`}</Text>}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/MultiDatePicker.stories.tsx

@@ -4,10 +4,10 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MultiDatePicker } from "./MultiDatePicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof MultiDatePicker> = {
   title: "Forms/MultiDatePicker",
@@ -115,7 +115,7 @@ export const FormBound: Story = {
                 </Text>
               )}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -67,7 +67,12 @@ describe("FileUpload", () => {
     const result = renderWithProviders(
       <FileUpload existing={{ src: "/files/sprite.png" }} onExistingRemove={remove} />,
     );
-    expect(result.container.textContent).toContain("Replace");
+    // LC-260: Replace and Remove are glyphs on the media plate over the image.
+    const actions = result.container.querySelector('[data-file-upload="preview-actions"]');
+    expect(
+      actions?.querySelector('[aria-label="Replace"]')?.getAttribute("data-mp-icon-button"),
+    ).toBe("media");
+    expect(result.container.textContent).not.toContain("Replace");
     expect(result.container.textContent).not.toContain("Choose File");
     expect(result.container.textContent).not.toContain("Drag a file");
     expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
@@ -344,7 +349,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(zone.textContent).toContain("Drag a file into this area");
   });
 
-  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (29 painted, hitSlop 44)", async () => {
+  it("renders picked files as in-zone rows: name, bold size line, bare ✕ remove (29 painted, hitSlop 44)", async () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" multiple />,
     );
@@ -367,14 +372,14 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(sizeLine).toBeTruthy();
     expect(sizeLine.className).toMatch(/_fow-700/);
 
-    // Remove: a circular filled $color12 disc painted at nestedControl (29)
-    // with hitSlop restoring the 44 floor (data-mp-press-slop 8 → 29+16=45).
+    // Remove: LC-176's bare ✕, no fill or border, painted at nestedControl
+    // (29) with hitSlop restoring the 44 floor (data-mp-press-slop 8 → 45).
+    // The filled $color12 disc it replaced read as a plate on plain content.
     const remove = flist.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
     expect(remove).toBeTruthy();
     expect(remove.getAttribute("data-nested-px")).toBe("29");
     expect(remove.getAttribute("data-mp-press-slop")).toBe("8");
-    expect(remove.className).toMatch(/_bg-color12/);
-    // The inverse ✕ rides inside the disc.
+    expect(remove.className).not.toMatch(/_bg-color12/);
     expect(remove.querySelector("svg")).toBeTruthy();
     // The caption is dropped once files exist; the CTA stays.
     expect(zone.textContent).not.toContain("Drag a file into this area");

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useEffect, useRef, useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { FileUpload } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof FileUpload> = {
   title: "Forms/FileUpload",
@@ -80,7 +80,7 @@ export const Main: Story = {
                 helperText: "Upload multiple files",
               } as any)}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/FileUpload/index.tsx

@@ -5,7 +5,8 @@ import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import {
@@ -756,25 +757,16 @@ export function FileUpload<
   const existingName = existing?.name || fileNameFromSrc(existing?.src ?? "");
   const hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
 
-  const renderRemoveDisc = (ariaLabel: string, onPress: () => void) =>
+  // LC-176 ICON-BUTTON: a row's remove is a bare ✕; on an image tile it
+  // floats over the picture on the media plate. Painted at nestedControl with
+  // hitSlop restoring the 44 floor via `nested` (held exception).
+  const renderRemoveDisc = (ariaLabel: string, onPress: () => void, overMedia = false) =>
     canInteract ? (
       <Button
-        // Bento remove: a filled $color12 disc with the inverse
-        // ✕ — painted at nestedControl (32) with hitSlop
-        // restoring the 44 floor via `nested` (held exception);
-        // the nested icon step lands the board's 14px ✕.
         nested
-        circular
+        {...(overMedia ? { plate: "media" as const } : undefined)}
         icon={XIcon}
         aria-label={ariaLabel}
-        backgroundColor={formDropzoneColors.removeDisc.background.base}
-        color={formDropzoneColors.removeDisc.ink}
-        hoverStyle={{
-          backgroundColor: formDropzoneColors.removeDisc.background.hover,
-        }}
-        pressStyle={{
-          backgroundColor: formDropzoneColors.removeDisc.background.press,
-        }}
         onPress={(e) => {
           e.stopPropagation();
           onPress();
@@ -782,6 +774,61 @@ export function FileUpload<
       />
     ) : null;
 
+  // LC-260 ICONS-OVER-WORDS: the preview's Replace and Remove are their
+  // symbols; over an image they float at its top-right on the LC-176 media
+  // plate. While replacing, the one ✕ backs out of the source choices.
+  const previewActions = (overMedia: boolean, onValueChange?: (nextValue: TData) => void) => {
+    const plate = overMedia ? { plate: "media" as const } : undefined;
+    const stop = (event: { stopPropagation: () => void }) => event.stopPropagation();
+    if (replacing)
+      return (
+        <IconButton
+          {...plate}
+          icon={standardActions.cancel.icon}
+          aria-label={t("Cancel replacement")}
+          aria-expanded
+          onPress={(event) => {
+            stop(event);
+            transfersRef.current.forEach((item) => item.controller.abort());
+            setTransfersAndRef(() => []);
+            if (fileInputRef.current) fileInputRef.current.value = "";
+            if (isWeb)
+              replaceRef.current?.querySelector<HTMLElement>('button, [role="button"]')?.focus();
+            setReplacing(false);
+          }}
+        />
+      );
+    return (
+      <>
+        <IconButton
+          {...plate}
+          icon={standardActions.replace.icon}
+          aria-label={t("Replace")}
+          aria-expanded={false}
+          onPress={(event) => {
+            stop(event);
+            setReplacing(true);
+          }}
+        />
+        {singleFile || onExistingRemove ? (
+          <IconButton
+            {...plate}
+            icon={standardActions.remove.icon}
+            aria-label={t("Remove {{name}}", { name: singleFile?.name ?? existingName })}
+            onPress={(event) => {
+              stop(event);
+              transfersRef.current.forEach((item) => item.controller.abort());
+              setTransfersAndRef(() => []);
+              if (singleFile) handleFileRemove(singleFile, onValueChange);
+              else onExistingRemove?.();
+              setReplacing(false);
+            }}
+          />
+        ) : null}
+      </>
+    );
+  };
+
   const renderFileMeta = (file: File, preview: string | null, extra?: ReactNode) => (
     <XStack flex={1} gap="$2" alignItems="center">
       {preview ? (
@@ -846,8 +893,10 @@ export function FileUpload<
           right={tileRemoveInset}
           zIndex={1}
         >
-          {renderRemoveDisc(t("Remove {{name}}", { name: file.name }), () =>
-            handleFileRemove(file, onValueChange),
+          {renderRemoveDisc(
+            t("Remove {{name}}", { name: file.name }),
+            () => handleFileRemove(file, onValueChange),
+            true,
           )}
         </YStack>
       ) : null}
@@ -1016,22 +1065,37 @@ export function FileUpload<
                 width="100%"
               >
                 {singlePreview ? (
-                  <Image
-                    src={singlePreview}
-                    alt={singleFile?.name ?? existingName}
-                    width="$14"
-                    height="$14"
-                    maxWidth="100%"
-                    objectFit="contain"
-                    onLoad={(event) => {
-                      if (!isWeb) return;
-                      const image = event.currentTarget as unknown as HTMLImageElement;
-                      setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
-                    }}
-                    {...(isWeb && pixelated
-                      ? { style: { imageRendering: "pixelated" } as any }
-                      : {})}
-                  />
+                  <YStack position="relative" maxWidth="100%">
+                    <Image
+                      src={singlePreview}
+                      alt={singleFile?.name ?? existingName}
+                      width="$14"
+                      height="$14"
+                      maxWidth="100%"
+                      objectFit="contain"
+                      onLoad={(event) => {
+                        if (!isWeb) return;
+                        const image = event.currentTarget as unknown as HTMLImageElement;
+                        setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
+                      }}
+                      {...(isWeb && pixelated
+                        ? { style: { imageRendering: "pixelated" } as any }
+                        : {})}
+                    />
+                    {canInteract ? (
+                      <XStack
+                        ref={replaceRef as any}
+                        data-file-upload="preview-actions"
+                        position="absolute"
+                        top={-tileRemoveInset}
+                        right={-tileRemoveInset}
+                        zIndex={1}
+                        {...knobProps.gap}
+                      >
+                        {previewActions(true, onValueChange)}
+                      </XStack>
+                    ) : null}
+                  </YStack>
                 ) : (
                   <YStack alignItems="center" {...knobProps.gap}>
                     <FileIcon size={rowGlyphSize} />
@@ -1041,50 +1105,9 @@ export function FileUpload<
                   </YStack>
                 )}
               </YStack>
-              {canInteract ? (
-                <XStack
-                  ref={replaceRef as any}
-                  {...knobProps.gap}
-                  justifyContent="center"
-                  flexWrap="wrap"
-                >
-                  <Button
-                    size={knobProps.sizeToken}
-                    aria-label={replacing ? t("Cancel replacement") : t("Replace")}
-                    aria-expanded={replacing}
-                    onPress={(event) => {
-                      event.stopPropagation();
-                      if (replacing) {
-                        transfersRef.current.forEach((item) => item.controller.abort());
-                        setTransfersAndRef(() => []);
-                        if (fileInputRef.current) fileInputRef.current.value = "";
-                        if (isWeb)
-                          replaceRef.current
-                            ?.querySelector<HTMLElement>('button, [role="button"]')
-                            ?.focus();
-                      }
-                      setReplacing(!replacing);
-                    }}
-                  >
-                    {replacing ? t("Cancel") : t("Replace")}
-                  </Button>
-                  {singleFile || onExistingRemove ? (
-                    <Button
-                      size={knobProps.sizeToken}
-                      outlined
-                      aria-label={t("Remove {{name}}", { name: singleFile?.name ?? existingName })}
-                      onPress={(event) => {
-                        event.stopPropagation();
-                        transfersRef.current.forEach((item) => item.controller.abort());
-                        setTransfersAndRef(() => []);
-                        if (singleFile) handleFileRemove(singleFile, onValueChange);
-                        else onExistingRemove?.();
-                        setReplacing(false);
-                      }}
-                    >
-                      {t("Remove")}
-                    </Button>
-                  ) : null}
+              {canInteract && !singlePreview ? (
+                <XStack ref={replaceRef as any} {...knobProps.gap} justifyContent="center">
+                  {previewActions(false, onValueChange)}
                 </XStack>
               ) : null}
             </YStack>
@@ -1175,6 +1198,7 @@ export function FileUpload<
                       {renderRemoveDisc(
                         t("Remove {{name}}", { name: existingName }),
                         onExistingRemove,
+                        true,
                       )}
                     </YStack>
                   ) : null}

package/src/fields/Geolocation/index.tsx

@@ -15,7 +15,8 @@ import { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { ScrollView, Spinner, Text as TamaguiText, View, XStack, YStack, isWeb } from "tamagui";
 import { AdaptivePopup } from "../../AdaptivePopup";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel, useViewportGtSm } from "../../FloatingPanel";
 import { Input as InputParts } from "../../InputParts";
@@ -699,12 +700,16 @@ function GeoMapSurface({
             {locateError}
           </TamaguiText>
           <XStack gap="$2">
-            <Button size="$2" onPress={onRetryLocate} aria-label={t("Retry location")}>
-              {t("Retry")}
-            </Button>
-            <Button size="$2" onPress={onCloseLocate} aria-label={t("Close location")}>
-              {t("Close")}
-            </Button>
+            <IconButton
+              icon={standardActions.retry.icon}
+              onPress={onRetryLocate}
+              aria-label={t("Retry location")}
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onCloseLocate}
+              aria-label={t("Close location")}
+            />
           </XStack>
         </YStack>
       ) : null}

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

@@ -106,7 +106,7 @@ describe("ImageField", () => {
         if (img) fireEvent.error(img);
       });
       expect(result.findTextElement("Image failed to load")).toBeDefined();
-      expect(result.findTextElement("Remove")).toBeDefined();
+      expect(result.container.querySelector('[aria-label="Remove image"]')).toBeTruthy();
     });
 
     it("clears the value from the Remove action", async () => {
@@ -121,7 +121,7 @@ describe("ImageField", () => {
           imageHeight={96}
         />,
       );
-      const remove = result.findTextElement("Remove");
+      const remove = result.container.querySelector('[aria-label="Remove image"]');
       expect(remove).toBeDefined();
       await act(async () => {
         if (remove) fireEvent.click(remove);
@@ -197,8 +197,8 @@ describe("ImageField", () => {
       );
       const tile = mediaTile(result.container);
       expect(tile).not.toBeNull();
-      expect(tile?.textContent ?? "").not.toMatch(/Remove/);
-      expect(result.findTextElement("Remove")).toBeDefined();
+      expect(tile?.querySelector('[aria-label="Remove image"]')).toBeNull();
+      expect(result.container.querySelector('[aria-label="Remove image"]')).toBeTruthy();
     });
 
     it("rides the unclamped radius knob including full", () => {
@@ -231,7 +231,7 @@ describe("ImageField", () => {
         </TableCellContext.Provider>,
       );
       expect(mediaTile(result.container)).not.toBeNull();
-      expect(result.findTextElement("Remove")).toBeFalsy();
+      expect(result.container.querySelector('[aria-label="Remove image"]')).toBeFalsy();
     });
   });
 });

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

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack, XStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { ImageField } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 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>',
@@ -77,7 +77,7 @@ export const Main: Story = {
                 objectFit: "contain",
               } as any)}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );