@multiplatform.one/forms 7.67.0 → 7.68.0

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset, Paragraph, H4, Text } from "@multiplatform.one/theme";
-import { ScrollView, Separator, View, XStack, YStack } from "tamagui";
+import { Preset, Paragraph, Text } from "@multiplatform.one/theme";
+import { ScrollView, View, XStack, YStack } from "tamagui";
+import { OverlayHeader } from "@multiplatform.one/components";
 import { FloatingPanel } from "./index";
 import { Button } from "../Button";
 import { Select } from "../fields/Select";
@@ -38,13 +39,11 @@ export const Basic: Story = {
           trigger={<Button>{open ? "Panel is open" : "Click to open panel"}</Button>}
         >
           <YStack gap="$3">
-            <H4>Panel Content</H4>
+            <OverlayHeader title="Panel Content" onClose={() => setOpen(false)} />
             <Paragraph>
               Opens over its trigger: the top edge sits on the trigger's top edge and the trigger is
               the first row. Escape or an outside click dismisses and returns focus.
             </Paragraph>
-            <Separator />
-            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>
@@ -185,9 +184,8 @@ export const ForceSheet: Story = {
           trigger={<Button>{open ? "Sheet open" : "Click for Sheet (forced)"}</Button>}
         >
           <YStack gap="$3">
-            <H4>Forced Sheet</H4>
+            <OverlayHeader title="Forced Sheet" onClose={() => setOpen(false)} />
             <Paragraph>This panel always uses Sheet, even on large screens.</Paragraph>
-            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>
@@ -224,13 +222,11 @@ function ScrollClipPair({ where }: { where: string }) {
         trigger={<Button>{`FloatingPanel (${where})`}</Button>}
       >
         <YStack gap="$3" data-testid={`scroll-clip-panel-${where}`}>
-          <H4>Panel {where}</H4>
+          <OverlayHeader title={`Panel ${where}`} onClose={() => setOpen(false)} />
           <Paragraph>
             This body is taller than the space left in the scroll view, so a clipped panel loses its
             lower half.
           </Paragraph>
-          <Separator />
-          <Button onPress={() => setOpen(false)}>Close</Button>
         </YStack>
       </FloatingPanel>
     </YStack>

package/src/Form/Form.stories.tsx

@@ -53,6 +53,7 @@ import { formatFieldError } from "../ErrorSummary";
 import type { AnyFormApi } from "../types";
 import { Form, FormActions } from "./index";
 import { H3 } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Form> = {
   title: "Forms/Form",
@@ -95,7 +96,7 @@ export const Basic = () => (
     <Input label="Username" name="username" required />
     <Input label="Email" name="email" required />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -292,7 +293,7 @@ export const DynamicFields = () => {
       })()}
 
       <FormActions>
-        <Button action="submit">Submit</Button>
+        <ActionButton kind="submit" formAction="submit" />
       </FormActions>
     </Form>
   );
@@ -313,7 +314,7 @@ export const ReadOnlyAndDisabledSubmit = () => (
     <Input label="Read Only" name="readOnlyField" readOnly />
     <Input label="Disabled" name="disabledField" disabled />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -342,7 +343,7 @@ export const InputWithLinkResolver = () => (
       linkResolver={(v) => (v ? (`/items/${String(v)}` as any) : null)}
     />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -999,7 +1000,7 @@ export const Layout = () => (
       </FormSection>
     </FormSectionStack>
     <FormActions>
-      <Button action="submit">Save</Button>
+      <ActionButton kind="save" formAction="submit" />
     </FormActions>
   </Form>
 );

package/src/errorSummaryStories.spec.tsx

@@ -86,17 +86,17 @@ describe("Forms/ErrorSummary stories", () => {
   });
 
   it("FocusesTheFieldOnPress starts clean and raises the summary on submit", () => {
-    const { container, getByText } = mount(FocusesTheFieldOnPress as StoryLike);
+    const { container, getByRole } = mount(FocusesTheFieldOnPress as StoryLike);
     expect(container.querySelector("[data-testid='error-summary']")).toBeNull();
-    fireEvent.click(getByText("Submit"));
+    fireEvent.click(getByRole("button", { name: "Submit" }));
     const summary = container.querySelector("[data-testid='error-summary']");
     expect(summary).toBeTruthy();
     expect(container.querySelectorAll("a").length).toBe(2);
   });
 
   it("FocusesTheFieldOnPress links target the ids its fields actually carry", () => {
-    const { container, getByText } = mount(FocusesTheFieldOnPress as StoryLike);
-    fireEvent.click(getByText("Submit"));
+    const { container, getByRole } = mount(FocusesTheFieldOnPress as StoryLike);
+    fireEvent.click(getByRole("button", { name: "Submit" }));
     const hrefs = Array.from(container.querySelectorAll("a")).map((a) => a.getAttribute("href"));
     expect(hrefs).toEqual(["#email", "#password"]);
     expect(container.querySelector("#email")).toBeTruthy();

package/src/fields/Barcode/BarcodeScanner.native.tsx

@@ -2,7 +2,8 @@ import { Camera, CameraView, useCameraPermissions } from "expo-camera";
 import { useEffect, useRef, useState } from "react";
 import { StyleSheet } from "react-native";
 import { Text, View, XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { BarcodeScannerProps, CameraPreflightResult } from "./scannerTypes";
@@ -95,8 +96,8 @@ export function BarcodeScanner({
             {t("Camera permission denied. Please allow camera access.")}
           </Text>
           <XStack gap="$2">
-            <Button
-              size={knobProps.sizeToken}
+            <IconButton
+              icon={standardActions.retry.icon}
               onPress={() => {
                 setDenied(false);
                 requestPermission().then((res) => {
@@ -104,12 +105,12 @@ export function BarcodeScanner({
                 });
               }}
               aria-label={t("Retry camera")}
-            >
-              {t("Retry")}
-            </Button>
-            <Button size={knobProps.sizeToken} onPress={onClose} aria-label={t("Close scanner")}>
-              {t("Close")}
-            </Button>
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onClose}
+              aria-label={t("Close scanner")}
+            />
           </XStack>
         </YStack>
       ) : !permission?.granted ? (

package/src/fields/Barcode/BarcodeScanner.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Text, View, XStack, YStack, isWeb } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { queryPermissionState } from "../../shared/capabilityPreflight";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -173,16 +174,16 @@ export function BarcodeScanner({
             {errorMessage}
           </Text>
           <XStack gap="$2">
-            <Button
-              size={knobProps.sizeToken}
+            <IconButton
+              icon={standardActions.retry.icon}
               onPress={() => setAttempt((a) => a + 1)}
               aria-label={t("Retry camera")}
-            >
-              {t("Retry")}
-            </Button>
-            <Button size={knobProps.sizeToken} onPress={onClose} aria-label={t("Close scanner")}>
-              {t("Close")}
-            </Button>
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onClose}
+              aria-label={t("Close scanner")}
+            />
           </XStack>
         </YStack>
       ) : (

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -6,10 +6,10 @@ import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Checkbox as TamaguiCheckbox, XStack, YStack } from "tamagui";
 import { Label } from "../../Label";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Checkbox, Checkboxes, CheckboxGroup } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",
@@ -54,7 +54,7 @@ export const Main: Story = {
             validators={{ onChange: ({ value }) => (!value ? "Terms are required" : undefined) }}
           />
           <Checkbox label="Subscribe to newsletter" name="newsletter" />
-          <Button action="submit">Submit</Button>
+          <ActionButton kind="submit" formAction="submit" />
         </Form>
       );
     };
@@ -274,7 +274,7 @@ export const CheckboxGroupWithForm: StoryObj = {
               helperText="Select required permissions"
               required
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Checkbox/CheckboxGroup.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Preset, Paragraph } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { CheckboxGroup } from "./CheckboxGroup";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof CheckboxGroup> = {
   title: "Forms/CheckboxGroup",
@@ -255,7 +255,7 @@ export const RequiredForm: Story = {
               ]}
               helperText="Submit empty to trigger required error"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

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.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/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>
       );