@multiplatform.one/frappe-ui 7.53.0 → 7.54.1

package/src/FrappeListView.controls.spec.tsx

@@ -1,6 +1,7 @@
 // FrappeListView's list controls (MPO-411): sorts, a facet on a connection
 // doctype, a range, favorites, a search mapping and the URL state that a
 // list page (pokemon's roster) used to hand-wire around the view.
+import { dismissAllToasts } from "@multiplatform.one/components";
 import { Order } from "@multiplatform.one/frappe";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
@@ -47,8 +48,14 @@ afterAll(() => {
   globalThis.fetch = realFetch;
 });
 
+// A favorite toggle shows a toast that outlives its test in the module
+// store. Remounted by a later test, its close timer calls tamagui's hide,
+// whose 100 ms follow-up fired after happy-dom was gone ("window is not
+// defined", two unhandled errors that fail the file). Unmount first, then
+// clear the store, so no toast reaches the next test.
 afterEach(() => {
   cleanup();
+  dismissAllToasts();
   vi.restoreAllMocks();
 });
 

package/src/FrappeListView.spec.tsx

@@ -164,15 +164,20 @@ describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
 const midWeightAtom = /(?:^|\s)(?:_fw-|_fow-|_fontWeight-)(?:500|600)(?:\s|$)/;
 
 describe("FrappeListView design-law (avatar + type)", () => {
-  it("list-row avatars are nested and follow nestedControl, not a 40px literal", async () => {
+  // LC-155 ROW-ANATOMY: a list row's leading avatar fills ListRow's `$true`
+  // square media slot. It replaced the nestedControl (29px) avatar.
+  it("list-row avatars fill the $true media slot (LC-155), not a 40px literal", async () => {
     const { container } = renderListView();
     const avatar = await waitFor(() => {
       const node = container.querySelector("[data-avatar-px]");
       expect(node).not.toBeNull();
       return node as HTMLElement;
     });
-    expect(avatar.getAttribute("data-avatar-nested")).toBe("true");
-    expect(Number(avatar.getAttribute("data-avatar-px"))).toBe(29);
+    const slot = avatar.closest('[data-list-slot="media"]');
+    expect(slot).not.toBeNull();
+    expect(avatar.getAttribute("data-avatar-nested")).toBeNull();
+    const px = Number(getVariableValue(getSize("$true" as SizeTokens)));
+    expect(Number(avatar.getAttribute("data-avatar-px"))).toBe(px);
     expect(Number(avatar.getAttribute("data-avatar-px"))).not.toBe(40);
   });
 

package/src/FrappeListView.tsx

@@ -21,11 +21,11 @@ import {
   Avatar,
   EmptyState,
   ListPageLayout,
+  ListRow,
   PageHeader,
   SkipLink,
   Tooltip,
   ViewSwitcher,
-  componentColors,
   showToast,
   type DropdownMenuEntry,
   type ImageGridProps,
@@ -489,22 +489,19 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
       const imageUrl = imageFieldName ? resolveImageUrl(row[imageFieldName], finalBaseURL) : "";
 
       const titleName = typeof title === "string" ? title : undefined;
+      // LC-155: the MPO ListRow owns the anatomy (headline, one meta line,
+      // a $true media slot).
       return (
-        <XStack alignItems="center" flex={1} minWidth={0} width="100%" {...knobProps.gap}>
-          {imageUrl ? (
-            <Avatar nested circular src={imageUrl} name={titleName} alt={titleName ?? ""} />
-          ) : null}
-          <YStack flex={1} minWidth={0}>
-            <Text
-              {...knobProps.body}
-              color={componentColors.text.primary}
-              numberOfLines={1}
-              {...({ "data-list-slot": "title" } as Record<string, unknown>)}
-            >
-              {title}
-            </Text>
-            {subtitleParts.length > 0 && (
-              <Text {...knobProps.body} color={knobProps.textAccentColor} numberOfLines={1}>
+        <ListRow
+          media={
+            imageUrl ? (
+              <Avatar circular size="$true" src={imageUrl} name={titleName} alt={titleName ?? ""} />
+            ) : undefined
+          }
+          title={title}
+          subtitle={
+            subtitleParts.length > 0 ? (
+              <Text {...knobProps.body} {...knobProps.textRole.meta} numberOfLines={1}>
                 {subtitleParts.map((part, index) => (
                   <React.Fragment key={index}>
                     {index > 0 ? " · " : null}
@@ -512,9 +509,9 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
                   </React.Fragment>
                 ))}
               </Text>
-            )}
-          </YStack>
-        </XStack>
+            ) : undefined
+          }
+        />
       );
     },
     [effectiveDisplayFields, imageFieldName, finalBaseURL, knobProps],

package/src/frappeRoutes.spec.tsx

@@ -284,6 +284,9 @@ describe("frappeRouteTarget", () => {
 describe("FrappeListView with a route", () => {
   it("is the doctype's list page: its rows, a row opens the record, Add opens a new one", async () => {
     const { container, pushed } = renderAt("/moves", "list");
+    // The file's first list render pays the cold imports before its read
+    // goes out; time the row wait from the read, as the guest case does.
+    await movesListed;
     await waitFor(() => expect(screen.getByText("tackle")).toBeTruthy());
     expect(screen.getByText("vine-whip")).toBeTruthy();
     expect(screen.getByRole("heading", { name: doctype })).toBeTruthy();

package/src/record/RecordHero.tsx

@@ -80,7 +80,7 @@ export function RecordVitals({ tiles }: { tiles: readonly RecordVitalTile[] }) {
           testID={`record-vital-${tile.id}`}
           data-record-metric={tile.id}
         >
-          <Text {...knobProps.label} color="$color11" numberOfLines={1}>
+          <Text {...knobProps.label} {...knobProps.textRole.label} numberOfLines={1}>
             {tile.label}
           </Text>
           <TamaguiSizableText size="$6" {...knobProps.heading} color="$color" numberOfLines={1}>

package/src/record/RecordPage.tsx

@@ -360,7 +360,7 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
         </XStack>
         <RecordLargeTitle title={title} />
         {look?.subtitle?.(doc) ? (
-          <Text {...nested.body} color="$color11">
+          <Text {...nested.body} color="$textMuted">
             {look.subtitle(doc)}
           </Text>
         ) : null}

package/src/schemaForm/SchemaForm.spec.tsx

@@ -3,6 +3,7 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { hairlineBorderWidth, Preset } from "@multiplatform.one/theme";
 import { describe, expect, it, vi } from "vitest";
 import type { FieldSchema } from "../fieldRegistry";
 import { SchemaForm, type FormSchema } from "./index";
@@ -79,12 +80,15 @@ describe("SchemaForm design-law (MPO-60 / R10)", () => {
     expect(input.disabled || input.getAttribute("aria-disabled") === "true").toBe(true);
   });
 
-  it("default section is SF-CARD: no hardcoded 1px border", () => {
+  // LC-151 replaced the borderless content card: a top-level card's edge is
+  // cardSurface's theme hairline, which follows the borderWidth knob, and the
+  // section hardcodes no border of its own.
+  it("default section is SF-CARD: the cardSurface hairline edge (LC-151), no hardcoded border", () => {
     const schema: FormSchema = {
       fields: identityFields,
       sections: [{ label: "Identity", columns: [{ fields: identityFields }] }],
     };
-    const { container } = renderWithProviders(
+    const { container, unmount } = renderWithProviders(
       <SchemaForm schema={schema} doc={{}} setValue={vi.fn()} />,
     );
     const card = container.querySelector("[data-mpo-schema-form-card]") as HTMLElement;
@@ -92,8 +96,16 @@ describe("SchemaForm design-law (MPO-60 / R10)", () => {
     expect(card.getAttribute("data-mpo-schema-form-borderless")).toBeNull();
     const style = card.getAttribute("style") ?? "";
     expect(style).not.toMatch(/border-width:\s*1px/i);
-    const computed = getComputedStyle(card);
-    expect(computed.borderWidth === "1px" && computed.borderStyle === "solid").toBe(false);
+    expect(getComputedStyle(card).borderWidth).toBe(`${hairlineBorderWidth}px`);
+    unmount();
+
+    const flat = renderWithProviders(
+      <Preset overrides={{ borderWidth: "none" }}>
+        <SchemaForm schema={schema} doc={{}} setValue={vi.fn()} />
+      </Preset>,
+    );
+    const edgeless = flat.container.querySelector("[data-mpo-schema-form-card]") as HTMLElement;
+    expect(getComputedStyle(edgeless).borderWidth).toBe("0px");
   });
 
   it("hideBorder is SF-TRANSPARENT (borderless marker, no card fill)", () => {