@multiplatform.one/forms 7.6.2 → 7.7.0

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -8,15 +8,32 @@ import { Switch } from "../fields/Switch";
 import { Form } from "../Form";
 import { ContextualSaveBar } from "./index";
 
+const fields = (
+  <YStack gap="$4" width="100%" maxWidth={640} padding="$4" minHeight={360}>
+    <Input name="name" label="Service name" />
+    <Checkbox name="agree" label="Notify on deploy" />
+    <RadioGroup
+      name="env"
+      label="Environment"
+      options={[
+        { label: "Prod", value: "prod" },
+        { label: "Stage", value: "stage" },
+      ]}
+    />
+    <Switch name="live" label="Live" />
+  </YStack>
+);
+
 const meta: Meta<typeof ContextualSaveBar> = {
   title: "Forms/ContextualSaveBar",
   component: ContextualSaveBar,
   parameters: {
-    status: { type: "beta" },
+    layout: "fullscreen",
+    status: { type: "stable" },
     docs: {
       description: {
         component:
-          "Declarative dirty-state Save/Discard bar (DG-ACT-06). Text, checkbox, and radio stage; Switch auto-commits and never raises the bar. Discard is never disabled (LC-30).",
+          "Declarative dirty-state Save/Discard bar (DG-ACT-06). Text, checkbox, and radio stage; Switch auto-commits and never raises the bar. Discard is never disabled (LC-30). Frame is CONTAINER-CAP on the top pair only; bottom pair stays 0 (bottom-docked sheet).",
       },
     },
   },
@@ -29,7 +46,11 @@ export const Main: Story = {
   name: "Main",
   render: () => (
     <Form
-      saveBar={{ onSaved: action("onSaved"), onAutoCommit: action("onAutoCommit") }}
+      saveBar={{
+        forceVisible: true,
+        onSaved: action("onSaved"),
+        onAutoCommit: action("onAutoCommit"),
+      }}
       formOptions={{
         defaultValues: {
           name: "svc",
@@ -42,31 +63,29 @@ export const Main: Story = {
         action("onSubmit")(values);
       }}
     >
-      <YStack gap="$4" width="100%" maxWidth={640} padding="$4">
-        <Input name="name" label="Service name" />
-        <Checkbox name="agree" label="Notify on deploy" />
-        <RadioGroup
-          name="env"
-          label="Environment"
-          options={[
-            { label: "Prod", value: "prod" },
-            { label: "Stage", value: "stage" },
-          ]}
-        />
-        <Switch name="live" label="Live" />
-      </YStack>
+      {fields}
     </Form>
   ),
 };
 
-export const ForceVisible: Story = {
-  name: "Force visible",
+export const Dirty: Story = {
+  name: "Dirty",
   render: () => (
-    <Form formOptions={{ defaultValues: { name: "svc" } }}>
-      <YStack gap="$4" width="100%" maxWidth={640} padding="$4">
-        <Input name="name" label="Service name" />
-        <ContextualSaveBar forceVisible />
-      </YStack>
+    <Form
+      saveBar={{ onSaved: action("onSaved"), onAutoCommit: action("onAutoCommit") }}
+      formOptions={{
+        defaultValues: {
+          name: "svc",
+          agree: false,
+          env: "prod",
+          live: false,
+        },
+      }}
+      onSubmit={async (values) => {
+        action("onSubmit")(values);
+      }}
+    >
+      {fields}
     </Form>
   ),
 };

package/src/ContextualSaveBar/UnsavedChangesDialog.spec.tsx

@@ -0,0 +1,167 @@
+/**
+ * UnsavedChangesDialog — the route-leave confirm (DG-OVL-02), MPO-143.
+ *
+ * ContextualSaveBar.spec.tsx reaches this dialog through the save bar, which
+ * proves the wiring but never exercises the dialog's own contract: the two
+ * copy branches, which button calls which callback, and the guard that stops an
+ * outside click from dismissing a destructive confirm. Those are the parts a
+ * refactor of the save bar would carry away without noticing.
+ */
+import { cleanup, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
+
+afterEach(cleanup);
+
+function dialog(): HTMLElement | null {
+  return document.body.querySelector('[role="alertdialog"]');
+}
+
+function button(marker: string): HTMLElement {
+  const node = document.body.querySelector(`[${marker}]`);
+  if (!node) throw new Error(`No button carrying ${marker}`);
+  return node as HTMLElement;
+}
+
+function noop() {}
+
+/** Tamagui paints through atomic classes; read the inline channel first. */
+function cssOf(node: HTMLElement, prop: string): string {
+  const inline = node.style.getPropertyValue(prop);
+  if (inline) return inline;
+  return getComputedStyle(node).getPropertyValue(prop) || "";
+}
+
+describe("UnsavedChangesDialog", () => {
+  it("renders nothing while closed", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open={false} fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()).toBeNull();
+  });
+
+  it("announces as an alertdialog, not a plain dialog, because the choice is destructive", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()).toBeTruthy();
+    expect(document.body.querySelector('[role="dialog"][data-mp-savebar-guard]')).toBeNull();
+  });
+
+  it("leads with the question, so the title carries the decision", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.textContent).toContain("Discard unsaved changes?");
+  });
+
+  it("uses the singular sentence for exactly one edited field", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={1} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    const text = dialog()?.textContent ?? "";
+    expect(text).toContain("1 field on this page has edits");
+    expect(text).not.toContain("fields on this page have");
+  });
+
+  it("uses the plural sentence, with the count interpolated, for more than one", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={4} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    const text = dialog()?.textContent ?? "";
+    expect(text).toContain("4 fields on this page have edits");
+    expect(text).not.toContain("1 field on this page has");
+  });
+
+  it("says plainly that leaving discards the edits", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.textContent).toContain("Leaving discards them");
+  });
+
+  it("offers both a way back and a way out", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(button("data-mp-savebar-keep").textContent).toContain("Keep editing");
+    expect(button("data-mp-savebar-discard-confirm").textContent).toContain("Discard changes");
+  });
+
+  it("calls onKeepEditing, and only that, when the safe button is pressed", () => {
+    const onKeepEditing = vi.fn();
+    const onDiscard = vi.fn();
+    renderWithProviders(
+      <UnsavedChangesDialog
+        open
+        fieldCount={2}
+        onKeepEditing={onKeepEditing}
+        onDiscard={onDiscard}
+      />,
+    );
+    fireEvent.click(button("data-mp-savebar-keep"));
+    expect(onKeepEditing).toHaveBeenCalledTimes(1);
+    expect(onDiscard).not.toHaveBeenCalled();
+  });
+
+  it("calls onDiscard, and only that, when the destructive button is pressed", () => {
+    const onKeepEditing = vi.fn();
+    const onDiscard = vi.fn();
+    renderWithProviders(
+      <UnsavedChangesDialog
+        open
+        fieldCount={2}
+        onKeepEditing={onKeepEditing}
+        onDiscard={onDiscard}
+      />,
+    );
+    fireEvent.click(button("data-mp-savebar-discard-confirm"));
+    expect(onDiscard).toHaveBeenCalledTimes(1);
+    expect(onKeepEditing).not.toHaveBeenCalled();
+  });
+
+  it("treats any dismissal as keep-editing, never as a silent discard", () => {
+    const onKeepEditing = vi.fn();
+    const onDiscard = vi.fn();
+    renderWithProviders(
+      <UnsavedChangesDialog
+        open
+        fieldCount={2}
+        onKeepEditing={onKeepEditing}
+        onDiscard={onDiscard}
+      />,
+    );
+    fireEvent.keyDown(dialog() as HTMLElement, { key: "Escape", code: "Escape" });
+    expect(onDiscard).not.toHaveBeenCalled();
+  });
+
+  it("marks the content so the save bar's outside-click guard can find it", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.hasAttribute("data-mp-savebar-guard")).toBe(true);
+  });
+
+  it("takes focus itself rather than leaving it behind the overlay", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(dialog()?.getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("paints no focus outline on the sheet itself, so the ring stays on the buttons", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    const outline = cssOf(dialog() as HTMLElement, "outline-width");
+    expect(outline === "" || outline === "0px").toBe(true);
+  });
+
+  it("caps its width so the sentence never runs the width of a desk monitor", () => {
+    renderWithProviders(
+      <UnsavedChangesDialog open fieldCount={2} onKeepEditing={noop} onDiscard={noop} />,
+    );
+    expect(cssOf(dialog() as HTMLElement, "max-width")).toBe("440px");
+  });
+});

