@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/Button/Button.lc50.spec.tsx

@@ -0,0 +1,73 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen } from "@testing-library/react";
+import { SizableText } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+/**
+ * LC-82 TEXT-RIDES-TEXT (catalog arm): the Button text slot wraps ALL bare
+ * string/number children — runs of adjacent strings coalesce into the same
+ * SizableText the singleton path uses — so `{label}{cond ? suffix : ""}`
+ * renders the concatenated label instead of tripping the native "Text strings
+ * must be rendered within a <Text> component" invariant and silently dropping
+ * the label.
+ *
+ * getByText matches only elements whose DIRECT text nodes hold the text, so a
+ * bare (unwrapped) string child would resolve to the frame itself
+ * (role=button) — asserting the match is NOT the frame proves the string
+ * rides a Text component.
+ */
+describe("Button LC-82 TEXT-RIDES-TEXT", () => {
+  it("renders array-of-strings children as one concatenated wrapped label", () => {
+    renderWithProviders(
+      <Button>
+        {"Add"}
+        {" +$1.00"}
+      </Button>,
+    );
+    const label = screen.getByText("Add +$1.00");
+    const frame = screen.getByRole("button");
+    expect(label).toBeInTheDocument();
+    expect(label).not.toBe(frame);
+    expect(frame.contains(label)).toBe(true);
+  });
+
+  it('renders the origin shape `{label}{cond ? suffix : ""}` when the condition is false', () => {
+    const priceDelta: number = 0;
+    renderWithProviders(
+      <Button>
+        {"Add"}
+        {priceDelta !== 0 ? ` +$${priceDelta}` : ""}
+      </Button>,
+    );
+    const label = screen.getByText("Add");
+    expect(label).toBeInTheDocument();
+    expect(label).not.toBe(screen.getByRole("button"));
+  });
+
+  it("still renders a singleton string child wrapped", () => {
+    renderWithProviders(<Button>Save</Button>);
+    const label = screen.getByText("Save");
+    expect(label).toBeInTheDocument();
+    expect(label).not.toBe(screen.getByRole("button"));
+  });
+
+  it("keeps element children untouched and wraps only the string, order preserved", () => {
+    renderWithProviders(
+      <Button>
+        {"Save"}
+        <SizableText testID="suffix-badge">+$1.00</SizableText>
+      </Button>,
+    );
+    const label = screen.getByText("Save");
+    const badge = screen.getByTestId("suffix-badge");
+    expect(label).not.toBe(screen.getByRole("button"));
+    expect(badge).toBeInTheDocument();
+    expect(screen.getByText("+$1.00")).toBe(badge);
+    expect(label.compareDocumentPosition(badge) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});

package/src/Button/Button.lc71.spec.tsx

@@ -0,0 +1,109 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button, buttonDensityPad, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
+
+afterEach(cleanup);
+
+describe("Button size recipes", () => {
+  it("medium is 32 / 12 / 14 / 16 — not a 44px painted box", () => {
+    // Generated from recipeFamilies.control (LC-80): fontSize is the recipe's
+    // px number (md 14), no longer a drifted font token ("$3" = 13).
+    expect(buttonSizeRecipes.$4).toEqual({
+      height: 32,
+      paddingHorizontal: 12,
+      fontSize: 14,
+      iconSize: 16,
+      gap: 6,
+    });
+    expect(resolveButtonSizeRecipe("$true").height).toBe(32);
+    expect(resolveButtonSizeRecipe("$3").height).toBe(28);
+    expect(resolveButtonSizeRecipe("$5").height).toBe(40);
+  });
+
+  it("paints recipe height and restores the 44 floor with slop, not minHeight", () => {
+    renderWithProviders(<Button>Save</Button>);
+    const frame = screen.getByRole("button");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("32");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("6");
+    expect((frame as HTMLElement).style.minHeight).not.toBe("44px");
+  });
+
+  it("large paints 40 and still slops to 44", () => {
+    renderWithProviders(<Button size="$5">Save</Button>);
+    const frame = screen.getByRole("button");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("40");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("2");
+  });
+});
+
+describe("Button density ≠ size", () => {
+  it("compact tightens pad without shrinking recipe height", () => {
+    expect(buttonDensityPad(12, true)).toBe(10);
+    expect(buttonDensityPad(12, false)).toBe(12);
+    renderWithProviders(
+      <Button compact size="$4">
+        Save
+      </Button>,
+    );
+    const frame = screen.getByRole("button");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("32");
+    expect(frame.getAttribute("data-mp-density")).toBe("compact");
+  });
+
+  it("size large + compact density stays large chrome", () => {
+    renderWithProviders(
+      <Preset overrides={{ size: "large" }}>
+        <Button compact>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("40");
+  });
+});
+
+describe("Button nested scale (LC-73)", () => {
+  it("paints nestedControl and does not grow circular chrome to 44", () => {
+    renderWithProviders(
+      <Button nested circular aria-label="day">
+        12
+      </Button>,
+    );
+    const frame = screen.getByRole("button");
+    expect(frame.getAttribute("data-nested-px")).toBe("32");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("32");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(frame.getAttribute("style") ?? "").not.toMatch(/width:\s*44px/);
+  });
+});
+
+describe("Button LC-71 RING-ANATOMY + selected fill", () => {
+  it("selected is fill (aria-pressed) not an extra outline", () => {
+    renderWithProviders(
+      <Button outlined selected>
+        On
+      </Button>,
+    );
+    const frame = screen.getByRole("button");
+    expect(frame.getAttribute("aria-pressed")).toBe("true");
+    expect(frame.getAttribute("data-mp-selected")).toBe("true");
+    expect((frame as HTMLElement).style.outlineWidth || "").not.toMatch(/[1-9]/);
+  });
+
+  it("unselected outlined does not carry aria-pressed", () => {
+    renderWithProviders(<Button outlined>Off</Button>);
+    expect(screen.getByRole("button").getAttribute("aria-pressed")).toBeNull();
+  });
+
+  it("keyboard activation still fires on the whole frame", () => {
+    const onPress = vi.fn();
+    renderWithProviders(<Button onPress={onPress}>Save</Button>);
+    const frame = screen.getByRole("button");
+    fireEvent.keyDown(frame, { key: "Enter" });
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Button/Button.spec.tsx

@@ -0,0 +1,128 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-65 SIZE-RECIPE (Button arm): medium/$4 paints at 32px, not Tamagui's
+ * flat $4=44 ramp, and radius stays on the borderRadius knob (same class
+ * across size steps). jsdom cannot cascade Tamagui CSS, so assertions read
+ * the atomic height/radius classes the frame emits.
+ *
+ * Desktop/jsdom: the touch floor (control.height >= 44) does not fire here.
+ * Recipe fragments spread after `size={token}` so a touch rewrite can win;
+ * on desktop both the $4 variant and the fragment are 32. Do not assert 44.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { __resetDevWarnSeen } from "../shared/devWarn";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+function frameRadiusClasses(el: HTMLElement): string[] {
+  return String(el.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"))
+    .sort();
+}
+
+/** Last `_px-Npx` class wins in source order (runtime fragment after `size=`). */
+function paddingPxFromClass(el: HTMLElement): number | null {
+  let found: number | null = null;
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_px-(\d+)px$/);
+    if (m) found = Number(m[1]);
+  }
+  return found;
+}
+
+describe("Button LC-65 SIZE-RECIPE", () => {
+  it("desktop/jsdom medium height is 32 (touch floor does not fire)", () => {
+    renderWithProviders(<Button>Save</Button>);
+    const frame = screen.getByRole("button");
+    expect(frame.className).toMatch(/_h-32px/);
+    expect(frame.className).not.toMatch(/_h-44px/);
+    expect(frame.className).not.toMatch(/_h-t-size-4/);
+  });
+
+  it("radius does not change between size steps", () => {
+    renderWithProviders(
+      <Preset overrides={{ size: "small" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    const small = screen.getByRole("button");
+    expect(small.className).toMatch(/_h-28px/);
+    const smallRadius = frameRadiusClasses(small);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ size: "medium" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    const medium = screen.getByRole("button");
+    expect(medium.className).toMatch(/_h-32px/);
+    const mediumRadius = frameRadiusClasses(medium);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ size: "large" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    const large = screen.getByRole("button");
+    expect(large.className).toMatch(/_h-40px/);
+    const largeRadius = frameRadiusClasses(large);
+
+    expect(smallRadius.length).toBeGreaterThan(0);
+    expect(smallRadius).toEqual(mediumRadius);
+    expect(largeRadius).toEqual(mediumRadius);
+  });
+
+  it("recipeFamily controlCompact has smaller padding than control at the same size token", () => {
+    renderWithProviders(<Button>Save</Button>);
+    const control = screen.getByRole("button");
+    expect(control.className).toMatch(/_h-32px/);
+    const controlPad = paddingPxFromClass(control);
+    cleanup();
+
+    renderWithProviders(<Button recipeFamily="controlCompact">Save</Button>);
+    const compact = screen.getByRole("button");
+    const compactPad = paddingPxFromClass(compact);
+    expect(compact.className).toMatch(/_h-32px/);
+    if (controlPad != null && compactPad != null) {
+      expect(compactPad).toBeLessThan(controlPad);
+    }
+  });
+});
+
+describe("Button sizeRecipeEscape", () => {
+  let warnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    __resetDevWarnSeen();
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    __resetDevWarnSeen();
+  });
+
+  it("warns when numeric height is passed without sizeRecipeEscape", () => {
+    renderWithProviders(<Button height={40}>Save</Button>);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("size-recipe-escape"));
+    expect(screen.getByRole("button").className).toMatch(/_h-32px/);
+  });
+
+  it("sizeRecipeEscape suppresses the numeric-height warn", () => {
+    renderWithProviders(
+      <Button height={40} sizeRecipeEscape="toolbar chrome match">
+        Save
+      </Button>,
+    );
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("size-recipe-escape"));
+  });
+});

package/src/Button/Button.stories.tsx

@@ -119,6 +119,46 @@ export const CompoundPattern: Story = {
   ),
 };
 
+/**
+ * Size recipes (Polaris/Primer/Linear 28/32/40), density ≠ size, selected =
+ * fill, nested scale-down, 44px via slop not painted chrome.
+ */
+export const Anatomy: Story = {
+  name: "Anatomy (size / density / selected / nested)",
+  render: () => (
+    <YStack gap="$4" padding="$4">
+      <XStack gap="$3" alignItems="center" flexWrap="wrap">
+        <Button size="$3">Small</Button>
+        <Button size="$4">Medium</Button>
+        <Button size="$5">Large</Button>
+        <Button size="$4" compact>
+          Compact pad
+        </Button>
+      </XStack>
+      <XStack gap="$3" alignItems="center" flexWrap="wrap">
+        <Button outlined>Rest</Button>
+        <Button outlined selected>
+          Selected
+        </Button>
+        <Button accent selected>
+          Accent selected
+        </Button>
+        <Button chromeless selected>
+          Ghost selected
+        </Button>
+      </XStack>
+      <XStack gap="$3" alignItems="center" flexWrap="wrap">
+        <Button>Page</Button>
+        <Button nested>Nested</Button>
+        <Button nested circular aria-label="day">
+          12
+        </Button>
+        <Button circular icon={Activity} aria-label="toolbar well" />
+      </XStack>
+    </YStack>
+  ),
+};
+
 /**
  * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
  * RAW tamagui Button beside the house Button strictly so the difference stays