@multiplatform.one/forms 7.67.0 → 7.69.0

package/src/Button/Button.stories.tsx

@@ -6,9 +6,24 @@ import {
   FOCUS_RING_MIN_CONTRAST,
   ensureFocusVisibleRing,
   Paragraph,
+  Surface,
 } from "@multiplatform.one/theme";
 import { Button as TamaguiButton, XStack, YStack, useTheme } from "tamagui";
-import { Button, type ButtonProps } from "./index";
+import {
+  ArchiveIcon,
+  ArrowCircleUpIcon,
+  ArrowsClockwiseIcon,
+  CaretLeftIcon,
+  CopyIcon,
+  DotsThreeIcon,
+  DownloadSimpleIcon,
+  EnvelopeSimpleIcon,
+  HeartIcon,
+  PlusIcon,
+  TrashIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { Button, IconButton, IconButtonGroup, type ButtonProps } from "./index";
 import { useState } from "react";
 
 const pressed = (name: string) => () => action(name)();
@@ -411,10 +426,172 @@ export const DisabledReasons: Story = {
             Publish
           </Button>
           <Button disabled disabledReason="No saved changes" disabledReasonPlacement={placement}>
-            Save
+            Save draft
           </Button>
         </YStack>
       ))}
     </YStack>
   ),
 };
+
+/**
+ * LC-176 ICON-BUTTON, by context. In a bar the glyph takes the bar tint (on
+ * Liquid Glass on iOS 26); in content with no intent it is a bold glyph in the
+ * text colour; an intent keeps its ink; a selected toggle keeps LC-131; inline
+ * beside a value it is the text's size; over media it rides the one plate.
+ */
+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>
+            <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={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")}
+              />
+              <IconButton
+                plate="media"
+                icon={XIcon}
+                aria-label="Remove photo"
+                onPress={pressed("remove")}
+              />
+            </IconButtonGroup>
+          </YStack>
+        </YStack>
+      </YStack>
+    );
+  },
+};
+
+// The SHC console's call sites as written (features/console place.tsx and
+// CopyButton.tsx), spread so the design lint's `circular` finding stays on
+// SHC's own code rather than this reproduction.
+const shcRoundGlyph = { circular: true, chromeless: true, accentInk: true } as const;
+
+/** Clay's SHC Nodes screen (IMG_1925 on FZ-8020): the add and the copy. */
+export const ShcNodesScreen: Story = {
+  render: () => (
+    <YStack gap="$4" padding="$4" backgroundColor="$background" data-testid="shc-nodes">
+      <XStack alignItems="center" gap="$2">
+        <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)" />
+      </XStack>
+    </YStack>
+  ),
+};
+
+// SHC features/console manage/app/UpdatesPane.tsx as written.
+const shcUpdatePlate = { circular: true, outlined: true } as const;
+
+/**
+ * Clay's SHC Updates rows (IMG_1926 on FZ-8020): the plate SHC asks for, its
+ * glyph now at the circle ratio, above the bare tinted glyph LC-176 wants.
+ */
+export const ShcUpdateRows: Story = {
+  render: () => (
+    <YStack gap="$2" padding="$4" backgroundColor="$background" data-testid="shc-update-rows">
+      {(["$3", "$4"] as const).map((size) => (
+        <XStack key={size} alignItems="center" gap="$3" minHeight="$5">
+          <YStack flex={1}>
+            <Paragraph fontWeight="600">pokemon</Paragraph>
+            <Paragraph color="$color11">1.2.0+34</Paragraph>
+          </YStack>
+          <Button
+            size={size}
+            {...shcUpdatePlate}
+            icon={ArrowCircleUpIcon}
+            aria-label={`Update pokemon (plate ${size})`}
+          />
+        </XStack>
+      ))}
+      <XStack alignItems="center" gap="$3" minHeight="$5">
+        <YStack flex={1}>
+          <Paragraph fontWeight="600">pokemon</Paragraph>
+          <Paragraph color="$color11">1.2.0+34</Paragraph>
+        </YStack>
+        <IconButton accentInk icon={ArrowCircleUpIcon} aria-label="Update pokemon" />
+      </XStack>
+    </YStack>
+  ),
+};