package/src/ContextualSaveBar/index.tsx

@@ -120,6 +120,14 @@ function barRadius(knobProps: KnobProps) {
   };
 }
 
+function containerRadiusRest(knobProps: KnobProps) {
+  const fragment = knobProps.containerRadius as KnobProps["containerRadius"] & {
+    className?: string;
+  };
+  const { className, borderRadius: _topPair, ...rest } = fragment;
+  return { className, rest };
+}
+
 export function ContextualSaveBar({
   forceVisible = false,
   discardDisabled = false,
@@ -211,10 +219,8 @@ export function ContextualSaveBar({
   const padX = knobProps.panelPadding.padding;
   const borderWidth = knobProps.borderRadius.borderWidth;
   const elevationProps = getElevationWrapperProps(knobProps, elevation);
-  const { className: smoothClass, ...smoothRest } =
-    knobProps.containerRadius as KnobProps["containerRadius"] & {
-      className?: string;
-    };
+  const { className: smoothClass, rest: smoothRest } = containerRadiusRest(knobProps);
+  const topRadius = knobProps.containerRadius.borderRadius;
   const transition = knobProps.transition;
 
   return (
@@ -225,6 +231,9 @@ export function ContextualSaveBar({
             key="contextual-savebar"
             data-mp-contextual-savebar=""
             data-mp-savebar-dock="bottom"
+            data-mp-savebar-radius-class="CONTAINER-CAP"
+            data-mp-savebar-top-radius={String(topRadius)}
+            data-mp-savebar-bottom-radius="0"
             role="region"
             aria-label={t("Unsaved changes")}
             position="sticky"
@@ -243,13 +252,13 @@ export function ContextualSaveBar({
             borderRightWidth={0}
             borderBottomWidth={0}
             {...smoothRest}
-            {...barRadius(knobProps)}
             className={smoothClass}
             {...knobProps.gap}
             transition={transition}
             enterStyle={transition ? { y: 12, opacity: 0 } : undefined}
             exitStyle={transition ? { y: 12, opacity: 0 } : undefined}
             {...elevationProps}
+            {...barRadius(knobProps)}
             style={{
               ...(isWeb
                 ? { paddingBottom: "calc(10px + env(safe-area-inset-bottom, 0px))" }

package/src/DescriptionList/DescriptionList.spec.tsx

@@ -138,7 +138,9 @@ describe("DescriptionList", () => {
     });
     const root = list(result.container);
     expect(root?.getAttribute("data-stacked")).toBe("false");
-    expect(root?.style.gridTemplateColumns).toContain("min(max-content, 24ch)");
+    expect(root?.getAttribute("data-label-column-width")).toBe("min(max-content, 24ch)");
+    expect(root?.style.gridTemplateColumns).toContain("fit-content(24ch)");
+    expect(root?.style.gridTemplateColumns).toContain("minmax(0, 1fr)");
   });
 
   it("the optional Change action is a keyboard-reachable button", () => {
@@ -251,4 +253,20 @@ describe("DescriptionList", () => {
     );
     expect(list(result.container)?.getAttribute("data-compact")).toBe("true");
   });
+
+  it("side rows share the list stacked flag (native host measures via onLayout)", () => {
+    stubContainerWidth(280);
+    let result!: ReturnType<typeof renderWithProviders>;
+    act(() => {
+      result = renderWithProviders(
+        <DescriptionList
+          placement="side"
+          items={[{ term: "Hostname", field: "input", value: "compose01" }]}
+        />,
+      );
+    });
+    const root = list(result.container);
+    expect(root?.getAttribute("data-stacked")).toBe("true");
+    expect(root?.querySelectorAll("[data-mpo-description-list-row]").length).toBe(1);
+  });
 });

package/src/DescriptionList/DescriptionList.stories.tsx

@@ -7,7 +7,7 @@ import { DescriptionList, type DescriptionListItem } from "./index";
 const meta: Meta<typeof DescriptionList> = {
   title: "Forms/DescriptionList",
   component: DescriptionList,
-  parameters: { status: { type: "beta" } },
+  parameters: { status: { type: "stable" } },
   argTypes: {
     placement: { control: "radio", options: ["side", "top"] },
     compact: { control: "boolean" },
@@ -67,6 +67,10 @@ const HOST: DescriptionListItem[] = [
   { term: "Decommissioned", field: "input", value: null },
 ];
 
+export const Default: Story = {
+  render: (args) => <DescriptionList {...args} items={HOST} />,
+};
+
 export const Anatomy: Story = {
   name: "Anatomy — term · value · Change",
   render: (args) => <DescriptionList {...args} items={HOST} />,

package/src/DescriptionList/index.tsx

@@ -87,6 +87,15 @@ function purposeMaxCh(): number {
   return LABEL_COLUMN_MAX_CH;
 }
 
+function labelColumnGridTrack(width: string): string {
+  const prefix = "min(max-content,";
+  if (width.startsWith(prefix) && width.endsWith(")")) {
+    const inner = width.slice(prefix.length, -1).trim();
+    if (inner.endsWith("ch")) return `fit-content(${inner})`;
+  }
+  return width;
+}
+
 function listItemRhythm(density: string) {
   const compact = density === "compact";
   return {
@@ -320,18 +329,32 @@ function DescriptionListWeb({
   placement: DescriptionListPlacement;
   framed: boolean;
 }) {
+  // Write tracks after commit: React's style setter (and invalid `min()`
+  // track syntax) otherwise leave a one-column computed grid.
+  const columns = stacked
+    ? undefined
+    : hasAction
+      ? `${labelColumnGridTrack(labelColumnWidth)} minmax(0, 1fr) max-content`
+      : `${labelColumnGridTrack(labelColumnWidth)} minmax(0, 1fr)`;
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+    if (columns) {
+      el.style.setProperty("grid-template-columns", columns);
+    } else {
+      el.style.removeProperty("grid-template-columns");
+    }
+  }, [columns]);
+
   const style: CSSProperties = stacked
-    ? { display: "block", width: "100%" }
-    : {
-        display: "grid",
-        gridTemplateColumns: hasAction
-          ? `${labelColumnWidth} minmax(0, 1fr) max-content`
-          : `${labelColumnWidth} minmax(0, 1fr)`,
-        width: "100%",
-      };
+    ? { display: "block", width: "100%", minWidth: 0 }
+    : { display: "grid", width: "100%", minWidth: 0 };
 
   return (
-    <YStack
+    <div
+      ref={listRef}
       data-mpo-description-list=""
       data-placement={placement}
       data-stacked={stacked ? "true" : "false"}
@@ -342,8 +365,6 @@ function DescriptionListWeb({
       data-label-column-width={labelColumnWidth}
       data-density={density}
       data-size={size}
-      width="100%"
-      minWidth={0}
       style={style}
     >
       {rows.map((row, index) => (
@@ -357,17 +378,26 @@ function DescriptionListWeb({
           quiet={quiet}
         />
       ))}
-    </YStack>
+    </div>
   );
 }
 
-function useContainerWide(enabled: boolean): { ref: Ref<unknown>; wide: boolean } {
+type HostLayoutEvent = { nativeEvent: { layout: { width: number } } };
+
+function useContainerWide(enabled: boolean): {
+  ref: Ref<unknown>;
+  wide: boolean;
+  onLayout: ((event: HostLayoutEvent) => void) | undefined;
+} {
   const ref = useRef<HTMLDivElement>(null);
-  const [wide, setWide] = useState(true);
+  // Web assumes wide until measured (desktop stories). Native assumes stacked
+  // until onLayout — phones sit under the 480 collapse.
+  const [wide, setWide] = useState(isWeb);
 
   useLayoutEffect(() => {
+    if (!isWeb || !enabled) return;
     const el = ref.current;
-    if (!el || !enabled) {
+    if (!el) {
       setWide(true);
       return;
     }
@@ -392,7 +422,14 @@ function useContainerWide(enabled: boolean): { ref: Ref<unknown>; wide: boolean
     return () => ro.disconnect();
   }, [enabled]);
 
-  return { ref, wide };
+  const onLayout =
+    !isWeb && enabled
+      ? (event: HostLayoutEvent) => {
+          setWide(event.nativeEvent.layout.width >= FORM_GRID_COLLAPSE_WIDTH);
+        }
+      : undefined;
+
+  return { ref, wide, onLayout };
 }
 
 export function DescriptionList({
@@ -415,8 +452,8 @@ export function DescriptionList({
     return itemsFromChildren(children);
   }, [items, children]);
   const hasAction = rows.some(rowHasAction);
-  const measureCollapse = placement === "side" && isWeb;
-  const { ref, wide } = useContainerWide(measureCollapse);
+  const measureCollapse = placement === "side";
+  const { ref, wide, onLayout } = useContainerWide(measureCollapse);
   const stacked = placement === "top" || (placement === "side" && !wide);
 
   const list = (
@@ -453,7 +490,7 @@ export function DescriptionList({
             <DescriptionListRowView
               key={index}
               row={row}
-              stacked={true}
+              stacked={stacked}
               hasActionColumn={hasAction}
               rhythm={rhythm}
               showRule={index > 0}
@@ -476,6 +513,7 @@ export function DescriptionList({
       ref={ref as never}
       data-mpo-description-list-host=""
       data-testid={testID}
+      onLayout={onLayout}
       minWidth={0}
       {...widthProps}
       {...(framed

package/src/ErrorSummary.tsx

@@ -1,4 +1,4 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { FOCUS_RING_HALO_OFFSET, useResolvedKnobs } from "@multiplatform.one/theme";
 import { WarningCircleIcon } from "@phosphor-icons/react";
 import { type ReactNode, useEffect, useId, useRef } from "react";
 import { Anchor, H4, Paragraph, YStack, isWeb } from "tamagui";
@@ -152,7 +152,10 @@ export function ErrorSummary({
         outlineWidth: 2,
         outlineStyle: "solid",
         outlineColor: "$color8",
-        outlineOffset: 2,
+        // LC-71 §4 halo: inline text link. The summary sits in a run of prose,
+        // so a band at offset 0 crosses the line box and collides with the
+        // ascenders/descenders around it.
+        outlineOffset: FOCUS_RING_HALO_OFFSET,
       }}
       data-testid="error-summary"
     >

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -24,8 +24,8 @@ const fieldsDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "fields
 /** Pickers whose trigger is a form FIELD: the panel may never be narrower. */
 const fieldShapedPickers = [
   "DatePicker/parts.tsx",
-  "DatePicker/DatetimePicker.tsx",
-  "TimePicker/index.tsx",
+  "DatePicker/DatetimePicker.catalog.tsx",
+  "TimePicker/catalog.tsx",
   "ColorPicker/parts.tsx",
   "Icon/index.tsx",
 ];