@multiplatform.one/forms 7.66.0 → 7.68.0

package/src/fields/Slider/Slider.system.native.spec.tsx

@@ -0,0 +1,168 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { useForm } from "@tanstack/react-form";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { Slider } from "./index";
+
+const system = vi.hoisted(() => ({
+  os: "ios" as "ios" | "android" | null,
+  installed: true,
+}));
+
+// The system slider as a probe: it shows the props it got and moves through
+// onValueChange, then onSlidingComplete, the way a drag on UISlider does.
+const SystemSliderProbe = vi.hoisted(
+  () =>
+    function SystemSliderProbe(props: Record<string, any>) {
+      return (
+        <input
+          data-testid="system-slider"
+          data-fill={props.minimumTrackTintColor}
+          data-rail={props.maximumTrackTintColor}
+          data-thumb={props.thumbTintColor ?? ""}
+          data-label={props.accessibilityLabel ?? ""}
+          data-min={props.minimumValue}
+          data-max={props.maximumValue}
+          data-step={props.step}
+          disabled={props.disabled}
+          value={props.value}
+          onChange={(event) => {
+            props.onValueChange?.(Number(event.target.value));
+            props.onSlidingComplete?.(Number(event.target.value));
+          }}
+        />
+      );
+    },
+);
+
+vi.mock("../../shared/systemControls", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../shared/systemControls")>()),
+  systemControlPlatform: () => system.os,
+}));
+
+vi.mock("../../shared/systemControlModules", () => ({
+  loadSystemSlider: () => (system.installed ? SystemSliderProbe : null),
+  loadSystemSegmentedControl: () => null,
+}));
+
+const mpoTheme = createDefaultThemeConfig();
+const renderInScheme = (ui: ReactElement, scheme: "light" | "dark") =>
+  render(
+    <TamaguiProvider config={mpoTheme.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+
+afterEach(cleanup);
+beforeEach(() => {
+  system.os = "ios";
+  system.installed = true;
+});
+
+const literal = (value: string | null) => Boolean(value) && !value!.startsWith("$");
+const mpoSlider = (container: HTMLElement) => container.querySelector('[role="slider"]');
+
+function FormSlider({ onSubmit }: { onSubmit: (value: { volume: number }) => void }) {
+  const form = useForm({ defaultValues: { volume: 20 }, onSubmit: ({ value }) => onSubmit(value) });
+  return (
+    <Form form={form}>
+      <Slider name="volume" label="Volume" />
+      <button type="button" onClick={() => form.handleSubmit()}>
+        Save
+      </button>
+    </Form>
+  );
+}
+
+// LC-266 PLATFORM-ERGONOMICS (FZ-8118). With @react-native-community/slider in
+// the binary, iOS and Android render the system slider tinted from the theme.
+// Without it (One's binary today, an OTA on an older build) the MPO slider.
+describe("Slider on iOS and Android", () => {
+  it.each(["light", "dark"] as const)(
+    "renders the system slider with the %s theme's fill and rail as literals",
+    (scheme) => {
+      const result = renderInScheme(
+        <Slider label="Volume" defaultValue={[30]} min={10} max={90} step={5} />,
+        scheme,
+      );
+      const view = result.getByTestId("system-slider") as HTMLInputElement;
+      expect(view.value).toBe("30");
+      expect(view.dataset).toMatchObject({ min: "10", max: "90", step: "5", label: "Volume" });
+      expect(literal(view.getAttribute("data-fill"))).toBe(true);
+      expect(literal(view.getAttribute("data-rail"))).toBe(true);
+      expect(view.getAttribute("data-fill")).not.toBe(view.getAttribute("data-rail"));
+      expect(view.dataset.thumb).toBe("");
+      expect(mpoSlider(result.container)).toBeNull();
+      expect(result.getByText("30")).toBeTruthy();
+    },
+  );
+
+  it("tints the Android thumb with the fill", () => {
+    system.os = "android";
+    const result = renderInScheme(<Slider label="Volume" />, "light");
+    const view = result.getByTestId("system-slider");
+    expect(literal(view.getAttribute("data-thumb"))).toBe(true);
+    expect(view.dataset.thumb).toBe(view.dataset.fill);
+  });
+
+  it("reports a move as a one-value array and updates the readout", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Slider label="Volume" onChange={onChange} />);
+    fireEvent.change(result.getByTestId("system-slider"), { target: { value: "40" } });
+    expect(onChange).toHaveBeenCalledWith([40]);
+    expect(result.getByText("40")).toBeTruthy();
+  });
+
+  it("writes the form field it is bound to", async () => {
+    const onSubmit = vi.fn();
+    const result = renderWithProviders(<FormSlider onSubmit={onSubmit} />);
+    expect((result.getByTestId("system-slider") as HTMLInputElement).value).toBe("20");
+    fireEvent.change(result.getByTestId("system-slider"), { target: { value: "55" } });
+    fireEvent.click(result.getByText("Save"));
+    await vi.waitFor(() => expect(onSubmit).toHaveBeenCalledWith({ volume: 55 }));
+  });
+
+  it("passes disabled through and never reports a disabled or read-only move", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <>
+        <Slider label="Off limits" onChange={onChange} disabled />
+        <Slider label="Look only" onChange={onChange} readOnly />
+      </>,
+    );
+    const [disabledView, readOnlyView] = result.getAllByTestId("system-slider");
+    expect((disabledView as HTMLInputElement).disabled).toBe(true);
+    fireEvent.change(disabledView!, { target: { value: "40" } });
+    fireEvent.change(readOnlyView!, { target: { value: "40" } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("falls back to the MPO slider when the binary lacks the module", () => {
+    system.installed = false;
+    const result = renderWithProviders(<Slider label="Volume" defaultValue={[30]} />);
+    expect(result.queryByTestId("system-slider")).toBeNull();
+    expect(mpoSlider(result.container)).not.toBeNull();
+  });
+
+  it("keeps the MPO slider for a range, a vertical slider and native={false}", () => {
+    const result = renderWithProviders(
+      <>
+        <Slider label="Range" defaultValue={[10, 60]} />
+        <Slider label="Tall" sliderProps={{ orientation: "vertical" }} />
+        <Slider label="Opted out" native={false} />
+      </>,
+    );
+    expect(result.queryByTestId("system-slider")).toBeNull();
+  });
+
+  it("keeps the MPO slider on web and GNOME", () => {
+    system.os = null;
+    const result = renderWithProviders(<Slider label="Volume" />);
+    expect(result.queryByTestId("system-slider")).toBeNull();
+    expect(mpoSlider(result.container)).not.toBeNull();
+  });
+});

package/src/fields/Slider/index.tsx

@@ -33,6 +33,13 @@ import {
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { formCommonColors, formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { loadSystemSlider } from "../../shared/systemControlModules";
+import {
+  type SystemPlatform,
+  type SystemSliderComponent,
+  systemControlPlatform,
+  useThemeLiteral,
+} from "../../shared/systemControls";
 import { t } from "../../shared/t";
 import {
   getElevationWrapperProps,
@@ -180,6 +187,12 @@ export interface SliderProps {
   /** When true, renders a skeleton placeholder instead of the slider */
   skeleton?: boolean;
   "aria-label"?: string;
+  /**
+   * LC-266: on iOS and Android a single-thumb horizontal slider renders the
+   * system slider when the binary carries `@react-native-community/slider`.
+   * `false` keeps the MPO slider there.
+   */
+  native?: boolean;
 }
 
 type SliderControlProps = {
@@ -219,6 +232,91 @@ type SliderControlProps = {
  * (track click, keyboard, controlled value change). Drag and first paint stay
  * transition-off so the handle never lags the pointer or wiggles on mount.
  */
+/**
+ * LC-266: the system slider (UISlider, Android SeekBar). The theme paints the
+ * fill and the rail, and the Android thumb; iOS keeps its system thumb. The
+ * value readout stays beside it, as on the MPO slider.
+ */
+function SystemSliderControl({
+  Component,
+  platform,
+  id,
+  value,
+  min,
+  max,
+  step,
+  disabled,
+  readOnly,
+  hasError,
+  accessibilityLabel,
+  accessibilityHint,
+  height,
+  onChangeValue,
+  onBlur,
+}: {
+  Component: SystemSliderComponent;
+  platform: SystemPlatform;
+  id: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  hasError?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  height: SizeTokens;
+  onChangeValue: (value: number) => void;
+  onBlur?: (...args: any[]) => void;
+}) {
+  const literal = useThemeLiteral();
+  const [displayValue, setDisplayValue] = useState(value);
+  useEffect(() => setDisplayValue(value), [value]);
+  const fill = literal(hasError ? formCommonColors.error : formSelectedColors.mark);
+  return (
+    <XStack height={height} alignItems="center" width="100%" gap="$3">
+      <View
+        flex={1}
+        minWidth={0}
+        justifyContent="center"
+        {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+        data-mp-system-control="slider"
+      >
+        <Component
+          id={id}
+          style={{ width: "100%" }}
+          value={value}
+          minimumValue={min}
+          maximumValue={max}
+          step={step}
+          disabled={disabled}
+          minimumTrackTintColor={fill}
+          maximumTrackTintColor={literal(formControlColors.background)}
+          {...(platform === "android" && { thumbTintColor: fill })}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          onValueChange={(next) => {
+            setDisplayValue(next);
+            if (disabled || readOnly) return;
+            onChangeValue(next);
+          }}
+          onSlidingComplete={() => onBlur?.()}
+        />
+      </View>
+      <Paragraph
+        size="$2"
+        color={formCommonColors.text}
+        minWidth={32}
+        textAlign="right"
+        aria-hidden
+      >
+        {formatSliderOutput([displayValue], step)}
+      </Paragraph>
+    </XStack>
+  );
+}
+
 function SliderControl({
   id,
   sliderValue,
@@ -712,6 +810,7 @@ export function Slider({
   sliderProps,
   skeleton,
   "aria-label": ariaLabel,
+  native = true,
 }: SliderProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
   // single emit site below (same reconciliation as Switch).
@@ -740,41 +839,70 @@ export function Slider({
     );
   }
 
+  const systemPlatform = native ? systemControlPlatform() : null;
+  const SystemSlider =
+    systemPlatform && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl"
+      ? loadSystemSlider()
+      : null;
+
   const control = (
     sliderValue: number[],
     isControlled: boolean,
     handleChange?: (values: number[]) => void,
     handleBlur?: (...args: any[]) => void,
     hasError?: boolean,
-  ) => (
-    <SliderControl
-      id={id}
-      sliderValue={sliderValue}
-      controlled={isControlled}
-      min={min}
-      max={max}
-      step={step}
-      disabled={disabled}
-      readOnly={readOnly}
-      required={required}
-      hasError={hasError}
-      hasLabel={hasLabel}
-      labelText={typeof label === "string" ? label : undefined}
-      aria-label={ariaLabel}
-      size={size}
-      sizeToken={knobProps.sizeToken}
-      outlined={knobProps.outlined}
-      borderRadius={knobProps.borderRadius.borderRadius}
-      transitionToken={transitionToken}
-      elevationWrapperProps={elevationWrapperProps}
-      sliderProps={sliderProps}
-      onChangeValues={(values) => {
-        handleChange?.(values);
-        handleValueChange(values);
-      }}
-      onBlur={handleBlur}
-    />
-  );
+    errorMessage?: string,
+  ) =>
+    SystemSlider && systemPlatform && sliderValue.length === 1 ? (
+      <SystemSliderControl
+        Component={SystemSlider}
+        platform={systemPlatform}
+        id={id}
+        value={sliderValue[0] ?? min}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        readOnly={readOnly}
+        hasError={hasError}
+        accessibilityLabel={ariaLabel ?? (typeof label === "string" ? label : undefined)}
+        accessibilityHint={errorMessage ?? helperText}
+        height={size || knobProps.sizeToken}
+        onChangeValue={(next) => {
+          handleChange?.([next]);
+          handleValueChange([next]);
+        }}
+        onBlur={handleBlur}
+      />
+    ) : (
+      <SliderControl
+        id={id}
+        sliderValue={sliderValue}
+        controlled={isControlled}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        hasError={hasError}
+        hasLabel={hasLabel}
+        labelText={typeof label === "string" ? label : undefined}
+        aria-label={ariaLabel}
+        size={size}
+        sizeToken={knobProps.sizeToken}
+        outlined={knobProps.outlined}
+        borderRadius={knobProps.borderRadius.borderRadius}
+        transitionToken={transitionToken}
+        elevationWrapperProps={elevationWrapperProps}
+        sliderProps={sliderProps}
+        onChangeValues={(values) => {
+          handleChange?.(values);
+          handleValueChange(values);
+        }}
+        onBlur={handleBlur}
+      />
+    );
 
   if (!resolvedForm || !name) {
     return (
@@ -789,7 +917,14 @@ export function Slider({
         knobProps={knobProps}
         disabled={disabled}
       >
-        {control(value ?? defaultValue ?? [min], value !== undefined, undefined, onBlur, !!error)}
+        {control(
+          value ?? defaultValue ?? [min],
+          value !== undefined,
+          undefined,
+          onBlur,
+          !!error,
+          typeof error === "string" && error ? error : undefined,
+        )}
       </FieldLayout>
     );
   }
@@ -832,6 +967,7 @@ export function Slider({
               },
               mergeFieldHandler(field, "handleBlur", onBlur),
               !!resolvedError,
+              typeof resolvedError === "string" && resolvedError ? resolvedError : undefined,
             )}
           </FieldLayout>
         );

package/src/fields/Stepper/Stepper.stories.tsx

@@ -5,10 +5,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 { Stepper } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Stepper> = {
   title: "Forms/Stepper",
@@ -60,7 +60,7 @@ export const Main: Story = {
             <Stepper label="Quantity" name="quantity" min={1} max={100} buttonPosition="both" />
             <Stepper label="Price" name="price" step={0.01} precision={2} min={0} />
             <Stepper label="Discount (%)" name="discount" min={0} max={50} step={5} />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Switch/Switch.system.native.spec.tsx

@@ -0,0 +1,162 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { useForm } from "@tanstack/react-form";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { Switch } from "./index";
+
+const platform = vi.hoisted(() => ({ os: "ios" as "ios" | "android" | null }));
+
+// The system Switch as a probe: it shows the props React Native's Switch got
+// and flips through onValueChange the way a tap on UISwitch does.
+const SystemSwitchProbe = vi.hoisted(
+  () =>
+    function SystemSwitchProbe(props: Record<string, any>) {
+      return (
+        <button
+          type="button"
+          data-testid="system-switch"
+          data-value={String(props.value)}
+          data-disabled={String(Boolean(props.disabled))}
+          data-track-on={props.trackColor?.true}
+          data-track-off={props.trackColor?.false}
+          data-ios-off={props.ios_backgroundColor}
+          data-thumb={props.thumbColor ?? ""}
+          data-label={props.accessibilityLabel ?? ""}
+          onClick={() => props.disabled || props.onValueChange?.(!props.value)}
+        />
+      );
+    },
+);
+
+vi.mock("../../shared/systemControls", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../shared/systemControls")>()),
+  systemControlPlatform: () => platform.os,
+  SystemSwitchView: SystemSwitchProbe,
+}));
+
+const mpoTheme = createDefaultThemeConfig();
+const renderInScheme = (ui: ReactElement, scheme: "light" | "dark") =>
+  render(
+    <TamaguiProvider config={mpoTheme.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+
+afterEach(cleanup);
+beforeEach(() => {
+  platform.os = "ios";
+});
+
+const literal = (value: string | null) => Boolean(value) && !value!.startsWith("$");
+
+function FormSwitch({ onSubmit }: { onSubmit: (value: { alerts: boolean }) => void }) {
+  const form = useForm({
+    defaultValues: { alerts: false },
+    onSubmit: ({ value }) => onSubmit(value),
+  });
+  return (
+    <Form form={form}>
+      <Switch name="alerts" label="Alerts" />
+      <button type="button" onClick={() => form.handleSubmit()}>
+        Save
+      </button>
+    </Form>
+  );
+}
+
+// LC-266 PLATFORM-ERGONOMICS (FZ-8117). iOS and Android render React Native's
+// own Switch, tinted from the theme; web and GNOME keep the MPO switch.
+describe("Switch on iOS and Android", () => {
+  it.each(["light", "dark"] as const)(
+    "renders the system switch with the %s theme's accent and off track as literals",
+    (scheme) => {
+      const result = renderInScheme(<Switch label="Alerts" defaultValue />, scheme);
+      const view = result.getByTestId("system-switch");
+      expect(view.dataset.value).toBe("true");
+      expect(literal(view.getAttribute("data-track-on"))).toBe(true);
+      expect(literal(view.getAttribute("data-track-off"))).toBe(true);
+      expect(view.getAttribute("data-ios-off")).toBe(view.getAttribute("data-track-off"));
+      expect(view.dataset.thumb).toBe("");
+      expect(view.dataset.label).toBe("Alerts");
+      expect(result.container.querySelector('[role="switch"]')).toBeNull();
+    },
+  );
+
+  it.each(["light", "dark"] as const)(
+    "paints the %s theme's off track and thumb on Android",
+    (scheme) => {
+      platform.os = "android";
+      const view = renderInScheme(<Switch label="Alerts" />, scheme).getByTestId("system-switch");
+      expect(literal(view.getAttribute("data-track-off"))).toBe(true);
+      expect(literal(view.getAttribute("data-thumb"))).toBe(true);
+    },
+  );
+
+  it("toggles standalone and reports through onChange and onCheckedChange", () => {
+    const onChange = vi.fn();
+    const onCheckedChange = vi.fn();
+    const result = renderWithProviders(
+      <Switch label="Alerts" onChange={onChange} onCheckedChange={onCheckedChange} />,
+    );
+    const view = result.getByTestId("system-switch");
+    fireEvent.click(view);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(onCheckedChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(view.dataset.value).toBe("true");
+  });
+
+  it("follows a controlled value", () => {
+    const result = renderWithProviders(<Switch label="Alerts" checked={false} />);
+    fireEvent.click(result.getByTestId("system-switch"));
+    expect(result.getByTestId("system-switch").dataset.value).toBe("false");
+    result.rerender(<Switch label="Alerts" checked />);
+    expect(result.getByTestId("system-switch").dataset.value).toBe("true");
+  });
+
+  it("passes disabled to the system switch and never changes a disabled or read-only value", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <>
+        <Switch label="Off limits" onChange={onChange} disabled />
+        <Switch label="Look only" onChange={onChange} readOnly />
+      </>,
+    );
+    const [disabledView, readOnlyView] = result.getAllByTestId("system-switch");
+    expect(disabledView!.dataset.disabled).toBe("true");
+    expect(readOnlyView!.dataset.disabled).toBe("false");
+    fireEvent.click(disabledView!);
+    fireEvent.click(readOnlyView!);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("writes the form field it is bound to", async () => {
+    const onSubmit = vi.fn();
+    const result = renderWithProviders(<FormSwitch onSubmit={onSubmit} />);
+    fireEvent.click(result.getByTestId("system-switch"));
+    fireEvent.click(result.getByText("Save"));
+    await vi.waitFor(() => expect(onSubmit).toHaveBeenCalledWith({ alerts: true }));
+  });
+
+  it("keeps the MPO switch for native={false}, track icons and switchProps", () => {
+    const result = renderWithProviders(
+      <>
+        <Switch label="Opted out" native={false} />
+        <Switch label="Iconed" leftIcon={<span>i</span>} />
+        <Switch label="Styled" switchProps={{ opacity: 1 }} />
+      </>,
+    );
+    expect(result.queryByTestId("system-switch")).toBeNull();
+    expect(result.container.querySelectorAll('[role="switch"]')).toHaveLength(3);
+  });
+
+  it("keeps the MPO switch on web and GNOME", () => {
+    platform.os = null;
+    const result = renderWithProviders(<Switch label="Alerts" />);
+    expect(result.queryByTestId("system-switch")).toBeNull();
+    expect(result.container.querySelector('[role="switch"]')).not.toBeNull();
+  });
+});