package/src/Button/IconButtonGroup.spec.tsx

@@ -0,0 +1,126 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-176 (FZ-8020): icon buttons side by side share one ground, never a row
+ * of separate circles. Clay: "they'd actually group together, like you know
+ * how water bubbles all kind of group together."
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+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";
+
+const glass = vi.hoisted(() => ({ available: false, containerLoads: 0 }));
+vi.mock("./glass", () => ({
+  loadGlassView: () =>
+    glass.available ? (props: object) => <div data-glass="" {...props} /> : null,
+  loadGlassContainer: () => {
+    glass.containerLoads += 1;
+    return glass.available
+      ? ({ children, spacing }: { children?: unknown; spacing?: number }) => (
+          <div data-glass-container={spacing}>{children as never}</div>
+        )
+      : null;
+  },
+}));
+
+afterEach(() => {
+  cleanup();
+  glass.available = false;
+  glass.containerLoads = 0;
+});
+
+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) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme="light" disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
+describe("LC-176: IconButtonGroup", () => {
+  it("over media, the group is one capsule and its buttons draw their glyphs alone", () => {
+    houseRender(
+      <>
+        <IconButtonGroup plate="media">
+          <IconButton plate="media" icon={Glyph} aria-label="Replace" />
+          <IconButton plate="media" icon={Glyph} aria-label="Remove" />
+        </IconButtonGroup>
+        <IconButton plate="media" icon={Glyph} aria-label="Lone" />
+      </>,
+    );
+    const capsules = document.querySelectorAll('[data-mp-icon-button-group="media"]');
+    expect(capsules).toHaveLength(1);
+    for (const label of ["Replace", "Remove"]) {
+      const button = screen.getByLabelText(label);
+      expect(capsules[0]!.contains(button)).toBe(true);
+      expect(button.getAttribute("data-mp-icon-button")).not.toBe("media");
+      expect(button.querySelector("[data-glyph]")!.getAttribute("data-weight")).toBe("bold");
+    }
+    // A lone button keeps its own circle.
+    expect(screen.getByLabelText("Lone").getAttribute("data-mp-icon-button")).toBe("media");
+  });
+
+  it("in a bar with Liquid Glass, the group is one glass capsule and its buttons draw their glyphs alone (FZ-8158)", () => {
+    glass.available = true;
+    houseRender(
+      <Surface bar>
+        <IconButtonGroup>
+          <IconButton icon={Glyph} aria-label="Archive" />
+          <IconButton icon={Glyph} aria-label="Delete" />
+        </IconButtonGroup>
+        <IconButton icon={Glyph} aria-label="Back" />
+      </Surface>,
+    );
+    const group = document.querySelector('[data-mp-icon-button-group="glass"]')!;
+    expect(group).not.toBeNull();
+    const capsules = document.querySelectorAll("[data-glass]");
+    expect(capsules).toHaveLength(2);
+    const capsule = capsules[0]!;
+    expect(capsule.parentElement!.contains(group)).toBe(true);
+    expect(document.querySelector("[data-glass-container]")).toBeNull();
+    for (const label of ["Archive", "Delete"]) {
+      const button = screen.getByLabelText(label);
+      expect(group.contains(button)).toBe(true);
+      expect(button.getAttribute("data-mp-icon-button")).toBe("glyph");
+      expect(button.querySelector("[data-glass]")).toBeNull();
+    }
+    // A lone button keeps its own circle.
+    expect(screen.getByLabelText("Back").getAttribute("data-mp-icon-button")).toBe("glass");
+  });
+
+  it("without the glass module the bar group is a bare row", () => {
+    houseRender(
+      <Surface bar>
+        <IconButtonGroup>
+          <IconButton icon={Glyph} aria-label="Search" />
+          <IconButton icon={Glyph} aria-label="More" />
+        </IconButtonGroup>
+      </Surface>,
+    );
+    expect(document.querySelector("[data-glass-container]")).toBeNull();
+    expect(document.querySelector('[data-mp-icon-button-group="bar"]')).not.toBeNull();
+    expect(screen.getByLabelText("Search").getAttribute("data-mp-icon-button")).toBe("glyph");
+  });
+
+  it("outside a bar it never loads the glass", () => {
+    glass.available = true;
+    houseRender(
+      <IconButtonGroup>
+        <IconButton icon={Glyph} aria-label="Copy" />
+      </IconButtonGroup>,
+    );
+    expect(glass.containerLoads).toBe(0);
+    expect(document.querySelector("[data-glass]")).toBeNull();
+    expect(document.querySelector('[data-mp-icon-button-group="row"]')).not.toBeNull();
+  });
+});

