@multiplatform.one/forms 7.47.4 → 7.48.0

package/src/Button/Button.loading.spec.tsx

@@ -5,9 +5,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Button } from "./index";
 
 /**
- * WP-c2: a loading Button renders the ONE Skeleton (forms, re-exported by
- * components) at the button's recipe height, and the bone stops pulsing for a
- * user who asked for reduced motion.
+ * FZ-7812: a loading Button keeps its label and its rest chrome; a spinner
+ * takes the leading icon slot. WP-c2's skeleton bone stays the `skeleton`
+ * placeholder (a button that has not loaded), and stops pulsing for a user
+ * who asked for reduced motion.
  */
 
 let reduced = false;
@@ -32,30 +33,76 @@ afterEach(() => {
 });
 
 function bone(container: HTMLElement): HTMLElement {
-  const el = container.querySelector("[data-button-loading] [data-skeleton]");
-  if (!el) throw new Error("no skeleton bone in the loading button");
+  const el = container.querySelector("[data-skeleton]");
+  if (!el) throw new Error("no skeleton bone in the skeleton button");
   return el as HTMLElement;
 }
 
-describe("Button loading (WP-c2 one Skeleton)", () => {
-  it("renders the shared rounded Skeleton at the recipe height in the label slot", () => {
+describe("Button loading (FZ-7812 label stays)", () => {
+  it("keeps the label and puts a spinner in the leading slot", () => {
     const { container, getByRole } = renderWithProviders(
       <Button loading size="$3">
         Save
       </Button>,
     );
+    const button = getByRole("button");
+    expect(button.getAttribute("aria-busy")).toBe("true");
+    expect(button.textContent).toContain("Save");
+    const slot = container.querySelector("[data-button-loading]");
+    expect(slot).toBeTruthy();
+    expect(slot?.getAttribute("aria-hidden")).toBe("true");
+    expect(slot?.nextElementSibling?.textContent).toBe("Save");
+    expect(container.querySelector("[data-skeleton]")).toBeNull();
+  });
+
+  it("takes an icon's slot instead of adding a second glyph", () => {
+    const Icon = () => <svg data-testid="icon" />;
+    const { container, queryByTestId } = renderWithProviders(
+      <Button loading icon={Icon}>
+        Save
+      </Button>,
+    );
+    expect(queryByTestId("icon")).toBeNull();
+    expect(container.querySelectorAll("[data-button-loading]")).toHaveLength(1);
+  });
+
+  it("keeps the rest chrome: loading is not the disabled wash", () => {
+    const rest = renderWithProviders(<Button chromeless>Log in</Button>);
+    const restStyle = getComputedStyle(rest.getByRole("button"));
+    const restBg = restStyle.backgroundColor;
+    const restInk = getComputedStyle(rest.getByText("Log in")).color;
+    rest.unmount();
+    const busy = renderWithProviders(
+      <Button chromeless loading>
+        Log in
+      </Button>,
+    );
+    expect(getComputedStyle(busy.getByRole("button")).backgroundColor).toBe(restBg);
+    expect(getComputedStyle(busy.getByText("Log in")).color).toBe(restInk);
+  });
+
+  it("swallows presses while busy", () => {
+    const onPress = vi.fn();
+    const { getByRole } = renderWithProviders(
+      <Button loading onPress={onPress}>
+        Save
+      </Button>,
+    );
+    getByRole("button").click();
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});
+
+describe("Button skeleton (WP-c2 one Skeleton)", () => {
+  it("renders the shared rounded Skeleton at the recipe height", () => {
+    const { container } = renderWithProviders(<Button skeleton size="$3" />);
     const el = bone(container);
     expect(el.getAttribute("data-skeleton-variant")).toBe("rounded");
     expect(el.getAttribute("data-height")).toBe(String(sizeRecipeForToken("$3").height));
-    expect(el.getAttribute("aria-hidden")).toBe("true");
-    const button = getByRole("button");
-    expect(button.getAttribute("aria-busy")).toBe("true");
-    // The label is swapped out for the bone (busy, not narrated).
-    expect(button.textContent).not.toContain("Save");
   });
 
   it("pulses with the animation knob on", () => {
-    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const { container } = renderWithProviders(<Button skeleton />);
     const el = bone(container);
     expect(el.getAttribute("data-animate")).toBe("true");
     expect(el.className).toMatch(/mp-skeleton-pulse/);
@@ -64,7 +111,7 @@ describe("Button loading (WP-c2 one Skeleton)", () => {
 
   it("respects prefers-reduced-motion: the bone goes static", () => {
     reduced = true;
-    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const { container } = renderWithProviders(<Button skeleton />);
     const el = bone(container);
     expect(el.getAttribute("data-animate")).toBe("false");
     expect(el.className).toMatch(/mp-skeleton-static/);
@@ -74,8 +121,8 @@ describe("Button loading (WP-c2 one Skeleton)", () => {
   it("mounts one keyframe sheet that also stops motion under reduced motion", () => {
     renderWithProviders(
       <>
-        <Button loading>One</Button>
-        <Button loading>Two</Button>
+        <Button skeleton />
+        <Button skeleton />
       </>,
     );
     const sheets = document.querySelectorAll("#__mp-skeleton-pulse");

package/src/Button/index.tsx

@@ -52,6 +52,7 @@ import {
   useTheme,
 } from "tamagui";
 import { Skeleton } from "../Skeleton";
+import { Spinner } from "../Spinner";
 import type { ThemeName } from "@tamagui/web";
 import type { GestureResponderEvent } from "react-native";
 import type { AnyFormApi } from "../types";
@@ -501,7 +502,10 @@ export function Button({
     );
   }
 
-  const isDisabled = disabled || loading || (action === "submit" && resolvedForm && !isValid);
+  // Busy is not unavailable: a loading button swallows presses but keeps its
+  // rest chrome and label. Washed, it read as stuck pressed (FZ-7812).
+  const unavailable = Boolean(disabled || (action === "submit" && resolvedForm && !isValid));
+  const isDisabled = unavailable || Boolean(loading);
 
   const handlePress = (e: GestureResponderEvent) => {
     // Explained disable keeps the frame press-able (aria-disabled, focusable)
@@ -542,7 +546,7 @@ export function Button({
   // where `$color11` misses 4.5:1 (light warning 4.48, success 4.27) and the
   // hue's `$color12` text step clears it.
   const washOnHost = Boolean(
-    isDisabled && activeThemeName && solidPaletteThemes.has(activeThemeName),
+    unavailable && activeThemeName && solidPaletteThemes.has(activeThemeName),
   );
   const disabledSurface = washOnHost
     ? hostScoped(disabledState.surfaceKnobProps)
@@ -607,7 +611,7 @@ export function Button({
   ];
   const isSelected =
     selected ?? (ariaPressedProp === true || ariaPressedProp === "true" ? true : undefined);
-  const selectedFill = Boolean(isSelected) && !isDisabled;
+  const selectedFill = Boolean(isSelected) && !unavailable;
   const iconSize = nested
     ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45)))
     : recipe.iconSize;
@@ -647,7 +651,7 @@ export function Button({
           : undefined)}
       // LC-40: on the washed disabled chrome the label leaves the on-fill
       // foreground for the wash's AA ink (keepLabel keeps >=4.5:1).
-      {...(isDisabled ? disabledText : undefined)}
+      {...(unavailable ? disabledText : undefined)}
       // Boards measure ink.weight on the TEXT NODE, never the frame. The
       // prop is restated after the spreads because SizableText's size
       // variant otherwise leaks 500/600 over it (MPO-125: a literal 400
@@ -669,29 +673,21 @@ export function Button({
     : flattenedChildren?.some(isBareTextChild)
       ? wrapBareTextChildren(flattenedChildren, renderLabelText)
       : resolvedChildren;
-  // Loading shows state, not a narration: the shared Skeleton bone takes the
-  // label's slot at the recipe height (the label is swapped out; hosts such as
-  // Toolbar name the busy button through `aria-label`). The frame stays, so
-  // focus never leaves the button.
-  const textContent = loading ? (
-    <View data-button-loading="">
-      <Skeleton variant="rounded" height={boneHeight} width={boneHeight * 2} aria-hidden />
-    </View>
-  ) : (
-    labelContent
-  );
-
-  const hasIcon = icon || iconAfter;
+  const hasIcon = icon || iconAfter || loading;
   const nativeIconColor =
     props.color ??
-    (isDisabled ? disabledText.color : undefined) ??
+    (unavailable ? disabledText.color : undefined) ??
     (textColor
       ? outlinedOnHost
         ? hostScoped({ color: textColor }).color
         : textColor
       : outlinedInk) ??
     "$color";
-  const iconElement = icon ? (
+  const iconElement = loading ? (
+    <View flexShrink={0} data-button-loading="" aria-hidden>
+      <Spinner px={iconSize} color={nativeIconColor as string} aria-hidden />
+    </View>
+  ) : icon ? (
     <View flexShrink={0}>
       {isWeb ? (
         normalizeButtonIcon(icon, iconSize)
@@ -710,7 +706,7 @@ export function Button({
     </View>
   ) : null;
 
-  const explainedDisable = Boolean(disabledReason?.trim()) && Boolean(isDisabled);
+  const explainedDisable = Boolean(disabledReason?.trim()) && unavailable;
   const generatedId = useId();
   const reasonId = explainedDisable
     ? `${(props as { id?: string }).id ?? generatedId}-disabled-reason`
@@ -837,7 +833,7 @@ export function Button({
       // (`color` inherits into currentColor icons); dimWhole dims the
       // button as its own assembly. Replaces the old hardcoded 0.5
       // whole-dim that dropped label contrast under AA.
-      {...(isDisabled
+      {...(unavailable
         ? {
             ...disabledSurface,
             ...disabledText,
@@ -880,7 +876,7 @@ export function Button({
       onPress={handlePress}
       {...(isWeb ? { onKeyDown: handleKeyDown as unknown as () => void } : undefined)}
       {...(tabIndex != null ? { tabIndex } : undefined)}
-      gap={hasIcon && (resolvedChildren || textContent) ? innerGap : undefined}
+      gap={hasIcon && (resolvedChildren || labelContent) ? innerGap : undefined}
       // Form actions hug their label (Clay: no stretch): a Button inside a
       // Form never takes the column's full width. A consumer width wins.
       {...(formFromHook && !grouped ? { alignSelf: "flex-start" as const } : undefined)}
@@ -897,7 +893,7 @@ export function Button({
       {...passthroughSizeProps}
       {...sizeRecipeEscapeOverride}
       {...(nested ? nestedFloor : isCircular ? circularPressFloor : pageSlop)}
-      {...(selectedFill && !isDisabled
+      {...(selectedFill && !unavailable
         ? {
             backgroundColor: restFill,
             hoverStyle: {
@@ -955,7 +951,7 @@ export function Button({
       {...(selectedFill ? { "aria-pressed": true, "data-mp-selected": "true" } : undefined)}
     >
       {iconElement}
-      {textContent}
+      {labelContent}
       {iconAfterElement}
     </ButtonFrame>
   );

package/src/Spinner/index.native.tsx

@@ -11,10 +11,10 @@ export type { SpinnerProps, SpinnerSize } from "./spinnerSize";
 const SPIN_MS = 700;
 
 /** Native Spinner. Size follows the shared size-token scale; spin gates on transition. */
-export function Spinner({ size, color, ...props }: SpinnerProps) {
+export function Spinner({ size, px: pxProp, color, ...props }: SpinnerProps) {
   const { knobProps } = useResolvedKnobs();
   const token = spinnerSizeToken(size, knobProps.sizeToken);
-  const px = spinnerSizePx(token);
+  const px = pxProp ?? spinnerSizePx(token);
   const stroke = useSpinnerStroke(color);
   const [reduceMotion, setReduceMotion] = useState(false);
   useEffect(() => {

package/src/Spinner/index.tsx

@@ -26,10 +26,10 @@ function ensureMotionStyles() {
 }
 
 /** Form-styled Spinner. Size follows the shared size-token scale; spin gates on transition. */
-export function Spinner({ size, color, ...props }: SpinnerProps) {
+export function Spinner({ size, px: pxProp, color, ...props }: SpinnerProps) {
   const { knobProps } = useResolvedKnobs();
   const token = spinnerSizeToken(size, knobProps.sizeToken);
-  const px = spinnerSizePx(token);
+  const px = pxProp ?? spinnerSizePx(token);
   const stroke = useSpinnerStroke(color);
   const animationsOff = !knobProps.motion.control.transition;
   ensureMotionStyles();

package/src/Spinner/spinnerSize.ts

@@ -6,6 +6,8 @@ export type SpinnerSize = "small" | "large";
 
 export interface SpinnerProps {
   size?: SpinnerSize;
+  /** Glyph box in px, over `size`: a host slot that already has a size (Button's icon slot). */
+  px?: number;
   color?: string;
   [key: string]: unknown;
 }

package/types/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"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"}

package/types/Spinner/index.d.ts

@@ -1,5 +1,5 @@
 import { type SpinnerProps } from "./spinnerSize";
 export type { SpinnerProps, SpinnerSize } from "./spinnerSize";
 /** Form-styled Spinner. Size follows the shared size-token scale; spin gates on transition. */
-export declare function Spinner({ size, color, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ size, px: pxProp, color, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/types/Spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEnF,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAqB/D,+FAA+F;AAC/F,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CA4B9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEnF,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAqB/D,+FAA+F;AAC/F,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CA4B1E"}

package/types/Spinner/index.native.d.ts

@@ -1,5 +1,5 @@
 import { type SpinnerProps } from "./spinnerSize";
 export type { SpinnerProps, SpinnerSize } from "./spinnerSize";
 /** Native Spinner. Size follows the shared size-token scale; spin gates on transition. */
-export declare function Spinner({ size, color, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ size, px: pxProp, color, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.native.d.ts.map

package/types/Spinner/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.native.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAmC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEnF,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI/D,0FAA0F;AAC1F,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CA+D9D"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.native.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAmC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEnF,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI/D,0FAA0F;AAC1F,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CA+D1E"}

package/types/Spinner/spinnerSize.d.ts

@@ -2,6 +2,8 @@ import type { SizeTokens } from "tamagui";
 export type SpinnerSize = "small" | "large";
 export interface SpinnerProps {
     size?: SpinnerSize;
+    /** Glyph box in px, over `size`: a host slot that already has a size (Button's icon slot). */
+    px?: number;
     color?: string;
     [key: string]: unknown;
 }

package/types/Spinner/spinnerSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinnerSize.d.ts","sourceRoot":"","sources":["../../src/Spinner/spinnerSize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,UAAU,CAI7F;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAEvD"}
+{"version":3,"file":"spinnerSize.d.ts","sourceRoot":"","sources":["../../src/Spinner/spinnerSize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8FAA8F;IAC9F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,UAAU,CAI7F;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAEvD"}