@multiplatform.one/components 7.7.4 → 7.8.0

package/src/layouts/Page.weight.spec.tsx

@@ -0,0 +1,75 @@
+import { defaultConfig } from "@tamagui/config/v5";
+import { createTamagui, TamaguiProvider } from "tamagui";
+import type { ReactElement } from "react";
+import { defaultHeadingFont, Preset } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { PageHeader } from "./page";
+
+const config = createTamagui({
+  ...defaultConfig,
+  fonts: { ...defaultConfig.fonts, heading: defaultHeadingFont },
+});
+function renderWithProviders(node: ReactElement) {
+  return render(
+    <TamaguiProvider config={config} defaultTheme="light">
+      {node}
+    </TamaguiProvider>,
+  );
+}
+afterEach(cleanup);
+
+describe("PageHeader rendered Tamagui title recipes", () => {
+  for (const scale of ["moderate", "display"] as const) {
+    for (const weight of ["regular", "bold"] as const) {
+      it(`${scale} preserves ${weight} independently of size`, () => {
+        renderWithProviders(
+          <Preset overrides={{ pageTitleScale: scale, fontWeight: weight }}>
+            <PageHeader title="Measured title" />
+          </Preset>,
+        );
+        const title = screen.getByRole("heading", { name: "Measured title" });
+        expect(getComputedStyle(title).fontSize).toBe(scale === "moderate" ? "26px" : "40px");
+        expect(getComputedStyle(title).fontWeight).toBe(weight === "regular" ? "400" : "700");
+        expect(title.tagName).toBe("H1");
+        expect(title).toHaveAttribute("data-font-weight-knob", weight);
+        expect(title.className).toContain("font_heading");
+      });
+
+      it(`${scale}/${weight} survives nested overrides and a titleScale eject`, () => {
+        renderWithProviders(
+          <Preset
+            overrides={{
+              pageTitleScale: scale,
+              fontWeight: weight === "bold" ? "regular" : "bold",
+            }}
+          >
+            <Preset overrides={{ fontWeight: weight }}>
+              <PageHeader
+                title="Nested title"
+                headingLevel={2}
+                titleScale={scale === "moderate" ? "display" : "moderate"}
+              />
+            </Preset>
+          </Preset>,
+        );
+        const title = screen.getByRole("heading", { name: "Nested title" });
+        expect(getComputedStyle(title).fontSize).toBe(scale === "moderate" ? "40px" : "26px");
+        expect(getComputedStyle(title).fontWeight).toBe(weight === "regular" ? "400" : "700");
+        expect(title.tagName).toBe("H2");
+      });
+    }
+  }
+
+  it("preserves the consumer heading eject and wrapper props", () => {
+    renderWithProviders(
+      <PageHeader
+        heading={<h3 style={{ fontWeight: 600 }}>Custom</h3>}
+        data-testid="eject"
+        padding={7}
+      />,
+    );
+    expect(getComputedStyle(screen.getByRole("heading")).fontWeight).toBe("600");
+    expect(getComputedStyle(screen.getByTestId("eject")).paddingTop).toBe("7px");
+  });
+});

package/src/layouts/PageHeader.stories.tsx

