@multiplatform.one/forms 7.6.3 → 7.7.1

package/src/Wheel/wheelStories.spec.tsx

@@ -0,0 +1,143 @@
+/**
+ * Mounts every Forms/Wheel story and asserts the contract each one exists to
+ * show, so a story that stops rendering what its name promises fails here
+ * rather than in the gallery.
+ *
+ * The theme hooks stay REAL: Wheel reads knobProps.nestedControl.px for row
+ * height and knobProps.transition for snap duration, and a stub that omits
+ * either changes the geometry these assertions measure.
+ */
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import * as storiesModule from "./Wheel.stories";
+
+afterEach(cleanup);
+
+const meta = storiesModule.default;
+const {
+  Basic,
+  PlainValues,
+  VisibleItems,
+  LoopingAndBounded,
+  JoinedColumns,
+  Disabled,
+  CustomRenderItem,
+  EdgeCases,
+  MotionOff,
+} = storiesModule;
+
+type StoryLike = { render?: (args: Record<string, unknown>) => ReactElement };
+
+/** Resolve a story the way Storybook does: story args over meta args. */
+function mount(story: StoryLike) {
+  const args = { ...(meta.args as Record<string, unknown>) };
+  if (!story.render) throw new Error("story has no render");
+  return renderWithProviders(story.render(args));
+}
+
+const stories = {
+  Basic,
+  PlainValues,
+  VisibleItems,
+  LoopingAndBounded,
+  JoinedColumns,
+  Disabled,
+  CustomRenderItem,
+  EdgeCases,
+  MotionOff,
+} as const;
+
+describe("Forms/Wheel stories", () => {
+  it("files under a Forms title so the gallery buckets it with the fields it serves", () => {
+    expect(meta.title).toBe("Forms/Wheel");
+  });
+
+  it("declares the component, which is what the argTypes controls drive", () => {
+    expect(meta.component).toBeTruthy();
+  });
+
+  it.each(Object.entries(stories))("%s mounts at least one wheel", (_name, story) => {
+    const { container } = mount(story as StoryLike);
+    expect(container.querySelectorAll("[data-testid='wheel']").length).toBeGreaterThan(0);
+  });
+
+  it("Basic paints a selected row and reports it in the caption", () => {
+    const { container, getByText } = mount(Basic as StoryLike);
+    expect(container.querySelector("[data-selected='true']")).toBeTruthy();
+    // meta.args.value is 9 and the caption pads to two digits.
+    expect(getByText("selected: 09")).toBeTruthy();
+  });
+
+  it("PlainValues renders bare items without a { value, label } wrapper", () => {
+    const { getByText } = mount(PlainValues as StoryLike);
+    expect(getByText("Medium")).toBeTruthy();
+    expect(getByText("Extra large")).toBeTruthy();
+  });
+
+  it("VisibleItems shows all three cylinder depths, and each is odd", () => {
+    const { container, getByText } = mount(VisibleItems as StoryLike);
+    expect(container.querySelectorAll("[data-testid='wheel']").length).toBe(3);
+    for (const count of [3, 5, 7]) {
+      expect(getByText(`visibleItems=${count}`)).toBeTruthy();
+    }
+    // Tamagui compiles height to a class, not an inline style, so the three
+    // depths show up as three distinct _h-* classes on the containers.
+    const heightClasses = Array.from(container.querySelectorAll("[data-testid='wheel']")).map((w) =>
+      (w.getAttribute("class") ?? "").split(" ").find((c) => c.startsWith("_h-")),
+    );
+    expect(new Set(heightClasses).size).toBe(3);
+  });
+
+  it("LoopingAndBounded pairs a looping column with a bounded one", () => {
+    const { container, getByText } = mount(LoopingAndBounded as StoryLike);
+    expect(container.querySelectorAll("[data-testid='wheel']").length).toBe(2);
+    expect(getByText("loop")).toBeTruthy();
+    expect(getByText("bounded")).toBeTruthy();
+    // AM/PM must not loop, or the user scrolls past the last offered value.
+    expect(getByText("PM")).toBeTruthy();
+  });
+
+  it("JoinedColumns declares start / none / end so three columns read as one band", () => {
+    const { container } = mount(JoinedColumns as StoryLike);
+    const sliders = container.querySelectorAll("[role='slider']");
+    expect(sliders.length).toBe(3);
+    expect(Array.from(sliders).map((s) => s.getAttribute("aria-label"))).toEqual([
+      "Hour",
+      "Minute",
+      "AM/PM",
+    ]);
+  });
+
+  it("Disabled marks the disabled wheel for a11y and leaves the enabled one alone", () => {
+    const { container } = mount(Disabled as StoryLike);
+    const wheels = Array.from(container.querySelectorAll("[data-testid='wheel']"));
+    expect(wheels.length).toBe(2);
+    expect(wheels[0].getAttribute("aria-disabled")).toBeNull();
+    expect(wheels[1].getAttribute("aria-disabled")).toBe("true");
+  });
+
+  /** renderItem is handed the VALUE, not the { value, label } wrapper. */
+  it("CustomRenderItem lets the consumer own the row, bolding the selected one", () => {
+    const { container, getByText } = mount(CustomRenderItem as StoryLike);
+    expect(getByText("Rupee")).toBeTruthy();
+    expect(getByText("US Dollar")).toBeTruthy();
+    expect(container.querySelector("[data-selected='true']")).toBeTruthy();
+  });
+
+  it("EdgeCases survives an empty wheel without throwing", () => {
+    const { container, getByText } = mount(EdgeCases as StoryLike);
+    expect(container.querySelectorAll("[data-testid='wheel']").length).toBe(3);
+    expect(getByText("Only")).toBeTruthy();
+    expect(getByText("America/Argentina/Buenos_Aires")).toBeTruthy();
+  });
+
+  it("MotionOff puts an animated wheel beside one under animation:none", () => {
+    const { container, getByText } = mount(MotionOff as StoryLike);
+    expect(container.querySelectorAll("[data-testid='wheel']").length).toBe(2);
+    expect(getByText("animation: medium")).toBeTruthy();
+    expect(getByText("animation: none")).toBeTruthy();
+  });
+});

