@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/Button/Button.nativeInk.spec.tsx

@@ -0,0 +1,100 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { memo } from "react";
+import { getVariableValue, TamaguiProvider, useTheme } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./index";
+
+const platform = vi.hoisted(() => ({ web: false }));
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  get isWeb() {
+    return platform.web;
+  },
+}));
+
+const config = createDefaultThemeConfig();
+
+function IconProbe({ color }: { size?: number; color?: string }) {
+  const theme = useTheme();
+  return (
+    <span
+      data-testid="icon"
+      data-color={color ?? ""}
+      data-theme-ink={String(getVariableValue(theme.color))}
+      data-muted-ink={String(getVariableValue(theme.color11))}
+      data-strong-ink={String(getVariableValue(theme.color12))}
+    />
+  );
+}
+
+const MemoIcon = memo(IconProbe);
+
+afterEach(() => {
+  cleanup();
+  platform.web = false;
+});
+
+describe("native Button icon ink", () => {
+  it.each(["light", "dark"] as const)(
+    "%s resolves icon components in the button theme",
+    (scheme) => {
+      render(
+        <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <Button icon={IconProbe}>Refresh</Button>
+          <Button accent icon={MemoIcon}>
+            New
+          </Button>
+          <Button iconAfter={<IconProbe />}>Open</Button>
+        </TamaguiProvider>,
+      );
+      for (const icon of screen.getAllByTestId("icon")) {
+        expect(icon.dataset.color).not.toBe("");
+        expect(icon.dataset.color).toBe(icon.dataset.themeInk);
+      }
+    },
+  );
+
+  it.each(["light", "dark"] as const)(
+    "%s keeps disabled and outlined intent icons readable",
+    (scheme) => {
+      render(
+        <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <Button error disabled disabledReason="Unavailable" icon={IconProbe}>
+            Delete
+          </Button>
+          <Button error outlined icon={IconProbe}>
+            Remove
+          </Button>
+        </TamaguiProvider>,
+      );
+      const [disabledIcon, outlinedIcon] = screen.getAllByTestId("icon");
+      expect(disabledIcon.dataset.color).toBe(disabledIcon.dataset.strongInk);
+      expect(outlinedIcon.dataset.color).toBe(outlinedIcon.dataset.mutedInk);
+    },
+  );
+
+  it("resolves the control's explicit token color and preserves an icon's own color", () => {
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <Button color="$color11" icon={IconProbe}>
+          Filter
+        </Button>
+        <Button icon={<IconProbe color="rebeccapurple" />}>Custom</Button>
+      </TamaguiProvider>,
+    );
+    const [controlIcon, explicitIcon] = screen.getAllByTestId("icon");
+    expect(controlIcon.dataset.color).toBe(controlIcon.dataset.mutedInk);
+    expect(explicitIcon.dataset.color).toBe("rebeccapurple");
+  });
+
+  it("leaves web icons on their inherited color path", () => {
+    platform.web = true;
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <Button icon={IconProbe}>Refresh</Button>
+      </TamaguiProvider>,
+    );
+    expect(screen.getByTestId("icon").dataset.color).toBe("");
+  });
+});

package/src/Button/Button.radiusLaw.spec.tsx

@@ -9,7 +9,7 @@
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { type Knobs, Preset } from "@multiplatform.one/theme";
+import { type Knobs, Preset, generateScale, defaultScaleInputs } from "@multiplatform.one/theme";
 import { cleanup, screen } from "@testing-library/react";
 import { Theme } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
@@ -17,8 +17,20 @@ import { Button } from "./index";
 
 afterEach(cleanup);
 
-const STOP_PX = { none: 0, small: 5, medium: 9, large: 16, full: 50 } as const;
-const RECIPE_RADIUS = { $2: 5, $3: 7, $4: 9, $6: 16 } as const;
+const scale = generateScale(defaultScaleInputs);
+const STOP_PX = {
+  none: 0,
+  small: scale.tokens.radius[2],
+  medium: scale.tokens.radius[4],
+  large: scale.tokens.radius[6],
+  full: scale.tokens.radius[12],
+} as const;
+const RECIPE_RADIUS = {
+  $2: scale.tokens.radius[2],
+  $3: scale.tokens.radius[3],
+  $4: scale.tokens.radius[4],
+  $6: scale.tokens.radius[6],
+} as const;
 const SCHEMES = ["light", "dark"] as const;
 const TOKENS = ["$2", "$3", "$4", "$6"] as const;
 