package/src/Button/IconButtonGroup.tsx

@@ -0,0 +1,87 @@
+import { radiusClassProps, useBarSurface } from "@multiplatform.one/theme";
+import { useState, type ReactNode } from "react";
+import { isWeb, Theme, View, XStack, type XStackProps } from "tamagui";
+import { loadGlassView } from "./glass";
+import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
+import { IconButtonGroupContext } from "./iconButtonGroupContext";
+
+/**
+ * LC-176: how far apart two Liquid Glass circles may sit and still merge. Half
+ * the 44pt target, so neighbours on the bar's gap always join.
+ */
+export const ICON_BUTTON_GLASS_MERGE_PX = 22;
+
+export interface IconButtonGroupProps extends XStackProps {
+  /** Over imagery or video: the group shares one material capsule. */
+  plate?: "media";
+  children?: ReactNode;
+}
+
+/**
+ * LC-176: icon buttons that sit side by side. Grounds merge, they never stand
+ * as a row of separate circles: on iOS 26 the bar's group is one Liquid Glass
+ * capsule, as the system draws a bar's item group (merging each circle through
+ * the glass container left a waist between them, FZ-8158); over media the
+ * group shares one material capsule; a bare row stays bare. A lone button
+ * keeps its own circle.
+ */
+export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupProps) {
+  const bar = useBarSurface();
+  const [capsuleHeight, setCapsuleHeight] = useState(0);
+  if (plate === "media") {
+    return (
+      <IconButtonGroupContext.Provider value="media">
+        <Theme name="dark">
+          <XStack
+            alignItems="center"
+            alignSelf="flex-start"
+            borderRadius={100000}
+            backgroundColor="$shadow4"
+            overflow="hidden"
+            data-mp-icon-button-group="media"
+            {...radiusClassProps("R-IDENTITY", "icon button plate")}
+            {...(isWeb ? { style: MEDIA_PLATE_WEB_STYLE } : undefined)}
+            {...rest}
+          >
+            {children}
+          </XStack>
+        </Theme>
+      </IconButtonGroupContext.Provider>
+    );
+  }
+  const GlassView = bar ? loadGlassView() : null;
+  const row = (
+    <XStack
+      alignItems="center"
+      data-mp-icon-button-group={GlassView ? "glass" : bar ? "bar" : "row"}
+      {...rest}
+    >
+      {children}
+    </XStack>
+  );
+  if (!GlassView) return row;
+  return (
+    <IconButtonGroupContext.Provider value="glass">
+      <View
+        position="relative"
+        flexShrink={1}
+        minWidth={0}
+        onLayout={(event) => setCapsuleHeight(event.nativeEvent.layout.height)}
+      >
+        <GlassView
+          glassEffectStyle="regular"
+          pointerEvents="none"
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            borderRadius: capsuleHeight / 2,
+          }}
+        />
+        {row}
+      </View>
+    </IconButtonGroupContext.Provider>
+  );
+}

package/src/Button/glass.native.ts

