@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/FieldGroup.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Text, YStack, isWeb } from "tamagui";
 import { FormGrid, type FormGridColumns } from "./FormGrid";
-import { formFieldGap } from "./formSpacing";
 
 export interface FieldGroupProps {
   /** Visible legend / group label (required — DG-FORM-06 fieldset grouping). */
@@ -12,67 +12,71 @@ export interface FieldGroupProps {
    * that collapse on narrow containers via FormGrid.
    */
   columns?: FormGridColumns;
-  /** Gap between fields. Default: formFieldGap token. */
+  /**
+   * Gap between fields. Defaults to the space recipe (`knobProps.gap`).
+   * Density/space, never `sizeToken`.
+   */
   gap?: number | string;
+  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
+  compact?: boolean;
 }
 
 /**
  * Groups related fields with a legend (fieldset on web).
  *
- * Field gap uses {@link formFieldGap}; nest inside {@link FormSection} so
- * section spacing stays larger than field spacing.
+ * Polaris FormLayout.Group / GOV.UK fieldset: related short fields only
+ * (name, city/postcode). Field gap follows the space knob; nest inside
+ * {@link FormSection} so section spacing stays larger than field spacing.
  */
-export function FieldGroup({ legend, children, columns = 1, gap = formFieldGap }: FieldGroupProps) {
+export function FieldGroup({ legend, children, columns = 1, gap, compact }: FieldGroupProps) {
+  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const resolvedGap = gap ?? knobProps.gap.gap;
+  const useFieldset = isWeb;
   const body =
     columns > 1 ? (
-      <FormGrid columns={columns} gap={typeof gap === "number" ? gap : undefined}>
+      <FormGrid columns={columns} gap={resolvedGap} compact={compact}>
         {children}
       </FormGrid>
     ) : (
-      <YStack gap={gap as any} width="100%">
-        {children}
-      </YStack>
-    );
-
-  if (isWeb) {
-    return (
-      <fieldset
-        data-mpo-field-group=""
-        data-columns={columns}
-        style={{
-          border: "none",
-          margin: 0,
-          padding: 0,
-          minWidth: 0,
-          width: "100%",
-        }}
-      >
-        <legend
-          style={{
-            padding: 0,
-            marginBottom: 8,
-            fontWeight: 600,
-            float: "left",
-            width: "100%",
-          }}
-        >
-          {legend}
-        </legend>
-        <div style={{ clear: "both", width: "100%" }}>{body}</div>
-      </fieldset>
+      children
     );
-  }
 
   return (
     <YStack
+      {...(useFieldset ? { render: "fieldset" as const } : {})}
       data-mpo-field-group=""
       data-columns={columns}
-      gap={formFieldGap}
+      data-field-gap={String(resolvedGap)}
+      data-density={knobProps.density}
+      data-size={knobProps.size}
+      gap={resolvedGap as never}
       width="100%"
-      accessibilityRole="summary"
-      accessibilityLabel={legend}
+      minWidth={0}
+      {...(useFieldset
+        ? {
+            style: {
+              borderWidth: 0,
+              margin: 0,
+              minWidth: 0,
+              padding: 0,
+            } as Record<string, unknown>,
+          }
+        : {})}
     >
-      <Text fontWeight="600">{legend}</Text>
+      {useFieldset ? (
+        <Text
+          render="legend"
+          {...knobProps.label}
+          {...knobProps.heading}
+          style={{ padding: 0, marginBottom: 0, float: "left", width: "100%" } as never}
+        >
+          {legend}
+        </Text>
+      ) : (
+        <Text {...knobProps.label} {...knobProps.heading} role="heading" aria-level={3}>
+          {legend}
+        </Text>
+      )}
       {body}
     </YStack>
   );

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -0,0 +1,263 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useState, type ReactNode } from "react";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+
+/**
+ * The trigger contract, and why every case fires a REAL press rather than
+ * calling `onOpenChange` directly.
+ *
+ * `trigger` is a slot: the wrapper around it is what opens the panel, so the
+ * press has to travel from whatever the consumer put in the slot out to that
+ * wrapper. Tamagui's press wrapper calls `e.stopPropagation()` on any
+ * component carrying its own `onPress`/`onClick` (`@tamagui/web`
+ * `createComponent`, the `onPress` branch — and ONLY that branch), so a
+ * pressable trigger swallowed the click:
+ *
+ *   - SHEET mode, whose only opener was the wrapper's bubble-phase `onPress`,
+ *     was dead by pointer AND by keyboard.
+ *   - FLOAT mode survived the pointer, because floating-ui listens on
+ *     mousedown, which Tamagui does not stop — but keyboard activation
+ *     arrives as the click the Button synthesizes (LC-50), so it was dead.
+ *
+ * A test that pressed the WRAPPER instead of the Button would have passed
+ * against both, which is why every case here presses the pressable.
+ */
+
+/** A real pointer press: `detail >= 1` is what a browser sends for a click. */
+const pointerPress = (el: Element) => {
+  fireEvent.mouseDown(el, { detail: 1 });
+  fireEvent.mouseUp(el, { detail: 1 });
+  fireEvent.click(el, { detail: 1 });
+};
+
+function Harness({
+  trigger,
+  disabled,
+  sheet,
+  onOpenChange,
+  extra,
+}: {
+  trigger: ReactNode;
+  disabled?: boolean;
+  sheet?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  extra?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      {/* Sheet mode renders through a Tamagui Sheet, which has no stable
+          marker attribute; the controlled state IS the component's output
+          contract, so the harness paints it. Float mode is asserted on the
+          real panel element instead. */}
+      <Text>{open ? "state:open" : "state:shut"}</Text>
+      <FloatingPanel
+        open={open}
+        onOpenChange={(next) => {
+          onOpenChange?.(next);
+          setOpen(next);
+        }}
+        trigger={trigger}
+        disabled={disabled}
+        sheet={sheet}
+      >
+        <Text>panel body</Text>
+        {extra}
+      </FloatingPanel>
+    </>
+  );
+}
+
+const isOpen = (result: { container: HTMLElement }) =>
+  !!Array.from(result.container.querySelectorAll("*")).some(
+    (el) => el.children.length === 0 && el.textContent === "state:open",
+  );
+
+const floatingViewport = () => document.querySelector('[data-testid="floating-panel-viewport"]');
+
+/** The DEEPEST node carrying the whole label — several ancestors report the
+ *  same `textContent`, and pressing one of those would sidestep the very
+ *  swallow these cases exist to catch. */
+const labelInside = (result: { container: HTMLElement }, text: string) =>
+  Array.from(result.container.querySelectorAll("span")).findLast((el) => el.textContent === text);
+
+describe("FloatingPanel trigger — sheet mode", () => {
+  it("a pressable trigger (Button) opens the panel", async () => {
+    const result = renderWithProviders(<Harness sheet trigger={<Button>Open Panel</Button>} />);
+    const button = result.container.querySelector("[role='button']");
+    expect(button).not.toBeNull();
+    pointerPress(button as Element);
+    await waitFor(() => {
+      expect(isOpen(result)).toBe(true);
+    });
+  });
+
+  it("pressing the label inside a Button trigger opens the panel", async () => {
+    const result = renderWithProviders(<Harness sheet trigger={<Button>Open Panel</Button>} />);
+    const label = labelInside(result, "Open Panel");
+    expect(label).toBeDefined();
+    expect(label?.closest("[role='button']")).not.toBeNull();
+    pointerPress(label as Element);
+    await waitFor(() => {
+      expect(isOpen(result)).toBe(true);
+    });
+  });
+
+  // Axiom 12 LEGIBLE FLOOR: Button synthesizes a click on Enter/Space so
+  // keyboard activation rides the same path as a pointer press.
+  it.each(["Enter", " "])("keyboard %s on a Button trigger opens the panel", async (key) => {
+    const result = renderWithProviders(<Harness sheet trigger={<Button>Open Panel</Button>} />);
+    fireEvent.keyDown(result.container.querySelector("[role='button']") as Element, { key });
+    await waitFor(() => {
+      expect(isOpen(result)).toBe(true);
+    });
+  });
+
+  // The path that already worked, and the one the capture-phase opener could
+  // break: both openers see this press, so a toggle-shaped second call would
+  // shut the sheet again.
+  it("a non-pressable trigger opens the panel and stays open", async () => {
+    const result = renderWithProviders(<Harness sheet trigger={<Text>Open Panel</Text>} />);
+    const label = Array.from(result.container.querySelectorAll("*")).find(
+      (el) => el.textContent === "Open Panel" && el.children.length === 0,
+    );
+    pointerPress(label as Element);
+    await waitFor(() => {
+      expect(isOpen(result)).toBe(true);
+    });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(isOpen(result)).toBe(true);
+  });
+
+  it("disabled: a pressable trigger opens nothing", async () => {
+    const result = renderWithProviders(
+      <Harness sheet disabled trigger={<Button>Open Panel</Button>} />,
+    );
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(isOpen(result)).toBe(false);
+  });
+
+  it("disabled: keyboard activation opens nothing", async () => {
+    const result = renderWithProviders(
+      <Harness sheet disabled trigger={<Button>Open Panel</Button>} />,
+    );
+    fireEvent.keyDown(result.container.querySelector("[role='button']") as Element, {
+      key: "Enter",
+    });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(isOpen(result)).toBe(false);
+  });
+});
+
+describe("FloatingPanel trigger — floating mode", () => {
+  it.each(["Enter", " "])("keyboard %s on a Button trigger opens the panel", async (key) => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Panel</Button>} />);
+    fireEvent.keyDown(result.container.querySelector("[role='button']") as Element, { key });
+    await waitFor(() => {
+      expect(floatingViewport()).not.toBeNull();
+    });
+  });
+
+  it("a pressable trigger still opens on pointer (floating-ui's mousedown path)", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Panel</Button>} />);
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => {
+      expect(floatingViewport()).not.toBeNull();
+    });
+  });
+
+  it("a non-pressable trigger opens the panel", async () => {
+    const result = renderWithProviders(<Harness trigger={<Text>Open Panel</Text>} />);
+    const label = Array.from(result.container.querySelectorAll("*")).find(
+      (el) => el.textContent === "Open Panel" && el.children.length === 0,
+    );
+    pointerPress(label as Element);
+    await waitFor(() => {
+      expect(floatingViewport()).not.toBeNull();
+    });
+  });
+
+  // The gate that keeps the capture opener out of the pointer path. Floating
+  // mode toggles closed on mousedown when the panel is already open; if the
+  // capture handler ran for that click too it would immediately re-open what
+  // the mousedown just closed. `detail` is what separates them — measured on
+  // the real specimen in `p-results/trigger-slot/detail.json`: a pointer click
+  // carries the click count, `element.click()` and native keyboard activation
+  // carry 0.
+  it("a pointer-shaped click (detail >= 1) does not drive the capture opener", async () => {
+    const onOpenChange = vi.fn();
+    const result = renderWithProviders(
+      <Harness trigger={<Button>Open Panel</Button>} onOpenChange={onOpenChange} />,
+    );
+    fireEvent.click(result.container.querySelector("[role='button']") as Element, { detail: 1 });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("a synthesized click (detail 0) does drive the capture opener", async () => {
+    const onOpenChange = vi.fn();
+    const result = renderWithProviders(
+      <Harness trigger={<Button>Open Panel</Button>} onOpenChange={onOpenChange} />,
+    );
+    fireEvent.click(result.container.querySelector("[role='button']") as Element, { detail: 0 });
+    await waitFor(() => {
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  it("disabled: keyboard activation opens nothing", async () => {
+    const result = renderWithProviders(<Harness disabled trigger={<Button>Open Panel</Button>} />);
+    fireEvent.keyDown(result.container.querySelector("[role='button']") as Element, {
+      key: "Enter",
+    });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    expect(floatingViewport()).toBeNull();
+  });
+
+  it("keyboard open moves focus to the first inner control, not the chrome (LC-71)", async () => {
+    const result = renderWithProviders(
+      <Harness
+        trigger={<Button>Open Panel</Button>}
+        extra={
+          <Button data-testid="panel-close" onPress={() => undefined}>
+            Close
+          </Button>
+        }
+      />,
+    );
+    const trigger = result.container.querySelector("[role='button']") as HTMLElement;
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    await waitFor(() => {
+      expect(floatingViewport()).not.toBeNull();
+    });
+    await waitFor(() => {
+      expect(document.activeElement).toBe(document.querySelector("[data-testid='panel-close']"));
+    });
+    const chrome = floatingViewport() as HTMLElement;
+    const outline = getComputedStyle(chrome).outlineWidth;
+    expect(outline === "0px" || outline === "" || outline === "0").toBe(true);
+  });
+
+  it("Escape returns focus to the trigger (LC-48 / LC-71)", async () => {
+    const result = renderWithProviders(<Harness trigger={<Button>Open Panel</Button>} />);
+    const trigger = result.container.querySelector("[role='button']") as HTMLElement;
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    await waitFor(() => {
+      expect(floatingViewport()).not.toBeNull();
+    });
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => {
+      expect(floatingViewport()).toBeNull();
+    });
+    await waitFor(() => {
+      expect(document.activeElement).toBe(trigger);
+    });
+  });
+});

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { H4, Paragraph, Separator, Text, View, YStack } from "tamagui";
 import { FloatingPanel } from "./index";
-import { Input as InputParts } from "../InputParts";
+import { Button } from "../Button";
 import { formCommonColors } from "../shared/colorRamps";
 
 const meta: Meta<typeof FloatingPanel> = {
@@ -33,22 +33,16 @@ export const Basic: Story = {
         <FloatingPanel
           open={open}
           onOpenChange={setOpen}
-          trigger={
-            <InputParts.Box cursor="pointer">
-              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
-                <Text>{open ? "Panel is open" : "Click to open panel"}</Text>
-              </View>
-            </InputParts.Box>
-          }
+          trigger={<Button>{open ? "Panel is open" : "Click to open panel"}</Button>}
         >
           <YStack gap="$3">
             <H4>Panel Content</H4>
             <Paragraph>
-              This is a floating panel built on Tamagui Sheet. It has a proper overlay, slide-up
-              animation, and drag-to-dismiss.
+              Anchored to the trigger with a gap, never covering it. Escape or an outside click
+              dismisses and returns focus.
             </Paragraph>
             <Separator />
-            <Paragraph color={formCommonColors.muted}>Drag down or tap overlay to close.</Paragraph>
+            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>
@@ -69,13 +63,7 @@ export const ScrollableContent: Story = {
           open={open}
           onOpenChange={setOpen}
           scrollable
-          trigger={
-            <InputParts.Box cursor="pointer">
-              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
-                <Text>{open ? "Scrollable panel open" : "Click for scrollable panel"}</Text>
-              </View>
-            </InputParts.Box>
-          }
+          trigger={<Button>{open ? "Scrollable panel open" : "Click for scrollable panel"}</Button>}
         >
           <YStack>
             {items.map((item) => (
@@ -106,13 +94,7 @@ export const Disabled: Story = {
           open={open}
           onOpenChange={setOpen}
           disabled
-          trigger={
-            <InputParts.Box cursor="not-allowed" opacity={0.5}>
-              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
-                <Text>Disabled trigger</Text>
-              </View>
-            </InputParts.Box>
-          }
+          trigger={<Button disabled>Disabled trigger</Button>}
         >
           <YStack>
             <Paragraph>You should never see this.</Paragraph>
@@ -138,13 +120,7 @@ export const FillSizing: Story = {
           onOpenChange={setOpen}
           scrollable
           sizing="fill"
-          trigger={
-            <InputParts.Box cursor="pointer">
-              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
-                <Text>{open ? "Fill panel open" : "Click for fill-sized panel"}</Text>
-              </View>
-            </InputParts.Box>
-          }
+          trigger={<Button>{open ? "Fill panel open" : "Click for fill-sized panel"}</Button>}
         >
           <YStack>
             {items.map((item) => (
@@ -178,17 +154,12 @@ export const ForceSheet: Story = {
           open={open}
           onOpenChange={setOpen}
           sheet
-          trigger={
-            <InputParts.Box cursor="pointer">
-              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
-                <Text>{open ? "Sheet open" : "Click for Sheet (forced)"}</Text>
-              </View>
-            </InputParts.Box>
-          }
+          trigger={<Button>{open ? "Sheet open" : "Click for Sheet (forced)"}</Button>}
         >
           <YStack gap="$3">
             <H4>Forced Sheet</H4>
             <Paragraph>This panel always uses Sheet, even on large screens.</Paragraph>
+            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>

package/src/FloatingPanel/index.native.tsx

@@ -41,7 +41,7 @@ import {
   useWindowDimensions,
   View as RNView,
 } from "react-native";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { t } from "../shared/t";
 import type { FloatingPanelProps } from "./index";
@@ -182,7 +182,7 @@ export function FloatingPanel({
             accessibilityRole="button"
             accessibilityLabel={t("Close")}
           >
-            <View flex={1} backgroundColor="rgba(0,0,0,0.4)" />
+            <View flex={1} backgroundColor="$shadow6" />
           </Pressable>
           {/*
             Sheet sits above the absoluteFill backdrop in z-order (later sibling).
@@ -190,16 +190,15 @@ export function FloatingPanel({
             from option rows / calendar days and blocks commit.
           */}
           <YStack
-            backgroundColor="$background"
-            borderTopLeftRadius="$6"
-            borderTopRightRadius="$6"
+            {...knobProps.elevatedSurface}
+            borderBottomLeftRadius={0}
+            borderBottomRightRadius={0}
             maxHeight={maxHeight}
             // sheetFill opens at full sheet height (flexShrink keeps the
             // keyboard from pushing the top of the sheet off-screen).
             {...(sheetFill ? { height: maxHeight, flexShrink: 1 } : undefined)}
             paddingTop="$2"
             paddingBottom={bottomInset}
-            elevation="$4"
             // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
             onAccessibilityEscape={close}
           >
@@ -217,8 +216,10 @@ export function FloatingPanel({
               flexShrink={1}
               {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
             >
-              {header}
-              {content}
+              <Surface size="md">
+                {header}
+                {content}
+              </Surface>
             </YStack>
           </YStack>
         </KeyboardAvoidingView>