@@ -67,7 +67,7 @@ export const WithActions: Story = {
         {...args}
         actions={
           <>
-            <Button variant="outlined">Secondary</Button>
+            <Button>Secondary</Button>
             <Button>Primary</Button>
           </>
         }
@@ -83,7 +83,7 @@ export const WithNav: Story = {
         {...args}
         actions={
           <>
-            <Button variant="outlined">Secondary</Button>
+            <Button>Secondary</Button>
             <Button>Primary</Button>
           </>
         }
@@ -155,8 +155,8 @@ export const LongTitleNarrow: Story = {
         actions={
           <>
             <Button>First action</Button>
-            <Button variant="outlined">Second action</Button>
-            <Button variant="outlined">Third action</Button>
+            <Button>Second action</Button>
+            <Button>Third action</Button>
           </>
         }
       />

package/src/layouts/PageTemplates.stories.tsx

@@ -68,7 +68,7 @@ export const DetailPage: StoryObj<typeof DetailPageLayout> = {
       sizeClass="expanded"
       title="Bulbasaur"
       subtitle="Pokemon · #0001"
-      toolbarLeading={<Button variant="outlined">Back</Button>}
+      toolbarLeading={<Button>Back</Button>}
       toolbarTrailing={<Button theme="accent">Edit</Button>}
       aside={<ContentBox label="Aside (meta / timeline) ⅓" minHeight={240} />}
     >
@@ -82,7 +82,7 @@ export const DetailPageCompact: StoryObj<typeof DetailPageLayout> = {
     <DetailPageLayout
       sizeClass="compact"
       title="Bulbasaur"
-      toolbarLeading={<Button variant="outlined">Back</Button>}
+      toolbarLeading={<Button>Back</Button>}
       aside={<ContentBox label="Aside — stacked below, never hidden" minHeight={140} />}
     >
       <ContentBox label="Main content" minHeight={200} />

package/src/layouts/PaneScaffold.spec.tsx

@@ -13,6 +13,37 @@ import * as Layouts from "./index";
 
 afterEach(cleanup);
 
+const originalInnerWidth = window.innerWidth;
+
+/** Drive the real size-class path from a viewport width (setup reads it at render). */
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+}
+
+afterEach(() => setViewportWidth(originalInnerWidth));
+
+/**
+ * Rail | (centre | inspector) — the three-region page the kit composes from
+ * two scaffolds. `sizeClass` is set on the OUTER one only, so this also
+ * covers whether the class reaches the inner scaffold.
+ */
+function ThreeRegionPage(props: {
+  sizeClass?: "compact" | "medium" | "expanded" | "large" | "xl";
+}) {
+  return (
+    <PaneScaffold
+      sizeClass={props.sizeClass}
+      primary={<Paragraph>Rail</Paragraph>}
+      secondary={
+        <PaneScaffold
+          primary={<Paragraph>Centre</Paragraph>}
+          secondary={<Paragraph>Inspector</Paragraph>}
+        />
+      }
+    />
+  );
+}
+
 describe("layouts index exports (W11)", () => {
   it("exports PaneScaffold canonical layouts + ReadingWidth", () => {
     expect(Layouts.PaneScaffold).toBe(PaneScaffold);
@@ -24,7 +55,7 @@ describe("layouts index exports (W11)", () => {
 });
 
 describe("PaneScaffold", () => {
-  it("shows one pane on compact/medium", () => {
+  it("stacks both panes below the two-pane budget", () => {
     renderWithProviders(
       <PaneScaffold
         sizeClass="compact"
@@ -33,8 +64,34 @@ describe("PaneScaffold", () => {
       />,
     );
     const root = screen.getByTestId("pane-scaffold");
-    expect(root).toHaveAttribute("data-panes", "1");
-    expect(screen.getByText("List")).toBeInTheDocument();
+    expect(root).toHaveAttribute("data-panes", "2");
+    expect(root).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByTestId("pane-primary")).toHaveTextContent("List");
+    expect(screen.getByTestId("pane-secondary")).toHaveTextContent("Detail");
+  });
+
+  it("drops the sash when stacked (nothing to drag with a thumb)", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="compact"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-sash", "false");
+    expect(screen.queryByTestId("pane-sash")).not.toBeInTheDocument();
+  });
+
+  it("narrowLayout=swap drops the inactive pane", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="compact"
+        narrowLayout="swap"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "1");
     expect(screen.queryByText("Detail")).not.toBeInTheDocument();
   });
 
@@ -66,12 +123,27 @@ describe("PaneScaffold", () => {
     expect(screen.getByTestId("pane-secondary")).toHaveTextContent("Detail");
   });
 
-  it("maxPanes=1 ejects to single column even when expanded", () => {
+  it("maxPanes=1 takes the narrow path even when expanded", () => {
     renderWithProviders(
       <PaneScaffold
         sizeClass="xl"
         maxPanes={1}
         primary={<Paragraph>Only</Paragraph>}
+        secondary={<Paragraph>Also</Paragraph>}
+      />,
+    );
+    const root = screen.getByTestId("pane-scaffold");
+    expect(root).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByText("Also")).toBeInTheDocument();
+  });
+
+  it("maxPanes=1 with activePane drops the other pane", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="xl"
+        maxPanes={1}
+        activePane="primary"
+        primary={<Paragraph>Only</Paragraph>}
         secondary={<Paragraph>Hidden</Paragraph>}
       />,
     );
@@ -80,7 +152,64 @@ describe("PaneScaffold", () => {
   });
 });
 
+// MPO-235: two scaffolds are how the kit builds three regions, and a phone
+// rendered only the outer primary — the centre and inspector were unreachable.
+describe("PaneScaffold nesting (MPO-235)", () => {
+  it("renders all three regions at a 402pt viewport", () => {
+    setViewportWidth(402);
+    renderWithProviders(<ThreeRegionPage />);
+
+    expect(screen.getByText("Rail")).toBeInTheDocument();
+    expect(screen.getByText("Centre")).toBeInTheDocument();
+    expect(screen.getByText("Inspector")).toBeInTheDocument();
+
+    const scaffolds = screen.getAllByTestId("pane-scaffold");
+    expect(scaffolds).toHaveLength(2);
+    for (const node of scaffolds) {
+      expect(node).toHaveAttribute("data-pane-layout", "stack");
+      expect(node).toHaveAttribute("data-size-class", "compact");
+    }
+    expect(screen.queryAllByTestId("pane-sash")).toHaveLength(0);
+  });
+
+  it("passes the outer size class to the inner scaffold", () => {
+    // Viewport stays wide: only the outer override may narrow the inner one.
+    setViewportWidth(1440);
+    renderWithProviders(<ThreeRegionPage sizeClass="compact" />);
+
+    expect(screen.getByText("Centre")).toBeInTheDocument();
+    expect(screen.getByText("Inspector")).toBeInTheDocument();
+    for (const node of screen.getAllByTestId("pane-scaffold")) {
+      expect(node).toHaveAttribute("data-pane-layout", "stack");
+    }
+  });
+
+  it("still splits both scaffolds when the viewport is wide", () => {
+    setViewportWidth(1440);
+    renderWithProviders(<ThreeRegionPage />);
+
+    const scaffolds = screen.getAllByTestId("pane-scaffold");
+    expect(scaffolds).toHaveLength(2);
+    for (const node of scaffolds) {
+      expect(node).toHaveAttribute("data-pane-layout", "split");
+    }
+    expect(screen.getAllByTestId("pane-sash")).toHaveLength(2);
+  });
+});
+
 describe("ListDetailLayout", () => {
+  it("keeps the swap idiom on compact: list only until an item is picked", () => {
+    renderWithProviders(
+      <ListDetailLayout
+        sizeClass="compact"
+        list={<Paragraph>Items</Paragraph>}
+        detail={<Paragraph>Item 1</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "1");
+    expect(screen.queryByText("Item 1")).not.toBeInTheDocument();
+  });
+
   it("flips to detail when selected on compact", () => {
     renderWithProviders(
       <ListDetailLayout
@@ -96,6 +225,17 @@ describe("ListDetailLayout", () => {
 });
 
 describe("SupportingPaneLayout", () => {
+  it("stacks the supporting pane on compact instead of hiding it", () => {
+    renderWithProviders(
+      <SupportingPaneLayout sizeClass="compact" supporting={<Paragraph>Meta</Paragraph>}>
+        <Paragraph>Body</Paragraph>
+      </SupportingPaneLayout>,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-pane-layout", "stack");
+    expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Meta")).toBeInTheDocument();
+  });
+
   it("renders side-by-side at large", () => {
     renderWithProviders(
       <SupportingPaneLayout sizeClass="large" supporting={<Paragraph>Meta</Paragraph>}>

package/src/layouts/PaneScaffold.stories.tsx

@@ -113,7 +113,7 @@ const meta: Meta<typeof PaneScaffold> = {
     docs: {
       description: {
         component:
-          "Adaptive pane shell (DG-LAY-01/02). Size classes: compact <640, medium ≥640, expanded ≥860 (FloatingPanel), large ≥1024, xl ≥1280. Two panes from expanded up unless `maxPanes` ejects. Side-by-side uses a hairline sash (Linear / VS Code / Polaris Frame); pass `paneGap` to eject to spaced columns.",
+          'Adaptive TWO-pane shell (DG-LAY-01/02) — `primary` and `secondary`, no more. Size classes: compact <640, medium ≥640, expanded ≥860 (FloatingPanel), large ≥1024, xl ≥1280. Two panes from expanded up unless `maxPanes` ejects. Side-by-side uses a hairline sash (Linear / VS Code / Polaris Frame); pass `paneGap` to eject to spaced columns. Below expanded the panes stack and the sash goes away, so nothing is hidden on a phone; `narrowLayout="swap"` (what `activePane` opts into) is the list-detail exception. Three regions come from nesting a scaffold inside a pane — see the Nested three-region story; the size class rides down, so the inner scaffold stacks with the outer.',
       },
     },
   },
@@ -123,12 +123,12 @@ const meta: Meta<typeof PaneScaffold> = {
       options: ["compact", "medium", "expanded", "large", "xl"],
     },
     activePane: { control: "radio", options: ["primary", "secondary"] },
+    narrowLayout: { control: "radio", options: ["stack", "swap"] },
     maxPanes: { control: "radio", options: [1, 2, undefined] },
     resizable: { control: "boolean" },
   },
   args: {
     sizeClass: "expanded",
-    activePane: "primary",
   },
 };
 export default meta;
@@ -150,7 +150,63 @@ export const TwoPane: Story = {
   ),
 };
 
+export const CompactStacked: Story = {
+  name: "Compact (stacked)",
+  args: { sizeClass: "compact" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Below the two-pane budget the secondary sits under the primary and the sash is gone. Reflow, not hide.",
+      },
+    },
+  },
+  render: (args) => (
+    <YStack height={400} padding="$4">
+      <SplitFrame>
+        <PaneScaffold
+          {...args}
+          primary={<PaneFill label="Primary" />}
+          secondary={<PaneFill label="Secondary" muted />}
+        />
+      </SplitFrame>
+    </YStack>
+  ),
+};
+
+export const NestedThreeRegion: Story = {
+  name: "Nested three-region",
+  args: { sizeClass: "compact" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Rail | (centre | inspector): the recipe for three regions. Switch `sizeClass` to `xl` for two seams side by side; on compact all three stack, none is dropped.",
+      },
+    },
+  },
+  render: (args) => (
+    <YStack height={520} padding="$4">
+      <SplitFrame height={480}>
+        <PaneScaffold
+          {...args}
+          paneFlex={[1, 3]}
+          primary={<PaneFill label="Rail" muted />}
+          secondary={
+            <PaneScaffold
+              paneFlex={[2, 1]}
+              primary={<PaneFill label="Centre" hint="Main canvas" />}
+              secondary={<PaneFill label="Inspector" muted />}
+            />
+          }
+        />
+      </SplitFrame>
+    </YStack>
+  ),
+};
+
 export const CompactActiveSecondary: Story = {
+  name: "Compact (swap)",
   args: { sizeClass: "compact", activePane: "secondary" },
   render: (args) => (
     <YStack height={400} padding="$4">