@@ -0,0 +1,51 @@
+import type { GlassContainerComponent, GlassViewComponent } from "./glass";
+
+export type { GlassContainerComponent, GlassViewComponent } from "./glass";
+
+let cachedGlassView: GlassViewComponent | null | undefined;
+let cachedGlassContainer: GlassContainerComponent | null | undefined;
+
+/**
+ * LC-176: expo-glass-effect's `GlassView`, when this binary links its native
+ * module and the OS draws Liquid Glass (iOS 26+); Android never links it. The module is probed through
+ * `requireOptionalNativeModule` BEFORE the guarded `require`, so an OTA on a
+ * binary built without it, or an older iOS, falls back to the bare tinted
+ * glyph instead of throwing mid-render (the `nativePickerLoader.ts` contract).
+ */
+export function loadGlassView(): GlassViewComponent | null {
+  if (cachedGlassView !== undefined) return cachedGlassView;
+  cachedGlassView = null;
+  try {
+    const core = require("expo-modules-core") as {
+      requireOptionalNativeModule?: (moduleName: string) => unknown;
+    };
+    if (core.requireOptionalNativeModule?.("ExpoGlassEffect") == null) return cachedGlassView;
+    const glass = require("expo-glass-effect") as {
+      GlassView?: GlassViewComponent;
+      GlassContainer?: GlassContainerComponent;
+      isLiquidGlassAvailable?: () => boolean;
+      isGlassEffectAPIAvailable?: () => boolean;
+    };
+    if (
+      glass.GlassView &&
+      glass.isLiquidGlassAvailable?.() &&
+      glass.isGlassEffectAPIAvailable?.()
+    ) {
+      cachedGlassView = glass.GlassView;
+      cachedGlassContainer = glass.GlassContainer ?? null;
+    }
+  } catch {
+    cachedGlassView = null;
+  }
+  return cachedGlassView;
+}
+
+/**
+ * LC-176: expo-glass-effect's `GlassContainer`, present exactly when
+ * `loadGlassView` found Liquid Glass. A binary whose module predates the
+ * container keeps separate circles rather than throwing.
+ */
+export function loadGlassContainer(): GlassContainerComponent | null {
+  if (cachedGlassView === undefined) loadGlassView();
+  return cachedGlassContainer ?? null;
+}

package/src/Button/glass.ts

@@ -0,0 +1,33 @@
+import type { ComponentType, ReactNode } from "react";
+
+/** The slice of expo-glass-effect's `GlassView` an icon button draws. */
+export type GlassViewComponent = ComponentType<{
+  style?: unknown;
+  glassEffectStyle?: "regular" | "clear";
+  isInteractive?: boolean;
+  pointerEvents?: "none" | "auto" | "box-none" | "box-only";
+}>;
+
+/** The slice of expo-glass-effect's `GlassContainer` an icon button group draws. */
+export type GlassContainerComponent = ComponentType<{
+  spacing?: number;
+  style?: unknown;
+  children?: ReactNode;
+}>;
+
+/**
+ * LC-176: the iOS 26 Liquid Glass material an icon button floats on in a bar.
+ * Only iOS has it (`glass.native.ts`; the native module is Apple-only, so Android probes null); web, Android and GNOME draw the bare
+ * tinted glyph.
+ */
+export function loadGlassView(): GlassViewComponent | null {
+  return null;
+}
+
+/**
+ * LC-176: the container that merges neighbouring Liquid Glass circles into one
+ * shape, as iOS 26 groups bar buttons. Only iOS has it.
+ */
+export function loadGlassContainer(): GlassContainerComponent | null {
+  return null;
+}

package/src/Button/iconButtonGroupContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+/**
+ * LC-176: the ground an `IconButtonGroup` paints under its buttons. `media`
+ * is one shared material capsule and `glass` one shared Liquid Glass capsule,
+ * so a button inside draws its bare glyph instead of its own circle.
+ */
+export type IconButtonGroupGround = "media" | "glass" | null;
+
+export const IconButtonGroupContext = createContext<IconButtonGroupGround>(null);
+
+export function useIconButtonGroupGround(): IconButtonGroupGround {
+  return useContext(IconButtonGroupContext);
+}