@multiplatform.one/forms 7.81.2 → 7.82.0

package/src/Button/Button.fieldGlyph.spec.tsx

@@ -0,0 +1,186 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-176 (FZ-8711, Round 48): an icon button in a field's leading or trailing
+ * slot is part of the field. Clay, on the list search's filter and sort glass
+ * circles overhanging the field: "Liquid glass icon should not be inside of
+ * inputs though right you should do the no borders no background when you put
+ * them inside of here right". On iOS Safari and on native iOS 26 alike it is
+ * the bare tinted glyph, even when the field sits in a bar; glass stays on the
+ * bar's own buttons.
+ */
+
+import { createDefaultThemeConfig, Surface, useFieldSurface } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SearchInput } from "../fields/SearchInput";
+import { Input as InputParts } from "../InputParts";
+import { Button, IconButton, IconButtonGroup } from "./index";
+
+const glass = vi.hoisted(() => ({ system: false }));
+vi.mock("./glass", async (importOriginal) => {
+  const real = await importOriginal<typeof import("./glass")>();
+  function FakeSystemGlass({
+    glassEffectStyle: _style,
+    isInteractive: _interactive,
+    colorScheme: _scheme,
+    children,
+    ...props
+  }: Record<string, unknown>) {
+    return (
+      <div data-glass="system" {...props}>
+        {children as never}
+      </div>
+    );
+  }
+  return {
+    ...real,
+    // Native iOS 26 with expo-glass-effect linked, else the real web loader
+    // (iOS Safari's drawn face, nothing elsewhere).
+    loadGlassView: () => (glass.system ? FakeSystemGlass : real.loadGlassView()),
+    loadGlassContainer: () => (glass.system ? FakeSystemGlass : null),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  glass.system = false;
+});
+
+const IPHONE =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1";
+
+const houseConfig = createDefaultThemeConfig();
+
+function Glyph({ size, weight }: { size?: number; weight?: string }) {
+  return <svg data-glyph="" data-weight={weight} width={size} height={size} />;
+}
+
+function houseRender(ui: ReactElement, scheme: "light" | "dark") {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
+/** A bar holding a search field with filter and sort in its trailing slot, and a bar button. */
+function SearchBar() {
+  return (
+    <Surface bar>
+      <SearchInput
+        value=""
+        onChange={() => {}}
+        aria-label="Search"
+        trailing={
+          <>
+            <Button chromeless accentInk icon={Glyph} aria-label="Filter" />
+            <IconButton icon={Glyph} aria-label="Sort" />
+          </>
+        }
+      />
+      <IconButton icon={Glyph} aria-label="Add" />
+    </Surface>
+  );
+}
+
+function hasGlass(label: string): boolean {
+  return screen.getByLabelText(label).querySelector("[data-glass], [data-mp-glass]") != null;
+}
+
+const PLATFORMS = [
+  [
+    "iOS Safari",
+    () => vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 }),
+  ],
+  ["native iOS 26", () => (glass.system = true)],
+] as const;
+
+describe("LC-176: an icon button in a field's slot is the field's bare glyph (FZ-8711)", () => {
+  describe.each(PLATFORMS)("%s", (_platform, onIPhone) => {
+    it.each(["light", "dark"] as const)(
+      "the search's filter and sort draw no glass while the bar's own button keeps it (%s)",
+      (scheme) => {
+        onIPhone();
+        houseRender(<SearchBar />, scheme);
+        for (const label of ["Filter", "Sort"]) {
+          const button = screen.getByLabelText(label);
+          expect(hasGlass(label)).toBe(false);
+          expect(button.getAttribute("data-mp-icon-button")).toBe("glyph");
+          // Bold glyph, tinted, on its 44pt square.
+          expect(button.querySelector("[data-glyph]")!.getAttribute("data-weight")).toBe("bold");
+        }
+        expect(hasGlass("Add")).toBe(true);
+        expect(screen.getByLabelText("Add").getAttribute("data-mp-icon-button")).toBe("glass");
+      },
+    );
+
+    it("a framed, plated or toggled icon button in a slot still draws only its glyph", () => {
+      onIPhone();
+      houseRender(
+        <Surface bar>
+          <InputParts>
+            <InputParts.Box>
+              <InputParts.Area aria-label="Value" />
+              <Button outlined icon={Glyph} aria-label="Outlined" />
+              <Button circular icon={Glyph} aria-label="Circle" />
+              <Button plate="media" icon={Glyph} aria-label="Media" />
+              <Button selected icon={Glyph} aria-label="Toggle" />
+            </InputParts.Box>
+          </InputParts>
+        </Surface>,
+        "light",
+      );
+      for (const label of ["Outlined", "Circle", "Media", "Toggle"]) {
+        const button = screen.getByLabelText(label);
+        expect(hasGlass(label)).toBe(false);
+        expect(button.getAttribute("data-mp-icon-button")).toBe("glyph");
+        expect(button.getAttribute("data-mp-selected")).toBeNull();
+      }
+    });
+
+    it("a group in a slot paints no capsule", () => {
+      onIPhone();
+      houseRender(
+        <Surface bar>
+          <InputParts>
+            <InputParts.Box>
+              <InputParts.Area aria-label="Value" />
+              <IconButtonGroup data-testid="slot-group">
+                <IconButton icon={Glyph} aria-label="Filter" />
+                <IconButton icon={Glyph} aria-label="Sort" />
+              </IconButtonGroup>
+            </InputParts.Box>
+          </InputParts>
+        </Surface>,
+        "light",
+      );
+      const group = screen.getByTestId("slot-group");
+      expect(group.querySelector("[data-glass], [data-mp-glass]")).toBeNull();
+      expect(group.getAttribute("data-mp-icon-button-group")).not.toBe("glass");
+    });
+  });
+
+  it("an overlay opened from a slot is content again, not part of the field", () => {
+    let insideField: boolean | undefined;
+    let insideOverlay: boolean | undefined;
+    function Probe({ onRead }: { onRead: (field: boolean) => void }) {
+      onRead(useFieldSurface());
+      return null;
+    }
+    houseRender(
+      <Surface field>
+        <Probe onRead={(field) => (insideField = field)} />
+        <Surface painted={false} elevated>
+          <Probe onRead={(field) => (insideOverlay = field)} />
+        </Surface>
+      </Surface>,
+      "light",
+    );
+    expect(insideField).toBe(true);
+    expect(insideOverlay).toBe(false);
+  });
+});