@@ -32,8 +44,6 @@ const COMBOS: Combo[] = [
     borderRadius: "none",
     borderWidth: "large",
     elevation: "none",
-    space: "medium",
-    size: "large",
     textAccent: "high",
     headingFont: "pixel",
     bodyFont: "mono",
@@ -45,21 +55,17 @@ const COMBOS: Combo[] = [
     borderRadius: "small",
     borderWidth: "none",
     elevation: "large",
-    space: "large",
-    size: "small",
     textAccent: "low",
     headingFont: "cursive",
     bodyFont: "serif",
     fontWeight: "bold",
-    animation: "snappy",
+    animation: "quickest",
   },
   {
     fillStyle: "outlined",
     borderRadius: "full",
     borderWidth: "none",
     elevation: "medium",
-    space: "small",
-    size: "small",
     textAccent: "medium",
     headingFont: "condensed",
     bodyFont: "handwriting",
@@ -71,8 +77,6 @@ const COMBOS: Combo[] = [
     borderRadius: "medium",
     borderWidth: "none",
     elevation: "small",
-    space: "medium",
-    size: "large",
     textAccent: "medium",
     headingFont: "pixel",
     bodyFont: "pixel",
@@ -84,8 +88,6 @@ const COMBOS: Combo[] = [
     borderRadius: "large",
     borderWidth: "small",
     elevation: "small",
-    space: "large",
-    size: "medium",
     textAccent: "low",
     headingFont: "slab",
     bodyFont: "pixel",
@@ -98,15 +100,7 @@ function lawRadius(stop: Stop, token: Token): number {
   return stop === "medium" ? RECIPE_RADIUS[token] : STOP_PX[stop];
 }
 
-const RADIUS_TOKEN_PX: Record<string, number> = {
-  "0": 0,
-  "2": 5,
-  "3": 7,
-  "4": 9,
-  "5": 10,
-  "6": 16,
-  "12": 50,
-};
+const RADIUS_TOKEN_PX: Record<string, number> = scale.tokens.radius;
 
 function radiusPx(el: HTMLElement): number | null {
   let found: number | null = null;
@@ -138,7 +132,7 @@ describe("MPO-162 Button frame radius: seeded fuzz against knob-laws.md § Radiu
   for (const [i, combo] of COMBOS.entries()) {
     const expected =
       combo.borderRadius === "medium"
-        ? "the size-recipe radius 5/7/9/16"
+        ? "the generated size-recipe radius"
         : `${STOP_PX[combo.borderRadius]}px at every size`;
     for (const scheme of SCHEMES) {
       it(`combo ${i + 1} ${scheme}: borderRadius ${combo.borderRadius} paints ${expected}`, () => {

package/src/Button/Button.sizeLadder.spec.tsx

@@ -2,33 +2,29 @@
  * @vitest-environment jsdom
  *
  * MPO-46 AC-1: the painted Button, not the recipe source, matches the
- * measured Tamagui v5 table at $2/$3/$4/$6. Radius used to sit on the
+ * generated default table at $2/$3/$4/$6. Radius used to sit on the
  * borderRadius knob (flat 9px); it must step with the size token, and
  * default gap matches that table. Corner shape overrides preserve the
  * internal spacing rather than jamming or separating the icon and label.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, generateScale, defaultScaleInputs } from "@multiplatform.one/theme";
 import { cleanup, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 import { Button } from "./index";
 
 afterEach(cleanup);
 
-const MEASURED = {
-  $2: { paddingHorizontal: 7, fontSize: 12, radius: 5 },
-  $3: { paddingHorizontal: 13, fontSize: 13, radius: 7 },
-  $4: { paddingHorizontal: 18, fontSize: 14, radius: 9 },
-  $6: { paddingHorizontal: 32, fontSize: 18, radius: 16 },
-} as const;
+const scale = generateScale(defaultScaleInputs);
+const MEASURED = scale.recipeInputs.tokenTable;
 
 const KNOB_STOPS = {
   none: 0,
-  small: 5,
-  medium: 9,
-  large: 16,
-  full: 50,
+  small: scale.tokens.radius[2],
+  medium: scale.tokens.radius[4],
+  large: scale.tokens.radius[6],
+  full: scale.tokens.radius[12],
 } as const;
 
 function lastPx(el: Element, re: RegExp): number | null {
@@ -40,15 +36,7 @@ function lastPx(el: Element, re: RegExp): number | null {
   return found;
 }
 
-const RADIUS_TOKEN_PX: Record<string, number> = {
-  "0": 0,
-  "2": 5,
-  "3": 7,
-  "4": 9,
-  "5": 10,
-  "6": 16,
-  "12": 50,
-};
+const RADIUS_TOKEN_PX: Record<string, number> = scale.tokens.radius;
 
 function radiusPx(el: HTMLElement): number | null {
   let found: number | null = null;
@@ -89,7 +77,7 @@ function renderSize(size: keyof typeof MEASURED) {
 describe("MPO-46 painted Button size ladder", () => {
   it("padX, label and radius at $2/$3/$4/$6 match the reference table", () => {
     for (const token of ["$2", "$3", "$4", "$6"] as const) {
-      const row = MEASURED[token];
+      const row = MEASURED[token]!;
       const frame = renderSize(token);
       expect(padXPx(frame), `${token} padX (${frame.className})`).toBe(row.paddingHorizontal);
       expect(labelPx(frame), `${token} label`).toBe(row.fontSize);
@@ -101,7 +89,7 @@ describe("MPO-46 painted Button size ladder", () => {
   it("gap equals radius at every size step", () => {
     for (const token of ["$2", "$3", "$4", "$6"] as const) {
       const frame = renderSize(token);
-      expect(gapPx(frame), `${token} gap`).toBe(MEASURED[token].radius);
+      expect(gapPx(frame), `${token} gap`).toBe(MEASURED[token]!.radius);
       expect(gapPx(frame), `${token} gap==radius`).toBe(radiusPx(frame));
       cleanup();
     }
@@ -118,7 +106,7 @@ describe("MPO-46 painted Button size ladder", () => {
       );
       const frame = screen.getByRole("button");
       expect(radiusPx(frame), `${stop} radius`).toBe(px);
-      expect(gapPx(frame), `${stop} gap`).toBe(MEASURED.$4.radius);
+      expect(gapPx(frame), `${stop} gap`).toBe(MEASURED.$4!.radius);
       cleanup();
     }
   });

package/src/Button/Button.sizeToken.spec.tsx

@@ -0,0 +1,123 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-100 TOKEN-SCALE / LC-78: a Button's size is Tamagui's own `size` token,
+ * forwarded by the nearest `<Surface size>` and clamped to it. The recipe at
+ * that token paints the height, pad and gap; there is no density step and no
+ * `compact` prop.
+ *
+ * LC-79 / LC-80: a tighter pad at the same height is the `chip` recipe
+ * FAMILY, picked per component through `recipeFamily`, never subtracted.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  Surface,
+  generateScale,
+  defaultScaleInputs,
+  recipeFamilies,
+} from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import type { SizeTokens } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button, resolveButtonSizeRecipe } from "./index";
+
+afterEach(cleanup);
+
+const sizes = ["$2", "$3", "$4"] as const;
+const scale = generateScale(defaultScaleInputs).tokens;
+
+/** Last `_pl-Npx` / `_pr-Npx` class wins (paddingHorizontal expands to both). */
+function paddingPxFromClass(el: HTMLElement): number | null {
+  let found: number | null = null;
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_p[lr]-(\d+)px$/);
+    if (m) found = Number(m[1]);
+  }
+  return found;
+}
+
+function gapPxFromClass(el: HTMLElement): number | null {
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_gap-(\d+)px$/);
+    if (m) return Number(m[1]);
+  }
+  return null;
+}
+
+function renderIn(surface: SizeTokens | undefined, size?: SizeTokens) {
+  const button = (
+    <Button size={size} icon={<span>i</span>}>
+      Save
+    </Button>
+  );
+  renderWithProviders(surface ? <Surface size={surface}>{button}</Surface> : button);
+  return screen.getByRole("button");
+}
+
+describe("Button size token through <Surface> (LC-78 / LC-100)", () => {
+  it('a Button under <Surface size="$3"> measures the scale\'s $3 height', () => {
+    const button = renderIn("$3");
+    expect(button.getAttribute("data-size-token")).toBe("$3");
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$3));
+  });
+
+  it('a size="$5" request inside <Surface size="$3"> clamps to $3', () => {
+    const button = renderIn("$3", "$5");
+    expect(button.getAttribute("data-size-token")).toBe("$3");
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$3));
+  });
+
+  it("a smaller request inside the Surface keeps its own token", () => {
+    const button = renderIn("$3", "$2");
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$2));
+  });
+
+  it("with no Surface the Button renders at its own token, else $true", () => {
+    expect(renderIn(undefined).getAttribute("data-mp-button-height")).toBe(
+      String(scale.size.$true),
+    );
+    cleanup();
+    expect(renderIn(undefined, "$5").getAttribute("data-mp-button-height")).toBe(
+      String(scale.size.$5),
+    );
+  });
+
+  it("the painted pad and gap are the control recipe at the resolved token", () => {
+    for (const size of sizes) {
+      const button = renderIn(size);
+      expect(paddingPxFromClass(button), `padX at ${size}`).toBe(
+        resolveButtonSizeRecipe(size, "control").paddingHorizontal,
+      );
+      expect(gapPxFromClass(button), `gap at ${size}`).toBe(
+        resolveButtonSizeRecipe(size, "control").gap,
+      );
+      cleanup();
+    }
+  });
+});
+
+describe("the chip recipe family is the tighter pad (LC-79 / LC-80)", () => {
+  it("chip keeps the control height and tightens padX at every size", () => {
+    for (const size of sizes) {
+      const chip = resolveButtonSizeRecipe(size, "chip");
+      const control = resolveButtonSizeRecipe(size, "control");
+      expect(chip.height, `height at ${size}`).toBe(control.height);
+      expect(chip.paddingHorizontal, `padX at ${size}`).toBeLessThan(control.paddingHorizontal);
+      expect(chip.gap, `gap == radius at ${size}`).toBe(recipeFamilies.chip.radii[size]);
+    }
+  });
+
+  it('recipeFamily="chip" paints the chip pad at the same height', () => {
+    renderWithProviders(
+      <Button size="$4" recipeFamily="chip">
+        Save
+      </Button>,
+    );
+    const button = screen.getByRole("button");
+    expect(paddingPxFromClass(button)).toBe(
+      resolveButtonSizeRecipe("$4", "chip").paddingHorizontal,
+    );
+    expect(button.getAttribute("data-mp-button-height")).toBe(String(scale.size.$4));
+  });
+});

package/src/Button/Button.spec.tsx

@@ -1,21 +1,21 @@
 /**
  * @vitest-environment jsdom
  *
- * LC-65 SIZE-RECIPE (Button arm): medium/$4 paints at 44px — since MPO-13
- * the recipe table IS the measured Tamagui $size ramp ($4/$true = 44), so
+ * LC-65 SIZE-RECIPE (Button arm): medium/$4 paints at 40px — since MPO-13
+ * the recipe table IS the generated $size ramp ($4/$true = 40), so
  * the recipe fragment and the raw token finally agree. Radius steps with
  * the size token (MPO-46); the borderRadius knob is an override, not a
  * flat 9px across heights. 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;
- * at $4 it is a no-op anyway (desktop 44 = floor 44, touch lifts to 48).
+ * at $4 the desktop height is below the touch floor.
  * Height must come from the recipe fragment (concrete px class), never the
  * `_h-t-size-4` token class.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } 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";
@@ -41,31 +41,31 @@ function paddingPxFromClass(el: HTMLElement): number | null {
 }
 
 describe("Button LC-65 SIZE-RECIPE", () => {
-  it("desktop/jsdom medium height is the measured 44 from the recipe, not the token class", () => {
+  it("desktop/jsdom medium height is the generated 40 from the recipe, not the token class", () => {
     renderWithProviders(<Button>Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.className).toMatch(/_h-44px/);
+    expect(frame.className).toMatch(/_h-40px/);
     expect(frame.className).not.toMatch(/_h-t-size-4/);
   });
 
   it("radius steps with the size token (MPO-46)", () => {
     renderWithProviders(
-      <Preset overrides={{ size: "small" }}>
+      <Surface size="$3">
         <Button>Save</Button>
-      </Preset>,
+      </Surface>,
     );
     const small = screen.getByRole("button");
-    expect(small.className).toMatch(/_h-36px/);
+    expect(small.className).toMatch(/_h-32px/);
     const smallRadius = frameRadiusClasses(small);
     cleanup();
 
     renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
+      <Surface size="$5">
         <Button>Save</Button>
-      </Preset>,
+      </Surface>,
     );
     const large = screen.getByRole("button");
-    expect(large.className).toMatch(/_h-52px/);
+    expect(large.className).toMatch(/_h-48px/);
     const largeRadius = frameRadiusClasses(large);
 
     expect(smallRadius.length).toBeGreaterThan(0);
@@ -73,17 +73,17 @@ describe("Button LC-65 SIZE-RECIPE", () => {
     expect(smallRadius).not.toEqual(largeRadius);
   });
 
-  it("recipeFamily controlCompact has smaller padding than control at the same size token", () => {
+  it("recipeFamily chip has smaller padding than control at the same size token", () => {
     renderWithProviders(<Button>Save</Button>);
     const control = screen.getByRole("button");
-    expect(control.className).toMatch(/_h-44px/);
+    expect(control.className).toMatch(/_h-40px/);
     const controlPad = paddingPxFromClass(control);
     cleanup();
 
-    renderWithProviders(<Button recipeFamily="controlCompact">Save</Button>);
+    renderWithProviders(<Button recipeFamily="chip">Save</Button>);
     const compact = screen.getByRole("button");
     const compactPad = paddingPxFromClass(compact);
-    expect(compact.className).toMatch(/_h-44px/);
+    expect(compact.className).toMatch(/_h-40px/);
     if (controlPad != null && compactPad != null) {
       expect(compactPad).toBeLessThan(controlPad);
     }
@@ -106,7 +106,7 @@ describe("Button sizeRecipeEscape", () => {
   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-44px/);
+    expect(screen.getByRole("button").className).toMatch(/_h-40px/);
   });
 
   it("sizeRecipeEscape suppresses the numeric-height warn", () => {

package/src/Button/Button.stories.tsx

@@ -198,16 +198,13 @@ export const SizeLadder: Story = {
 };
 
 export const Anatomy: Story = {
-  name: "Anatomy (size / density / selected / nested)",
+  name: "Anatomy (size / 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>
@@ -381,3 +378,42 @@ export const StateFocus: Story = {
     </YStack>
   ),
 };
+
+export const DisabledReasons: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Disabled explanations stay on the parent surface. Switch the preset and light/dark scheme to compare accent, primary and plain actions in both placements.",
+      },
+    },
+  },
+  render: () => (
+    <YStack gap="$4" padding="$4" backgroundColor="$background">
+      {(["below", "inline"] as const).map((placement) => (
+        <YStack key={placement} gap="$3" alignItems="flex-start">
+          <Paragraph>{placement === "below" ? "Below the action" : "Beside the action"}</Paragraph>
+          <Button
+            accent
+            disabled
+            disabledReason="Complete the draft"
+            disabledReasonPlacement={placement}
+          >
+            Analyse
+          </Button>
+          <Button
+            actionRole="primary"
+            disabled
+            disabledReason="Choose a data source"
+            disabledReasonPlacement={placement}
+          >
+            Publish
+          </Button>
+          <Button disabled disabledReason="No saved changes" disabledReasonPlacement={placement}>
+            Save
+          </Button>
+        </YStack>
+      ))}
+    </YStack>
+  ),
+};