@multiplatform.one/forms 7.80.0 → 7.81.0

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);
+  });
+});

package/src/FloatingPanel/FloatingPanel.menuFace.native.spec.tsx

@@ -4,8 +4,8 @@
  * so only inside another overlay, so a sheet never stacks on a sheet.
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { act, render } from "@testing-library/react";
-import { PlusIcon, XIcon } from "@phosphor-icons/react";
+import { act } from "@testing-library/react";
+import { PlusIcon } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Text, XStack, YStack, getTokens, getVariableValue } from "tamagui";
@@ -462,7 +462,7 @@ describe("FloatingPanel native menu face panelWidth (LC-112, FZ-8438 r3)", () =>
   });
 });
 
-function EchoMenu({ kind }: { kind: "close" | "menu" }) {
+function CoverMenu() {
   const [open, setOpen] = useState(false);
   return (
     <FloatingPanel
@@ -471,7 +471,7 @@ function EchoMenu({ kind }: { kind: "close" | "menu" }) {
       compactFace="menu"
       anchorMode="cover-trigger"
       triggerEcho={false}
-      iconEcho={kind}
+      iconCover
       coverAlign="auto"
       triggerSizing="content"
       contentPadding="none"
@@ -483,67 +483,92 @@ function EchoMenu({ kind }: { kind: "close" | "menu" }) {
   );
 }
 
-const iconEcho = () =>
-  document.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
-const iconBand = () =>
-  document.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo-band"]');
-const glyphPath = (node: Element | null) => node?.querySelector("svg path")?.getAttribute("d");
+const clip = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-menu-clip"]') as HTMLElement;
+
+/** The live prop a component took: RN-web drops the ones it has no DOM use for. */
+function propOf<T>(node: Element, name: string): T | undefined {
+  const key = Object.keys(node).find((candidate) => candidate.startsWith("__reactFiber$"));
+  let fiber = (node as unknown as Record<string, FiberLike | undefined>)[key ?? ""];
+  while (fiber) {
+    const value = fiber.memoizedProps?.[name];
+    if (value !== undefined) return value as T;
+    fiber = fiber.return;
+  }
+  return undefined;
+}
+type FiberLike = { memoizedProps?: Record<string, unknown>; return?: FiberLike };
+
+function settleMenu() {
+  layout(menu() as HTMLElement, MENU_MIN_WIDTH, 180);
+  act(() => {
+    vi.advanceTimersByTime(1000);
+  });
+}
 
-describe("LC-112 icon trigger echo on native (FZ-8480, rv_2607879d3bdaf9bf)", () => {
-  it("draws the + again as an X in the button's own box, at the menu's top trailing corner", () => {
+describe("LC-112 icon trigger cover on native (FZ-8665, reversing Round 37's X)", () => {
+  it("covers the + from the button's top trailing corner and repeats nothing", () => {
     trigger = { x: 330, y: 60, width: 44, height: 44 };
-    const result = renderWithProviders(<EchoMenu kind="close" />);
+    const result = renderWithProviders(<CoverMenu />);
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     const panel = menu() as HTMLElement;
     layout(panel, MENU_MIN_WIDTH, 180);
     expect(panel.style.top).toBe(`${trigger.y}px`);
     expect(panel.style.left).toBe(`${trigger.x + trigger.width - MENU_MIN_WIDTH}px`);
-    const band = iconBand() as HTMLElement;
-    expect(band.style.height).toBe("44px");
-    const box = band.firstElementChild as HTMLElement;
-    expect(box.style.width).toBe("44px");
-    expect(box.style.height).toBe("44px");
-    // The box sits where the trigger is: its start offset is the trigger's x
-    // less the menu's left edge.
-    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(
-      `${trigger.x - (trigger.x + trigger.width - MENU_MIN_WIDTH)}px`,
-    );
-    const echoButton = iconEcho() as HTMLElement;
-    expect(echoButton.getAttribute("aria-label")).toBe("Close");
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(echoButton)).toBe(glyphPath(x.container));
-    x.unmount();
     expect(echo()).toBeNull();
+    expect(document.querySelector('[data-testid="floating-panel-icon-echo"]')).toBeNull();
+    expect(document.querySelector('[data-testid="floating-panel-icon-echo-band"]')).toBeNull();
   });
 
-  it("closes the menu when the echo is pressed", () => {
+  it("starts the rows at the panel's top edge: the scroll view is the panel's only child", () => {
     trigger = { x: 330, y: 60, width: 44, height: 44 };
-    const result = renderWithProviders(<EchoMenu kind="close" />);
+    const result = renderWithProviders(<CoverMenu />);
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     layout(menu() as HTMLElement, MENU_MIN_WIDTH, 180);
-    act(() => {
-      vi.advanceTimersByTime(1000);
-    });
-    tap(iconEcho() as HTMLElement);
+    expect(clip().children).toHaveLength(1);
+    expect(clip().textContent).toBe("Add a node");
+  });
+
+  it("closes from the backdrop, which a screen reader reads as Close", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    settleMenu();
+    tap(result.getByRole("button", { name: "Close" }));
+    expect(menu()).toBeNull();
+  });
+
+  it("closes from VoiceOver's escape gesture", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    settleMenu();
+    const escape = propOf<() => void>(frame() as HTMLElement, "onAccessibilityEscape");
+    expect(escape).toBeTypeOf("function");
+    act(() => escape?.());
     expect(menu()).toBeNull();
   });
 
-  it("turns a menu trigger into an X too, and opens up from the button's bottom edge near the bottom", () => {
+  it("is modal to VoiceOver, holding only its backdrop Close and the panel", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    settleMenu();
+    const layer = document.querySelector<HTMLElement>('[data-testid="floating-panel-menu-layer"]');
+    expect(layer).not.toBeNull();
+    expect(propOf<boolean>(layer as HTMLElement, "accessibilityViewIsModal")).toBe(true);
+    expect(layer?.contains(result.getByRole("button", { name: "Close" }))).toBe(true);
+    expect(layer?.contains(menu())).toBe(true);
+  });
+
+  it("still covers its button when it opens up from the bottom edge", () => {
     trigger = { x: 20, y: 760, width: 44, height: 44 };
-    const result = renderWithProviders(<EchoMenu kind="menu" />);
-    const live = result.getAllByRole("button", { name: "Add node" })[0]!;
-    tap(live);
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     const panel = menu() as HTMLElement;
     layout(panel, MENU_MIN_WIDTH, 300);
     expect(parseFloat(panel.style.top) + 300).toBe(trigger.y + trigger.height);
-    const surface = frame() as HTMLElement;
-    const band = iconBand() as HTMLElement;
-    const clip = surface.querySelector('[data-testid="floating-panel-menu-clip"]') as HTMLElement;
-    expect(clip.lastElementChild).toBe(band);
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(iconEcho())).toBe(glyphPath(x.container));
-    x.unmount();
-    expect(glyphPath(iconEcho())).not.toBe(glyphPath(live));
+    expect(clip().children).toHaveLength(1);
   });
 });
 
@@ -554,11 +579,11 @@ const capsuleSurface = (plate: IconButtonGroupPlate): IconButtonGroupSurface =>
 describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)", () => {
   const plate = { x: 200, y: 50, width: 174, height: 44, radius: 22 };
 
-  it("covers the whole capsule from context at its radius; only the pressed trigger shows, as its X", () => {
+  it("covers the whole capsule from context at its radius, showing none of its buttons", () => {
     trigger = { x: 330, y: 50, width: 44, height: 44 };
     const result = renderWithProviders(
       <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(plate)}>
-        <EchoMenu kind="menu" />
+        <CoverMenu />
       </IconButtonGroupSurfaceContext.Provider>,
     );
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
@@ -572,18 +597,8 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
     expect(left + MENU_MIN_WIDTH).toBeGreaterThanOrEqual(plate.x + plate.width);
     expect(left).toBe(plate.x + plate.width - MENU_MIN_WIDTH);
     expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(plate.radius));
-    // The band is the capsule's height; the X keeps the trigger's own box.
-    const band = iconBand() as HTMLElement;
-    expect(band.style.height).toBe(`${plate.height}px`);
-    const box = band.firstElementChild as HTMLElement;
-    expect(box.style.width).toBe(`${trigger.width}px`);
-    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${trigger.x - left}px`);
-    // Only the pressed trigger shows, as an X; nothing else of the group.
-    const echoes = document.querySelectorAll('[data-testid="floating-panel-icon-echo"]');
-    expect(echoes).toHaveLength(1);
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(echoes[0] as Element)).toBe(glyphPath(x.container));
-    x.unmount();
+    expect(clip().children).toHaveLength(1);
+    expect(clip().textContent).toBe("Add a node");
   });
 
   it("takes the capsule's width as its floor when the capsule is wider than the menu", () => {
@@ -591,7 +606,7 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
     trigger = { x: 330, y: 50, width: 44, height: 44 };
     const result = renderWithProviders(
       <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(wide)}>
-        <EchoMenu kind="menu" />
+        <CoverMenu />
       </IconButtonGroupSurfaceContext.Provider>,
     );
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
@@ -612,7 +627,7 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
           },
         }}
       >
-        <EchoMenu kind="menu" />
+        <CoverMenu />
       </IconButtonGroupSurfaceContext.Provider>,
     );
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
@@ -626,20 +641,14 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
 
   it("covers a 32pt avatar at its 44pt target, so its centre is the row-icon column (FZ-8480)", () => {
     trigger = { x: 100, y: 56, width: 32, height: 32 };
-    const result = renderWithProviders(<EchoMenu kind="menu" />);
+    const result = renderWithProviders(<CoverMenu />);
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     const panel = menu() as HTMLElement;
     layout(panel, MENU_MIN_WIDTH, 180);
     const inset = (MIN_PRESS_TARGET - trigger.width) / 2;
     expect(panel.style.left).toBe(`${trigger.x - inset}px`);
     expect(panel.style.top).toBe(`${trigger.y - inset}px`);
-    const band = iconBand() as HTMLElement;
-    expect(band.style.height).toBe(`${MIN_PRESS_TARGET}px`);
-    const box = band.firstElementChild as HTMLElement;
-    expect(box.style.width).toBe(`${trigger.width}px`);
-    expect(box.style.marginTop).toBe(`${inset}px`);
-    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${inset}px`);
-    // The X's centre sits half a press target in: where a row's leading
+    // The avatar's centre sits half a press target in: where a row's leading
     // glyph centres (row inset plus half its 18pt slot, on the frame border).
     expect(inset + trigger.width / 2).toBe(MIN_PRESS_TARGET / 2);
   });

package/src/FloatingPanel/FloatingPanel.seamlessCover.spec.tsx

@@ -212,6 +212,18 @@ describe("LC-112 icon trigger: the menu opens on its button (rv_d86cc201997dffd4
     expect(within(panel).queryByRole("button", { name: "Appearance" })).toBeNull();
   });
 
+  it("lands on a whole pixel when its button sits on a half pixel, so rows reach the far edge (FZ-8557)", async () => {
+    const button = { x: 16.5, y: 12, width: 40, height: 40 };
+    measure(button, 124.6);
+    const result = renderWithProviders(<IconPanel />);
+    fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.top).toBe(`${button.y}px`));
+    const left = parseFloat(panel.style.left);
+    expect(Number.isInteger(left)).toBe(true);
+    expect(Math.abs(left - button.x)).toBeLessThanOrEqual(0.5);
+  });
+
   it("slides up over its button near the bottom edge instead of opening a sheet", async () => {
     const button = { x: 16, y: window.innerHeight - 60, width: 44, height: 44 };
     measure(button, 200);