package/src/Button/Button.stories.tsx

@@ -16,7 +16,6 @@ import {
   ArchiveIcon,
   ArrowCircleUpIcon,
   ArrowsClockwiseIcon,
-  CaretLeftIcon,
   CopyIcon,
   DotsThreeIcon,
   DownloadSimpleIcon,
@@ -26,6 +25,13 @@ import {
   TrashIcon,
   XIcon,
 } from "@phosphor-icons/react";
+import {
+  CodeBlock,
+  PageBackButton,
+  Popover,
+  PopoverContent,
+  ScreenToolbar,
+} from "@multiplatform.one/components";
 import { Button, IconButton, IconButtonGroup, type ButtonProps } from "./index";
 import { useState } from "react";
 
@@ -447,89 +453,93 @@ export const IconButtons: Story = {
   render: () => {
     const [on, setOn] = useState(false);
     return (
-      <YStack gap="$4" padding="$4" backgroundColor="$background">
-        <Surface bar>
-          <XStack alignItems="center" data-testid="icon-button-bar">
-            <IconButton icon={CaretLeftIcon} aria-label="Back" onPress={pressed("back")} />
-            <Paragraph flex={1} fontWeight="600">
-              Inbox
-            </Paragraph>
-            <IconButtonGroup data-testid="icon-button-toolbar">
-              <IconButton icon={ArchiveIcon} aria-label="Archive" onPress={pressed("archive")} />
-              <IconButton icon={TrashIcon} aria-label="Delete" onPress={pressed("delete")} />
-              <IconButton
-                icon={EnvelopeSimpleIcon}
-                aria-label="Mark unread"
-                selected={on}
-                onPress={() => setOn((v) => !v)}
-              />
-              <IconButton icon={DotsThreeIcon} aria-label="More" onPress={pressed("more")} />
-            </IconButtonGroup>
-          </XStack>
-        </Surface>
-        <Surface bar>
-          <XStack alignItems="center" data-testid="icon-button-bar-disabled">
-            <Paragraph flex={1}>Downloads</Paragraph>
+      <YStack backgroundColor="$background">
+        <ScreenToolbar
+          data-testid="icon-button-bar"
+          leading={<PageBackButton onPress={pressed("back")} />}
+          title="Inbox"
+          trailing={<IconButton icon={DotsThreeIcon} aria-label="More" onPress={pressed("more")} />}
+        />
+        <YStack gap="$4" padding="$4">
+          <Surface bar>
+            <XStack justifyContent="center" data-testid="icon-button-toolbar">
+              <IconButtonGroup>
+                <IconButton icon={ArchiveIcon} aria-label="Archive" onPress={pressed("archive")} />
+                <IconButton icon={TrashIcon} aria-label="Delete" onPress={pressed("delete")} />
+                <IconButton
+                  icon={EnvelopeSimpleIcon}
+                  aria-label="Mark unread"
+                  selected={on}
+                  onPress={() => setOn((v) => !v)}
+                />
+              </IconButtonGroup>
+            </XStack>
+          </Surface>
+          <Surface bar>
+            <XStack alignItems="center" data-testid="icon-button-bar-disabled">
+              <Paragraph flex={1}>Downloads</Paragraph>
+              <IconButtonGroup>
+                <IconButton
+                  icon={DownloadSimpleIcon}
+                  aria-label="Download"
+                  onPress={pressed("download")}
+                />
+                <IconButton
+                  icon={DownloadSimpleIcon}
+                  aria-label="Download (nothing to download)"
+                  disabled
+                />
+              </IconButtonGroup>
+            </XStack>
+          </Surface>
+          <XStack alignItems="center" data-testid="icon-button-content">
+            <Paragraph flex={1}>A row in content</Paragraph>
             <IconButtonGroup>
               <IconButton
                 icon={DownloadSimpleIcon}
                 aria-label="Download"
                 onPress={pressed("download")}
               />
-              <IconButton
-                icon={DownloadSimpleIcon}
-                aria-label="Download (nothing to download)"
-                disabled
-              />
+              <IconButton icon={TrashIcon} error aria-label="Delete" onPress={pressed("delete")} />
             </IconButtonGroup>
           </XStack>
-        </Surface>
-        <XStack alignItems="center" data-testid="icon-button-content">
-          <Paragraph flex={1}>A row in content</Paragraph>
-          <IconButtonGroup>
-            <IconButton
-              icon={DownloadSimpleIcon}
-              aria-label="Download"
-              onPress={pressed("download")}
-            />
-            <IconButton icon={TrashIcon} error aria-label="Delete" onPress={pressed("delete")} />
-          </IconButtonGroup>
-        </XStack>
-        <XStack alignItems="center" data-testid="icon-button-inline">
-          <Paragraph>shc node join</Paragraph>
-          <IconButton inline icon={CopyIcon} aria-label="Copy" onPress={pressed("copy")} />
-        </XStack>
-        <YStack
-          position="relative"
-          width="$20"
-          height="$12"
-          backgroundColor="$blue9"
-          borderRadius="$4"
-          data-testid="icon-button-media"
-        >
-          <YStack position="absolute" top="$2" left="$2">
-            <IconButton
-              plate="media"
-              icon={HeartIcon}
-              aria-label="Favourite"
-              onPress={pressed("favourite")}
-            />
-          </YStack>
-          <YStack position="absolute" top="$2" right="$2">
-            <IconButtonGroup plate="media">
-              <IconButton
-                plate="media"
-                icon={ArrowsClockwiseIcon}
-                aria-label="Replace photo"
-                onPress={pressed("replace")}
-              />
+          <XStack alignItems="center" data-testid="icon-button-inline">
+            <Paragraph>10.64.96.1:4003</Paragraph>
+            <IconButton inline icon={CopyIcon} aria-label="Copy" onPress={pressed("copy")} />
+          </XStack>
+          <CodeBlock language="text">shc node join</CodeBlock>
+          <YStack
+            position="relative"
+            width="$20"
+            height="$12"
+            backgroundColor="$blue9"
+            borderRadius="$4"
+            data-testid="icon-button-media"
+          >
+            <YStack position="absolute" top="$2" left="$2">
               <IconButton
                 plate="media"
-                icon={XIcon}
-                aria-label="Remove photo"
-                onPress={pressed("remove")}
+                icon={HeartIcon}
+                aria-label="Favourite"
+                onPress={pressed("favourite")}
               />
-            </IconButtonGroup>
+            </YStack>
+            <YStack position="absolute" top="$2" right="$2">
+              <IconButtonGroup plate="media">
+                <IconButton
+                  plate="media"
+                  icon={ArrowsClockwiseIcon}
+                  aria-label="Replace photo"
+                  onPress={pressed("replace")}
+                />
+                <IconButton
+                  plate="media"
+                  icon={XIcon}
+                  aria-label="Remove photo"
+                  onPress={pressed("remove")}
+                />
+              </IconButtonGroup>
+            </YStack>
           </YStack>
         </YStack>
       </YStack>
@@ -560,15 +570,20 @@ export const ShcNodesScreen: TintStory = {
           <Paragraph flex={1} size="$9" fontWeight="700">
             Nodes
           </Paragraph>
-          <Button size="$3" {...shcRoundGlyph} icon={PlusIcon} aria-label="Add node" />
-        </XStack>
-        <XStack alignItems="center" gap="$2">
-          <Paragraph fontFamily="$mono">shc node join</Paragraph>
-          <Button size="$2" {...shcRoundGlyph} icon={CopyIcon} aria-label="Copy" />
-        </XStack>
-        <XStack alignItems="center">
-          <Paragraph fontFamily="$mono">shc node join</Paragraph>
-          <IconButton inline icon={CopyIcon} aria-label="Copy (inline)" />
+          <Popover anchorMode="cover-trigger">
+            <Popover.Trigger asChild>
+              <Button size="$3" {...shcRoundGlyph} icon={PlusIcon} aria-label="Add node" />
+            </Popover.Trigger>
+            <PopoverContent>
+              <YStack padding="$4" gap="$3" width={320} maxWidth="100%">
+                <Paragraph size="$5" fontWeight="600">
+                  Add a node
+                </Paragraph>
+                <Paragraph color="$color11">Run this on the new machine.</Paragraph>
+                <CodeBlock language="text">shc node join</CodeBlock>
+              </YStack>
+            </PopoverContent>
+          </Popover>
         </XStack>
       </YStack>
     </GlyphTintFallbackProvider>

package/src/Button/IconButtonGroup.spec.tsx

@@ -11,7 +11,7 @@ import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
 import { TamaguiProvider } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { IconButton, IconButtonGroup } from "./index";
+import { IconButton, IconButtonGroup, useGlyphOnPlate } from "./index";
 
 const glass = vi.hoisted(() => ({
   available: false,
@@ -99,6 +99,53 @@ describe("LC-176: IconButtonGroup", () => {
     expect(screen.getByLabelText("Back").querySelector("[data-glass]")).not.toBeNull();
   });
 
+  it("a group of one is no capsule: its button keeps its own glass circle (FZ-8442)", () => {
+    vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
+    glass.available = true;
+    houseRender(
+      <Surface bar>
+        <IconButtonGroup data-testid="group">
+          <>
+            <IconButton icon={Glyph} aria-label="Add node" edge="end" />
+          </>
+        </IconButtonGroup>
+      </Surface>,
+    );
+    const group = screen.getByTestId("group");
+    expect(group.querySelector("[data-mp-glass-capsule]")).toBeNull();
+    expect(screen.getByLabelText("Add node").querySelector("[data-glass]")).not.toBeNull();
+  });
+
+  it("a glyph on glass is told it is plated, so it centres instead of pulling (FZ-8442)", () => {
+    vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
+    glass.available = true;
+    function Probe({ size }: { size?: number }) {
+      return <svg data-plated={String(useGlyphOnPlate())} width={size} height={size} />;
+    }
+    houseRender(
+      <>
+        <Surface bar>
+          <IconButton icon={Probe} aria-label="Back" edge="start" />
+          <IconButtonGroup>
+            <IconButton icon={Probe} aria-label="Archive" />
+            <IconButton icon={Probe} aria-label="Delete" edge="end" />
+          </IconButtonGroup>
+        </Surface>
+        <IconButton icon={Probe} aria-label="Copy" />
+      </>,
+    );
+    for (const name of ["Back", "Archive", "Delete"]) {
+      const button = screen.getByLabelText(name);
+      expect(button.querySelector("svg")?.getAttribute("data-plated")).toBe("true");
+      const style = getComputedStyle(button);
+      for (const side of ["marginLeft", "marginRight", "marginInlineStart", "marginInlineEnd"])
+        expect(parseFloat(style[side as "marginLeft"] || "0") || 0).toBeGreaterThanOrEqual(0);
+    }
+    expect(screen.getByLabelText("Copy").querySelector("svg")?.getAttribute("data-plated")).toBe(
+      "false",
+    );
+  });
+
   it("a lone glass circle fills the button's border box, as wide as the ✓ beside it (FZ-8439)", () => {
     glass.available = true;
     houseRender(

package/src/Button/IconButtonGroup.tsx

@@ -1,4 +1,9 @@
-import { isDarkThemeName, radiusClassProps, useBarSurface } from "@multiplatform.one/theme";
+import {
+  isDarkThemeName,
+  radiusClassProps,
+  useBarSurface,
+  useFieldSurface,
+} from "@multiplatform.one/theme";
 import { Children, useCallback, useMemo, useRef, useState, type ReactNode } from "react";
 import { isWeb, Theme, useThemeName, View, XStack, type XStackProps } from "tamagui";
 import { loadGlassContainer, loadGlassView } from "./glass";
@@ -35,7 +40,10 @@ export interface IconButtonGroupProps extends XStackProps {
  * bar group with no icon button in it paints no capsule (FZ-8494).
  */
 export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupProps) {
-  const bar = useBarSurface();
+  // LC-176 (FZ-8711): a group in a field's slot is part of the field, so it
+  // paints no capsule of its own: neither bar glass nor the media plate.
+  const field = useFieldSurface();
+  const bar = useBarSurface() && !field;
   const dark = isDarkThemeName(useThemeName());
   const [capsuleHeight, setCapsuleHeight] = useState(0);
   const [members, setMembers] = useState(0);
@@ -59,7 +67,7 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
     }),
     [],
   );
-  if (plate === "media") {
+  if (plate === "media" && !field) {
     return (
       <IconButtonGroupContext.Provider value="media">
         <Theme name="dark">
@@ -80,26 +88,34 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
     );
   }
   const GlassView = bar ? loadGlassView() : null;
+  // A group of one button is a lone button, and keeps its circle (FZ-8442).
+  const lone = members === 1 && Children.toArray(children).length === 1;
   if (GlassView && isWeb && isAppleTouchWeb()) {
     // The caller's layout props stay on the outer row; the capsule hugs the
     // buttons inside it, so a stretched slot never draws a wide empty pill.
+    // A lone button keeps the same tree, so it never remounts as it registers.
+    const capsuled = members > 0 && !lone;
     return (
       <IconButtonGroupRegistry.Provider value={register}>
-        <IconButtonGroupContext.Provider value="glass">
+        <IconButtonGroupContext.Provider value={lone ? null : "glass"}>
           <XStack
             alignItems="center"
-            data-mp-icon-button-group={members > 0 ? "glass" : "bar"}
+            data-mp-icon-button-group={capsuled ? "glass" : "bar"}
             {...rest}
           >
             <XStack
               alignItems="center"
               position="relative"
               zIndex={0}
-              paddingHorizontal="$2"
-              gap="$1"
-              data-mp-glass-capsule=""
+              {...(lone
+                ? null
+                : {
+                    paddingHorizontal: "$2" as const,
+                    gap: "$1" as const,
+                    "data-mp-glass-capsule": "",
+                  })}
             >
-              {members > 0 ? (
+              {capsuled ? (
                 <GlassView
                   style={{
                     position: "absolute",
@@ -120,9 +136,7 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
   }
   const capsule = GlassView != null && members > 0;
   // The capsule hugs its buttons with the web twin's $2 end inset and $1 gap,
-  // so its first and last items never sit on its curve (FZ-8550). A group of
-  // one button is a lone button, and keeps its circle.
-  const lone = members === 1 && Children.toArray(children).length === 1;
+  // so its first and last items never sit on its curve (FZ-8550).
   const row = (
     <XStack
       alignItems="center"

package/src/Button/iconButtonGroupContext.ts

@@ -15,6 +15,18 @@ export function useIconButtonGroupGround(): IconButtonGroupGround {
   return useContext(IconButtonGroupContext);
 }
 
+/**
+ * LC-176: true while a glyph is drawn centred on a visible ground (a glass
+ * circle or capsule, the media plate, a framed circle). An icon that pulls
+ * itself toward a container edge for optical alignment, such as the back
+ * caret, keeps its ink centred instead.
+ */
+export const GlyphPlateContext = createContext(false);
+
+export function useGlyphOnPlate(): boolean {
+  return useContext(GlyphPlateContext);
+}
+
 /**
  * An icon button counts itself into the group around it, so a bar group of
  * only non-icon children (a status badge in a page head) paints no capsule