@multiplatform.one/frappe-ui 7.67.0 → 7.68.0

package/src/FrappeFormActions.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionButton,
   Chip,
   DropdownMenu,
   PageMenuButton,
@@ -10,7 +11,6 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   ArrowCounterClockwiseIcon,
   CheckCircleIcon,
-  FloppyDiskIcon,
   PencilSimpleIcon,
   ProhibitIcon,
   TrashIcon,
@@ -122,33 +122,27 @@ export function FrappeFormActions({
       )}
 
       {onDelete && (
-        <Button
-          outlined
+        <ActionButton
+          kind="delete"
           error
-          icon={TrashIcon}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onDelete}
-        >
-          {t("Delete")}
-        </Button>
+        />
       )}
 
       {onClose && (
-        <Button
-          outlined={!footer}
-          icon={footer ? undefined : XIcon}
+        <ActionButton
+          // A submitted document's own Cancel sits beside this button.
+          kind={action === "cancel" ? "close" : "cancel"}
           disabled={closeDisabled}
           disabledReason={closeDisabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onClose}
           testID="frappe-form-close"
-        >
-          {/* A submitted document's own Cancel sits beside this button. */}
-          {action === "cancel" ? t("Close") : t("Cancel")}
-        </Button>
+        />
       )}
 
       {action === "cancel" && (
@@ -169,18 +163,14 @@ export function FrappeFormActions({
       )}
 
       {onEdit && (
-        <Button
-          accent={action !== "submit"}
-          outlined={action === "submit"}
-          icon={PencilSimpleIcon}
+        <ActionButton
+          kind="edit"
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onEdit}
           testID="frappe-form-edit"
-        >
-          {t("Edit")}
-        </Button>
+        />
       )}
 
       {action === "amend" && onAmend && (
@@ -208,6 +198,7 @@ export function FrappeFormActions({
 
       {action === "submit" && (
         <Button
+          // action-word-escape: Frappe's docstatus Submit, a lifecycle step a check would hide
           accent
           icon={CheckCircleIcon}
           flex={footer ? 1 : undefined}
@@ -223,19 +214,16 @@ export function FrappeFormActions({
       )}
 
       {(action === "save" || action === "update") && (
-        <Button
-          accent
-          icon={footer ? undefined : FloppyDiskIcon}
-          flex={footer ? 1 : undefined}
+        <ActionButton
+          kind="save"
+          label={action === "update" ? t("Update") : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onSave}
           testID="frappe-form-save"
-        >
-          {busy ? t("Saving...") : action === "update" ? t("Update") : t("Save")}
-        </Button>
+        />
       )}
     </XStack>
   );
@@ -269,19 +257,19 @@ export function FrappeFormHeaderActions({
 
   const primary =
     action === "save" || action === "update" ? (
-      <Button
-        accent
+      <ActionButton
+        kind="save"
+        label={action === "update" ? t("Update") : undefined}
         loading={busy}
         disabled={disabled}
         disabledReason={disabled ? readOnlyReason : undefined}
         disabledReasonPlacement="inline"
         onPress={onSave}
         testID="frappe-form-save"
-      >
-        {busy ? t("Saving...") : action === "update" ? t("Update") : t("Save")}
-      </Button>
+      />
     ) : action === "submit" ? (
       <Button
+        // action-word-escape: Frappe's docstatus Submit, a lifecycle step a check would hide
         accent
         loading={busy}
         disabled={disabled}
@@ -312,16 +300,14 @@ export function FrappeFormHeaderActions({
         {t("Amend")}
       </Button>
     ) : onEdit ? (
-      <Button
-        accent
+      <ActionButton
+        kind="edit"
         disabled={disabled}
         disabledReason={disabled ? readOnlyReason : undefined}
         disabledReasonPlacement="inline"
         onPress={onEdit}
         testID="frappe-form-edit"
-      >
-        {t("Edit")}
-      </Button>
+      />
     ) : null;
 
   const lifecyclePrimary =

package/src/FrappeKanban.tsx

@@ -266,7 +266,6 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
         {canQuickAdd && column.id !== "__unassigned__" && (
           <Button
             size="$2"
-            circular
             chromeless
             icon={PlusIcon}
             aria-label={t("Add card to {{column}}", { column: column.title })}

package/src/FrappeLikedBy.tsx

@@ -281,10 +281,10 @@ function FrappeLikedByBody({
         <XStack alignItems="center" gap="$2">
           <Button
             size="$2"
-            circular
             chromeless
             disabled={!canToggle}
             aria-pressed={liked}
+            selected={false}
             aria-label={liked ? t("Unlike") : t("Like")}
             onPress={handleToggle}
             icon={

package/src/FrappeListView.spec.tsx

@@ -130,10 +130,14 @@ describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
     expect(refresh.className).not.toMatch(negativeMarginAtom);
     const token = refresh.getAttribute("data-size-token") as SizeTokens;
     const px = Number(getVariableValue(getSize(token)));
-    expect(refresh.className).toContain(`_mih-${px}px`);
-    expect(refresh.className).toContain(`_miw-${px}px`);
+    // LC-176: the bare glyph sits in a square box at its control height, inside
+    // the token box, and slop restores the 44pt press floor.
+    const box = Number(/(?:^| )_mih-(\d+)px/.exec(refresh.className)?.[1]);
+    expect(refresh.className).toContain(`_miw-${box}px`);
+    expect(box).toBeGreaterThan(0);
+    expect(box).toBeLessThanOrEqual(px);
     const slop = Number(refresh.getAttribute("data-mp-press-slop") ?? 0);
-    expect(px + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(box + slop * 2).toBeGreaterThanOrEqual(44);
   });
 
   it("hover feedback rides the button's own in-slot box (house channel)", async () => {

package/src/FrappeListView.tsx

@@ -1202,7 +1202,6 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
               feedback stays inside its own layout slot. */}
           <Button
             size="$2"
-            circular
             chromeless
             icon={ArrowsClockwiseIcon}
             onPress={handleRefresh}

package/src/FrappeReportView.tsx

@@ -40,7 +40,7 @@
  * hidden where the web download pipeline does not exist.
  */
 import { AsyncBoundary, EmptyState } from "@multiplatform.one/components";
-import { Button, DatePicker, Spinner, formCommonColors } from "@multiplatform.one/forms";
+import { DatePicker, IconButton, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import {
   DataTable,
   DataTableExport,
@@ -477,14 +477,11 @@ export function FrappeReportView({
             </XStack>
           )}
           {refreshShown && (
-            <Button
-              size="$2"
+            <IconButton
               icon={ArrowClockwiseIcon}
               onPress={refresh}
               aria-label={t("Refresh report")}
-            >
-              {t("Refresh")}
-            </Button>
+            />
           )}
           {exportEnabled && rows.length > 0 && (
             <DataTableExport

package/src/desk/DeskShell.tsx

@@ -157,7 +157,6 @@ export function DeskShell({
   const toggleButton = showMobileToggle ? (
     <Button
       chromeless
-      circular
       icon={mobileSidebarOpen ? XIcon : ListIcon}
       aria-label={t("Toggle sidebar")}
       aria-expanded={mobileSidebarOpen}

package/src/desk/deskDocumentRoutes.spec.tsx

@@ -21,9 +21,12 @@ vi.mock("../FrappeListView", () => ({
 }));
 vi.mock("../FrappeForm", () => ({
   FrappeForm: ({ onSave, name }: { onSave: (doc: { name: string }) => void; name?: string }) => (
-    <button onClick={() => onSave({ name: state.name })} data-testid="form" data-name={name}>
-      Save
-    </button>
+    <button
+      aria-label="Save"
+      onClick={() => onSave({ name: state.name })}
+      data-testid="form"
+      data-name={name}
+    />
   ),
 }));
 vi.mock("@multiplatform.one/components", () => ({
@@ -59,7 +62,7 @@ describe.each(["A/B", "A?B", "A#B", "A B", "Pokémon", "A%2FB"])("desk document
     state.name = name;
     const navigate = vi.fn();
     render(<DeskFormPage doctype="todo" onNavigate={navigate} />);
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     expect(navigate).toHaveBeenCalledWith(path);
   });
 });

package/src/fields/Date/typeParity.spec.tsx

@@ -119,10 +119,12 @@ async function pressText(root: ParentNode, text: string) {
   let target: Element | null = null;
   await waitFor(
     () => {
-      const node = Array.from(root.querySelectorAll("*")).find(
-        (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
-      );
-      if (!node) throw new Error(`no element with text "${text}"`);
+      // LC-260: Next and Done are icon buttons, named by their label.
+      const node =
+        Array.from(root.querySelectorAll("*")).find(
+          (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
+        ) ?? root.querySelector(`[aria-label="${text}"]`);
+      if (!node) throw new Error(`no element with text or label "${text}"`);
       target = node;
     },
     { timeout: 30_000 },

package/src/fields/FileUpload.spec.tsx

@@ -123,7 +123,7 @@ describe("FileUpload size gate", () => {
  * `aria-label` still fails. Recorded on MPO-123.
  */
 const buttonLabelled = (container: HTMLElement, prefix: string) =>
-  Array.from(container.querySelectorAll("button")).find((b) =>
+  Array.from(container.querySelectorAll('button, [role="button"]')).find((b) =>
     (b.getAttribute("aria-label") ?? "").startsWith(prefix),
   );
 
@@ -226,8 +226,9 @@ describe("FileUpload transfer", () => {
       /^Retry \S/,
     );
     expect(remove?.getAttribute("aria-label")).toMatch(/^Remove \S/);
-    // The visible text stays the short verb; the file name lives on the label.
-    expect(buttonLabelled(result.container, "Retry ")?.textContent).toContain("Retry");
+    // LC-260: the button shows only its glyph; the name lives on the label.
+    expect(buttonLabelled(result.container, "Retry ")?.textContent).toBe("");
+    expect(buttonLabelled(result.container, "Retry ")?.querySelector("svg")).toBeTruthy();
 
     await act(async () => {
       fireEvent.click(buttonLabelled(result.container, "Retry ") as Element);
@@ -292,6 +293,20 @@ describe("FileUpload with a value", () => {
     expect(onChange).toHaveBeenCalledWith("");
   });
 
+  it("an image's Replace and Remove are glyphs on the media plate over it (LC-260, LC-176)", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Photo" value="/files/sprite.png" isImage onChange={() => {}} />,
+    );
+    const actions = result.container.querySelector('[data-file-upload="preview-actions"]');
+    expect(actions).toBeTruthy();
+    const buttons = Array.from(actions!.querySelectorAll("[data-mp-action]"));
+    expect(buttons.map((b) => b.getAttribute("aria-label"))).toEqual(["Replace", "Remove"]);
+    for (const button of buttons) {
+      expect(button.getAttribute("data-mp-icon-button")).toBe("media");
+      expect(button.textContent).toBe("");
+    }
+  });
+
   it("readOnly hides Replace and Remove — the value is visible, not editable", () => {
     const result = renderWithProviders(
       <FileUpload label="Attachment" value="/files/report.pdf" readOnly onChange={() => {}} />,

package/src/fields/FileUpload.tsx

@@ -1,13 +1,13 @@
 import { useFrappeCollection } from "@multiplatform.one/frappe";
 import { Skeleton } from "@multiplatform.one/forms";
-import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
+import { FileIcon, UploadIcon } from "@phosphor-icons/react";
 import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Image, Label, Text as TamaguiText, XStack, YStack } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
-import { Text } from "@multiplatform.one/components";
+import { Text, ActionButton } from "@multiplatform.one/components";
 
 export type FrappeFileUploadHandler = (
   file: File,
@@ -291,6 +291,28 @@ export function FileUpload({
     );
   }
 
+  // LC-260 ICONS-OVER-WORDS: Replace and Remove are their symbols, floating
+  // over an image on the LC-176 media plate.
+  const fileActions =
+    !readOnly && !transfer
+      ? (overMedia: boolean) => (
+          <>
+            <ActionButton
+              kind="replace"
+              overMedia={overMedia}
+              disabled={isLocked}
+              onPress={handleClick}
+            />
+            <ActionButton
+              kind="remove"
+              overMedia={overMedia}
+              disabled={isLocked}
+              onPress={handleRemove}
+            />
+          </>
+        )
+      : undefined;
+
   return (
     <YStack {...knobProps.gap}>
       {label && (
@@ -325,17 +347,12 @@ export function FileUpload({
               </Text>
             </YStack>
             {transfer.status === "uploading" ? (
-              <Button
-                size="$2"
-                variant="outlined"
-                icon={XIcon}
-                aria-label={t("Cancel {{name}}", { name: transfer.file.name })}
+              <ActionButton
+                kind="cancel"
+                label={t("Cancel {{name}}", { name: transfer.file.name })}
                 disabled={isLocked}
                 onPress={handleCancel}
-                {...knobProps.borderRadius}
-              >
-                {t("Cancel")}
-              </Button>
+              />
             ) : null}
           </XStack>
           {transfer.status === "uploading" ? (
@@ -364,27 +381,18 @@ export function FileUpload({
                 {transfer.action}
               </Text>
               <XStack {...knobProps.gap}>
-                <Button
-                  size="$2"
-                  variant="outlined"
-                  aria-label={t("Retry {{name}}", { name: transfer.file.name })}
+                <ActionButton
+                  kind="retry"
+                  label={t("Retry {{name}}", { name: transfer.file.name })}
                   disabled={isLocked}
                   onPress={handleRetry}
-                  {...knobProps.borderRadius}
-                >
-                  {t("Retry")}
-                </Button>
-                <Button
-                  size="$2"
-                  variant="outlined"
-                  icon={XIcon}
-                  aria-label={t("Remove {{name}}", { name: transfer.file.name })}
+                />
+                <ActionButton
+                  kind="remove"
+                  label={t("Remove {{name}}", { name: transfer.file.name })}
                   disabled={isLocked}
                   onPress={handleRemoveFailed}
-                  {...knobProps.borderRadius}
-                >
-                  {t("Remove")}
-                </Button>
+                />
               </XStack>
             </YStack>
           ) : null}
@@ -404,8 +412,8 @@ export function FileUpload({
       ) : null}
 
       {value ? (
-        <YStack {...knobProps.gap}>
-          {isImage ? (
+        isImage ? (
+          <YStack position="relative" alignSelf="flex-start">
             <Image
               // src (string), not source: the RN source object leaks onto the
               // DOM <img> as source="[object Object]" on web
@@ -416,45 +424,33 @@ export function FileUpload({
               {...knobProps.borderRadius}
               objectFit="cover"
             />
-          ) : (
-            <XStack
-              gap="$2"
-              alignItems="center"
-              {...knobProps.panelPadding}
-              {...{ backgroundColor: "$color2" }}
-            >
-              <FileIcon size={20} />
-              <Text flex={1} numberOfLines={1}>
-                {value.split("/").pop() || value}
-              </Text>
-            </XStack>
-          )}
-
-          {!readOnly && !transfer ? (
-            <XStack {...knobProps.gap}>
-              <Button
-                size="$2"
-                variant="outlined"
-                icon={UploadIcon}
-                disabled={isLocked}
-                onPress={handleClick}
-                {...knobProps.borderRadius}
+            {fileActions ? (
+              <XStack
+                data-file-upload="preview-actions"
+                position="absolute"
+                top="$2"
+                right="$2"
+                zIndex={1}
+                {...knobProps.gap}
               >
-                {t("Replace")}
-              </Button>
-              <Button
-                size="$2"
-                variant="outlined"
-                icon={XIcon}
-                disabled={isLocked}
-                onPress={handleRemove}
-                {...knobProps.borderRadius}
-              >
-                {t("Remove")}
-              </Button>
-            </XStack>
-          ) : null}
-        </YStack>
+                {fileActions(true)}
+              </XStack>
+            ) : null}
+          </YStack>
+        ) : (
+          <XStack
+            gap="$2"
+            alignItems="center"
+            {...knobProps.panelPadding}
+            {...{ backgroundColor: "$color2" }}
+          >
+            <FileIcon size={20} />
+            <Text flex={1} numberOfLines={1}>
+              {value.split("/").pop() || value}
+            </Text>
+            {fileActions?.(false)}
+          </XStack>
+        )
       ) : null}
 
       {helperText && !error && !transfer ? (

package/src/list/ListControls.tsx

@@ -208,9 +208,7 @@ export function ListControls({
             {shuffle ? (
               <Tooltip content={t("Open a random record")}>
                 <Button
-                  outlined={!shuffle.open}
-                  theme={shuffle.open ? "accent" : undefined}
-                  circular
+                  selected={shuffle.open}
                   onPress={shuffle.toggle}
                   icon={<DiceFiveIcon size={16} />}
                   aria-label={t("Surprise me")}

package/src/list/ListControlsSheet.tsx

@@ -7,6 +7,7 @@ import {
   XStack,
   YStack,
   isWeb,
+  OverlayHeader,
 } from "@multiplatform.one/components";
 import { Button, SearchInput, Select, Switch } from "@multiplatform.one/forms";
 import {
@@ -180,7 +181,6 @@ export function ListControlsSheet({
           <XStack gap="$2" alignItems="center" flexShrink={0}>
             {shuffle ? (
               <Button
-                circular
                 chromeless
                 onPress={shuffle.toggle}
                 icon={DiceFiveIcon}
@@ -212,17 +212,15 @@ export function ListControlsSheet({
         onOpenChange={setOpen}
         scrollable
         header={
-          <XStack alignItems="center" gap="$2">
-            <Text fontSize="$6" fontWeight="700" color="$color12">
-              {t("Filters", "Filters")}
-            </Text>
-            <Button chromeless onPress={reset} testID={`${testID}-reset`}>
-              {t("Reset")}
-            </Button>
-            <Button chromeless onPress={() => setOpen(false)}>
-              {t("Done")}
-            </Button>
-          </XStack>
+          <OverlayHeader
+            title={t("Filters", "Filters")}
+            actions={
+              <Button chromeless onPress={reset} testID={`${testID}-reset`}>
+                {t("Reset")}
+              </Button>
+            }
+            onConfirm={() => setOpen(false)}
+          />
         }
       >
         <YStack gap="$5" paddingBottom="$4" testID={`${testID}-filters-sheet`}>

package/src/list/ListSidebarToolbar.tsx

@@ -2,11 +2,11 @@ import {
   Badge,
   DropdownMenu,
   SheetModal,
-  Text,
   Tooltip,
   XStack,
   YStack,
   type DropdownMenuEntry,
+  OverlayHeader,
 } from "@multiplatform.one/components";
 import { Button, SearchInput, Select } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
@@ -107,9 +107,7 @@ export function ListSidebarToolbar({
           >
             <Tooltip content={t("Open a random record")}>
               <Button
-                outlined={!shuffle.open}
-                theme={shuffle.open ? "accent" : undefined}
-                circular
+                selected={shuffle.open}
                 onPress={shuffle.toggle}
                 icon={<DiceFiveIcon size={16} />}
                 aria-label={t("Surprise me")}
@@ -145,8 +143,6 @@ export function ListSidebarToolbar({
           {menuItems.length > 0 ? (
             <DropdownMenu items={[...menuItems]} placement="bottom-end">
               <Button
-                outlined
-                circular
                 icon={<DotsThreeIcon size={20} weight="bold" />}
                 aria-label={t("More actions")}
                 testID={`${testID}-more`}
@@ -162,18 +158,11 @@ export function ListSidebarToolbar({
         scrollable
         snapPoint={85}
         header={
-          <XStack alignItems="center" {...knobProps.gap}>
-            <Text {...knobProps.heading} fontWeight="700" role="heading" aria-level={2}>
-              {t("Filters")}
-            </Text>
-            <Button
-              theme="accent"
-              onPress={() => setSheetOpen(false)}
-              testID={`${testID}-filters-done`}
-            >
-              {t("Done")}
-            </Button>
-          </XStack>
+          <OverlayHeader
+            title={t("Filters")}
+            onConfirm={() => setSheetOpen(false)}
+            testID={`${testID}-filters`}
+          />
         }
       >
         {sheetOpen ? (

package/src/list/RecordCard.native.tsx

@@ -53,13 +53,8 @@ export function RecordCard({
           {favorite ? (
             <XStack position="absolute" top="$1" right="$1" zIndex={2}>
               <Button
-                circular
-                chromeless
-                minWidth={knobProps.sizeToken}
-                minHeight={knobProps.sizeToken}
-                {...transitionProps(knobProps.motion.control)}
-                backgroundColor="$background08"
-                pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
+                plate="media"
+                selected={false}
                 onPress={handleToggleFavorite}
                 col={(favorite.active ? "$red9" : "$color11") as never}
                 icon={

package/src/list/RecordCard.tsx

@@ -124,14 +124,8 @@ export function RecordCard({
         : undefined)}
     >
       <Button
-        circular
-        chromeless
-        minWidth={knobProps.sizeToken}
-        minHeight={knobProps.sizeToken}
-        {...transitionProps(knobProps.motion.control)}
-        backgroundColor="$background08"
-        hoverStyle={{ backgroundColor: "$background", scale: 1.08 }}
-        pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
+        plate="media"
+        selected={false}
         onPress={handleToggleFavorite}
         render="button"
         type="button"