@multiplatform.one/forms 7.80.0 → 7.81.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.80.0",
+  "version": "7.81.1",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.80.0",
-    "@multiplatform.one/router": "^7.80.0",
-    "@multiplatform.one/table-primitives": "^7.80.0",
-    "@multiplatform.one/theme": "^7.80.0",
+    "@multiplatform.one/platform": "^7.81.1",
+    "@multiplatform.one/router": "^7.81.1",
+    "@multiplatform.one/table-primitives": "^7.81.1",
+    "@multiplatform.one/theme": "^7.81.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -80,9 +80,9 @@
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "7.80.0",
-    "@multiplatform.one/storybook": "7.80.0",
-    "@multiplatform.one/test-utils": "7.80.0",
+    "@multiplatform.one/config": "7.81.1",
+    "@multiplatform.one/storybook": "7.81.1",
+    "@multiplatform.one/test-utils": "7.81.1",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/AdaptivePopup/index.tsx

@@ -1,4 +1,4 @@
-import { transitionProps } from "@multiplatform.one/theme";
+import { sheetGrabber, transitionProps, overlayScrim } from "@multiplatform.one/theme";
 import { DialogContent, DialogOverlay } from "@multiplatform.one/theme";
 import {
   cloneElement,
@@ -399,12 +399,15 @@ export function AdaptivePopup({
           {...transitionProps(knobProps.motion.slide)}
         >
           <Sheet.Overlay
-            backgroundColor="$shadow6"
+            backgroundColor={overlayScrim}
             {...transitionProps(knobProps.motion.scrim)}
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}
           />
-          <Sheet.Handle {...({ "aria-hidden": true } as Record<string, unknown>)} />
+          <Sheet.Handle
+            {...sheetGrabber}
+            {...({ "aria-hidden": true } as Record<string, unknown>)}
+          />
           <Sheet.Frame
             // Sheet.Frame forwards its ref at runtime; the styled prop type
             // just omits `ref`, hence the cast. tabIndex -1 makes the frame a

package/src/Button/Button.iconButton.spec.tsx

@@ -112,6 +112,45 @@ function rest(el: Element, prefix: string): string[] {
     .sort();
 }
 
+describe("LC-176: one ink on a bold glyph (FZ-8649)", () => {
+  function Inked({ color, stroke }: { color?: string; stroke?: string }) {
+    return <svg data-glyph="" data-color={color} data-stroke={stroke} />;
+  }
+
+  it.each(SCHEMES)("%s: a bar glyph takes the bar tint on its fill and its stroke", (scheme) => {
+    houseRender(
+      <Surface bar>
+        <Button chromeless icon={Inked} aria-label="Menu" />
+        <Button chromeless icon={<Inked />} aria-label="Bell" />
+      </Surface>,
+      scheme,
+    );
+    for (const label of ["Menu", "Bell"]) {
+      const ink = glyphOf(label).getAttribute("data-color");
+      expect(ink).toBeTruthy();
+      expect(ink).not.toBe("currentColor");
+      expect(glyphOf(label).getAttribute("data-stroke")).toBe(ink);
+    }
+  });
+
+  it("a caller's colour stays on the fill and the stroke", () => {
+    houseRender(
+      <Surface bar>
+        <Button chromeless icon={<Inked color="red" />} aria-label="Bell" />
+      </Surface>,
+      "light",
+    );
+    expect(glyphOf("Bell").getAttribute("data-color")).toBe("red");
+    expect(glyphOf("Bell").getAttribute("data-stroke")).toBe("red");
+  });
+
+  it("a content glyph has no bar tint to pass, so it keeps currentColor", () => {
+    houseRender(<Button icon={Inked} aria-label="More" />, "light");
+    expect(glyphOf("More").hasAttribute("data-color")).toBe(false);
+    expect(glyphOf("More").getAttribute("data-stroke")).toBe("currentColor");
+  });
+});
+
 describe("LC-176: an icon-only Button is a bare glyph", () => {
   it.each(SCHEMES)("%s: in a bar, no fill and no border at rest, the bar tint as ink", (scheme) => {
     houseRender(

package/src/Button/index.tsx

@@ -465,28 +465,40 @@ export function iconButtonGlyphPx(rowLinePx: number | undefined): number {
 /** LC-176: an inline glyph is the text's size; Phosphor's 256 grid pads ~12%. */
 const INLINE_GLYPH_RATIO = 1.2;
 
+/**
+ * `ink` is the bar tint. It goes to the glyph as well as to its stroke, because
+ * a `themed` glyph fills with the theme's text colour unless told otherwise and
+ * the stroke would then outline it in a second colour (FZ-8649).
+ */
 function withGlyphWeight(
   icon: IconLike | undefined,
   size: number,
   weight: "regular" | "bold",
   floor = false,
+  ink?: string | null,
 ): IconLike | undefined {
   if (icon == null || icon === false) return icon;
+  const tint = ink ?? undefined;
   if (isValidElement<{ size?: number; weight?: string; color?: string }>(icon)) {
     const resolved = (icon.props.weight ?? weight) as "regular" | "bold";
     const own = icon.props.size;
     return cloneElement(icon, {
       ...(own == null || (floor && typeof own === "number" && own < size) ? { size } : undefined),
       ...(icon.props.weight == null ? { weight } : undefined),
-      ...boldStroke(resolved, icon.props.color),
+      ...(icon.props.color == null && tint ? { color: tint } : undefined),
+      ...boldStroke(resolved, icon.props.color ?? tint),
     });
   }
   if (typeof icon === "function" || (typeof icon === "object" && "$$typeof" in icon)) {
-    return createElement(icon as ComponentType<{ size?: number; weight?: string }>, {
-      size,
-      weight,
-      ...boldStroke(weight),
-    });
+    return createElement(
+      icon as ComponentType<{ size?: number; weight?: string; color?: string }>,
+      {
+        size,
+        weight,
+        ...(tint ? { color: tint } : undefined),
+        ...boldStroke(weight, tint),
+      },
+    );
   }
   return icon;
 }
@@ -911,7 +923,7 @@ export function Button({
   const barGlyphFloor = barGlyph && !framedCircle && !inlineGlyph && !nested;
   const glyph =
     barGlyph || inlineGlyph || framedCircle
-      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor)
+      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk)
       : icon;
 
   // LC-158: the frame keeps its recipe height under Dynamic Type, so the
@@ -998,7 +1010,7 @@ export function Button({
   ) : null;
   const glyphAfter =
     iconAfter && (barGlyph || inlineGlyph || framedCircle)
-      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor)
+      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk)
       : iconAfter;
   const iconAfterElement = glyphAfter ? (
     <View flexShrink={0}>

package/src/FloatingPanel/FloatingPanel.iconCover.spec.tsx

@@ -0,0 +1,279 @@
+/**
+ * LC-112 icon trigger cover (FZ-8665 Round 45, reversing Round 37's X): a
+ * panel that covers the icon button it opened from sits exactly over the
+ * surface that button is seen on and repeats nothing. Its content starts at
+ * its top edge, a press outside closes it, and Escape closes it on the web.
+ */
+import { PlusIcon } from "@phosphor-icons/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import { useState } from "react";
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text, XStack } from "tamagui";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+import { PanelHeader } from "./PanelHeader";
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+function measure(trigger: Rect, panelWidth = 240, panelHeight = 160, surface?: Rect) {
+  const original = HTMLElement.prototype.getBoundingClientRect;
+  const rect = {
+    ...trigger,
+    top: trigger.y,
+    left: trigger.x,
+    right: trigger.x + trigger.width,
+    bottom: trigger.y + trigger.height,
+    toJSON: () => ({}),
+  };
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference")) return rect;
+      if (surface && this.hasAttribute("data-fp-cover-surface")) {
+        return {
+          ...surface,
+          top: surface.y,
+          left: surface.x,
+          right: surface.x + surface.width,
+          bottom: surface.y + surface.height,
+          toJSON: () => ({}),
+        };
+      }
+      return original.call(this);
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelWidth : 0;
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelHeight : 0;
+    },
+  );
+}
+
+function AddPanel({ header = false }: { header?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      anchorMode="cover-trigger"
+      compactFace="menu"
+      triggerEcho={false}
+      iconCover
+      coverAlign="auto"
+      widthMode="fit-content"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Button icon={PlusIcon} aria-label="Add node" />}
+    >
+      {header ? (
+        <PanelHeader>
+          <Text>Add a node</Text>
+        </PanelHeader>
+      ) : (
+        <Text>Add a node</Text>
+      )}
+      <Button>Copy</Button>
+    </FloatingPanel>
+  );
+}
+
+/** An account menu opened from a 32pt avatar: a trigger with no `icon`. */
+function AvatarPanel() {
+  return (
+    <FloatingPanel
+      open
+      onOpenChange={() => {}}
+      anchorMode="cover-trigger"
+      compactFace="menu"
+      triggerEcho={false}
+      iconCover
+      coverAlign="auto"
+      widthMode="fit-content"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={
+        <span role="button" aria-label="Account">
+          AD
+        </span>
+      }
+    >
+      <Text>Sign out</Text>
+    </FloatingPanel>
+  );
+}
+
+async function open(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.click(result.getByRole("button", { name: "Add node" }), { detail: 0 });
+  const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+  await waitFor(() => expect(panel.style.visibility).toBe("visible"));
+  return panel;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+const buttonsIn = (panel: HTMLElement) =>
+  within(panel)
+    .getAllByRole("button")
+    .map((button) => button.textContent || button.getAttribute("aria-label"));
+
+/** Whatever sits above the content in the panel: a hidden scroll arrow at most. */
+const aboveContent = (panel: HTMLElement) => {
+  const children = [...panel.children] as HTMLElement[];
+  const content = children.findIndex((child) => child.textContent?.includes("Add a node"));
+  expect(content).toBeGreaterThanOrEqual(0);
+  return children.slice(0, content);
+};
+
+describe("LC-112 icon trigger cover on the web (FZ-8665)", () => {
+  const viewportWidth = () => document.documentElement.clientWidth || window.innerWidth;
+
+  it("covers the + from the button's top trailing corner and repeats nothing", async () => {
+    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 240);
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    expect(panel.style.top).toBe(`${button.y}px`);
+    expect(panel.style.left).toBe(`${button.x + button.width - 240}px`);
+    expect(within(panel).queryByRole("button", { name: "Close" })).toBeNull();
+    expect(within(panel).queryByRole("button", { name: "Add node" })).toBeNull();
+    expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(panel.querySelector("[data-fp-icon-echo]")).toBeNull();
+  });
+
+  it("starts the content at the panel's top edge, with no band above it", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    for (const element of aboveContent(panel)) {
+      expect(element.textContent).toBe("");
+      expect(element.querySelector("button, [role='button']")).toBeNull();
+      expect(element.style.height).toBe("");
+    }
+  });
+
+  it("covers a grouped trigger's whole plate, with both edges, and shows none of its buttons", async () => {
+    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
+    const plate = { x: button.x - 100, y: 12, width: 144, height: 44 };
+    measure(button, 120, 160, plate);
+    const result = renderWithProviders(
+      <div data-fp-cover-surface="">
+        <Button icon={PlusIcon} aria-label="Search" />
+        <AddPanel />
+      </div>,
+    );
+    const panel = await open(result);
+    // The plate is wider than the menu, so the menu takes the plate's width
+    // and both edges.
+    expect(panel.style.left).toBe(`${plate.x}px`);
+    expect(panel.style.top).toBe(`${plate.y}px`);
+    expect(panel.style.minWidth).toBe(`${plate.width}px`);
+    expect(buttonsIn(panel)).toEqual(["Copy"]);
+  });
+
+  it("closes on a press outside the panel", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    await open(result);
+    fireEvent.click(document.body);
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+  });
+
+  it("closes on Escape and hands focus back to the button", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const trigger = result.getByRole("button", { name: "Add node" });
+    trigger.focus();
+    await open(result);
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(trigger));
+  });
+
+  it("puts a panel's title on the panel's normal padding, keeping clear of nothing", async () => {
+    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 240);
+    const result = renderWithProviders(
+      <>
+        <AddPanel header />
+        <XStack
+          data-testid="normal-padding"
+          alignItems="center"
+          gap="$2"
+          paddingLeft="$4"
+          paddingRight="$4"
+          paddingTop="$4"
+        />
+      </>,
+    );
+    const panel = await open(result);
+    const header = panel.querySelector<HTMLElement>("[data-fp-panel-header]") as HTMLElement;
+    expect(header.className).toBe(result.getByTestId("normal-padding").className);
+    expect(header.style.minHeight).toBe("");
+  });
+
+  it("keeps a content-sized trigger on a centring row's line", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const centred = renderWithProviders(
+      <div style={{ display: "flex", flexDirection: "row", alignItems: "center", height: 60 }}>
+        <AddPanel />
+      </div>,
+    );
+    const inRow = centred.container.querySelector<HTMLElement>(
+      "[data-fp-reference]",
+    ) as HTMLElement;
+    await waitFor(() => expect(getComputedStyle(inRow).alignSelf).not.toBe("flex-start"));
+    centred.unmount();
+    const column = renderWithProviders(
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "stretch" }}>
+        <AddPanel />
+      </div>,
+    );
+    const inColumn = column.container.querySelector<HTMLElement>(
+      "[data-fp-reference]",
+    ) as HTMLElement;
+    expect(getComputedStyle(inColumn).alignSelf).toBe("flex-start");
+  });
+
+  it("gives a keyboard its content and no extra stop", async () => {
+    measure({ x: 16, y: 12, width: 44, height: 44 });
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    expect(buttonsIn(panel)).toEqual(["Copy"]);
+  });
+
+  it("opens up from the button's bottom edge near the bottom, still covering it", async () => {
+    const button = { x: 16, y: window.innerHeight - 60, width: 44, height: 44 };
+    measure(button, 240, 300);
+    const result = renderWithProviders(<AddPanel />);
+    const panel = await open(result);
+    const frame = getComputedStyle(panel);
+    const borders =
+      (parseFloat(frame.borderTopWidth) || 0) + (parseFloat(frame.borderBottomWidth) || 0);
+    expect(parseFloat(panel.style.top) + 300 + borders).toBe(button.y + button.height);
+    expect(panel.style.left).toBe(`${button.x}px`);
+    expect(panel.style.transformOrigin).toBe("bottom left");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+
+  it("covers a 32pt avatar at its 44pt target, its centre on the row-icon column (FZ-8480 GAP)", async () => {
+    const avatar = { x: 100, y: 18, width: 32, height: 32 };
+    measure(avatar, 240);
+    const result = renderWithProviders(<AvatarPanel />);
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.visibility).toBe("visible"));
+    const inset = (MIN_PRESS_TARGET - avatar.width) / 2;
+    expect(panel.style.left).toBe(`${avatar.x - inset}px`);
+    expect(panel.style.top).toBe(`${avatar.y - inset}px`);
+    // The avatar's centre sits half a press target in, the centre of a menu
+    // row's leading glyph slot.
+    expect(inset + avatar.width / 2).toBe(MIN_PRESS_TARGET / 2);
+  });
+});