package/src/errorSummaryStories.spec.tsx

@@ -0,0 +1,114 @@
+/**
+ * Mounts every Forms/ErrorSummary story and asserts what it exists to show.
+ *
+ * Autofocus is off in most stories on purpose: the summary grabs focus on
+ * appear, and two mounted summaries in one file would fight over it. The one
+ * story that leaves it on is asserted for the alert role instead, which is the
+ * half of the contract that does not need a real focus manager.
+ */
+import { cleanup, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import * as storiesModule from "./ErrorSummary.stories";
+
+afterEach(cleanup);
+
+const meta = storiesModule.default;
+const {
+  Basic,
+  StructuredErrors,
+  CustomLabels,
+  SingleError,
+  EmptyRendersNothing,
+  FocusesTheFieldOnPress,
+  AutoFocusOnAppear,
+} = storiesModule;
+
+type StoryLike = { render?: (args: Record<string, unknown>) => ReactElement };
+
+function mount(story: StoryLike) {
+  if (!story.render) throw new Error("story has no render");
+  return renderWithProviders(story.render({ ...(meta.args as Record<string, unknown>) }));
+}
+
+describe("Forms/ErrorSummary stories", () => {
+  it("files under a Forms title so the gallery buckets it with the form surfaces", () => {
+    expect(meta.title).toBe("Forms/ErrorSummary");
+  });
+
+  it("Basic renders the summary as an alert with one link per error", () => {
+    const { container } = mount(Basic as StoryLike);
+    const summary = container.querySelector("[data-testid='error-summary']");
+    expect(summary).toBeTruthy();
+    expect(summary?.getAttribute("role")).toBe("alert");
+    expect(container.querySelectorAll("a").length).toBe(2);
+  });
+
+  it("Basic names the summary by its own heading", () => {
+    const { container, getByText } = mount(Basic as StoryLike);
+    const summary = container.querySelector("[data-testid='error-summary']") as HTMLElement;
+    const headingId = summary.getAttribute("aria-labelledby");
+    expect(headingId).toBeTruthy();
+    expect(getByText("There is a problem")).toBeTruthy();
+    expect(container.querySelector(`#${headingId}`)?.textContent).toBe("There is a problem");
+  });
+
+  /** DG-VAL-04: problem + action flatten into one sentence, not two bullets. */
+  it("StructuredErrors joins problem and action into a single link", () => {
+    const { getByText, container } = mount(StructuredErrors as StoryLike);
+    expect(
+      getByText(
+        "That VAT number is not registered. Check it against your registration certificate.",
+      ),
+    ).toBeTruthy();
+    expect(getByText("The start date is in the past.")).toBeTruthy();
+    expect(container.querySelectorAll("a").length).toBe(2);
+  });
+
+  it("CustomLabels prefers the label over the error text and keeps a custom title", () => {
+    const { getByText, queryByText } = mount(CustomLabels as StoryLike);
+    expect(getByText("Check these before continuing")).toBeTruthy();
+    expect(getByText("Email address")).toBeTruthy();
+    expect(queryByText("Enter an email address")).toBeNull();
+  });
+
+  it("SingleError renders exactly one link", () => {
+    const { container } = mount(SingleError as StoryLike);
+    expect(container.querySelectorAll("a").length).toBe(1);
+  });
+
+  it("EmptyRendersNothing paints no summary at all", () => {
+    const { container, getByText } = mount(EmptyRendersNothing as StoryLike);
+    expect(container.querySelector("[data-testid='error-summary']")).toBeNull();
+    expect(getByText("Second line.")).toBeTruthy();
+  });
+
+  it("FocusesTheFieldOnPress starts clean and raises the summary on submit", () => {
+    const { container, getByText } = mount(FocusesTheFieldOnPress as StoryLike);
+    expect(container.querySelector("[data-testid='error-summary']")).toBeNull();
+    fireEvent.click(getByText("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 hrefs = Array.from(container.querySelectorAll("a")).map((a) => a.getAttribute("href"));
+    expect(hrefs).toEqual(["#email", "#password"]);
+    expect(container.querySelector("#email")).toBeTruthy();
+    expect(container.querySelector("#password")).toBeTruthy();
+  });
+
+  it("AutoFocusOnAppear toggles the summary in and out on the button", () => {
+    const { container, getByText } = mount(AutoFocusOnAppear as StoryLike);
+    expect(container.querySelector("[data-testid='error-summary']")).toBeNull();
+    fireEvent.click(getByText("Show the summary"));
+    expect(container.querySelector("[data-testid='error-summary']")).toBeTruthy();
+    fireEvent.click(getByText("Hide the summary"));
+    expect(container.querySelector("[data-testid='error-summary']")).toBeNull();
+  });
+});

package/src/fields/Checkbox/Checkbox.spec.tsx

@@ -343,6 +343,30 @@ describe("CheckboxGroup", () => {
     });
   });
 
+  it("E-FLAT: group glyphs stay unwrapped at elevation large; standalone Checkbox still wraps", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ elevation: "large" }}>
+        <div data-testid="group">
+          <CheckboxGroup label="Group" options={options} defaultValue={["a"]} />
+        </div>
+        <div data-testid="solo">
+          <Checkbox label="Solo" checked />
+        </div>
+      </Preset>,
+    );
+    const groupBox = result.container
+      .querySelector("[data-testid='group']")
+      ?.querySelector("[data-checkbox-box='true']");
+    expect(groupBox).toBeTruthy();
+    expect(groupBox!.parentElement?.getAttribute("role")).toBe("checkbox");
+
+    const soloBox = result.container
+      .querySelector("[data-testid='solo']")
+      ?.querySelector("[data-checkbox-box='true']");
+    expect(soloBox).toBeTruthy();
+    expect(soloBox!.parentElement?.getAttribute("role")).not.toBe("checkbox");
+  });
+
   describe("compound Checkboxes LC-71", () => {
     it("keyboard focus rings the box, never the focus-group item", async () => {
       const spy = vi.spyOn(Theme, "wasKeyboardFocus").mockReturnValue(true);

package/src/fields/Checkbox/Checkbox.tsx

@@ -20,6 +20,7 @@ import {
   useTheme,
 } from "tamagui";
 import { useIsInTableCell } from "../../shared/tableCellContext";
+import { useCheckboxGroupSkipsElevation } from "./checkboxGroupContext";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
@@ -149,9 +150,14 @@ export function Checkbox({
   const labelFocusStyle = { color: baseLabelColor, ...text.focusKnobProps };
   const labelFocusVisibleStyle = { color: baseLabelColor, ...text.focusVisibleKnobProps };
   const tamaguiTheme = useTheme();
+  // E-FLAT: table cells and CheckboxGroup items ignore elevation. Skip the
+  // shared helper rather than changing it (MPO-96 owns default `small`).
+  const inTableCell = useIsInTableCell();
+  const inCheckboxGroup = useCheckboxGroupSkipsElevation();
+  const skipElevation = inTableCell || inCheckboxGroup;
   const elevationWrapperProps = useMemo(
-    () => getElevationWrapperProps(knobProps, elevation),
-    [knobProps, elevation],
+    () => (skipElevation ? {} : getElevationWrapperProps(knobProps, elevation)),
+    [skipElevation, knobProps, elevation],
   );
   const accentTokenKey = (knobProps.textAccentColor ?? "$color").replace("$", "");
   const indicatorColor = getVariable(
@@ -207,7 +213,6 @@ export function Checkbox({
   // checkbox's own computed size (tamagui scaleSize 0.45), so visual density
   // is unchanged. Cells (chromeless) and plain forms share the treatment —
   // the earlier cell-only split left the plain checkbox at a 20px target.
-  const inTableCell = useIsInTableCell();
   const targetSize = CHECKBOX_TARGET_PX;
   const glyphSize = getCheckboxGlyphSize(resolvedSize as SizeTokens);
   const iconSize = getCheckboxIconSize(glyphSize);