@multiplatform.one/table-primitives 7.47.4 → 7.48.0

package/src/index.tsx

@@ -16,12 +16,11 @@ import {
   useResolvedKnobs,
   sizeTokenStop,
   SizableText,
-  type PhoneTableBleed,
 } from "@multiplatform.one/theme";
 import { TableCellContext } from "./tableCellContext";
 import { wrapBareTextChildren } from "./textRidesText";
 import { Children, Fragment, createContext, isValidElement, useContext } from "react";
-import type { FontSizeTokens, SizeTokens, SpaceTokens } from "tamagui";
+import type { FontSizeTokens, SizeTokens } from "tamagui";
 import {
   SizableText as TamaguiSizableText,
   Theme,
@@ -362,29 +361,6 @@ export function TableEdgeCells({ children }: { children: React.ReactNode }) {
   return <>{inset ? markEdgeCells(children) : children}</>;
 }
 
-/**
- * LC-146 recipe for one row of a full-bleed card or document list: no card
- * chrome at the screen edge, a hairline between rows, and the gutter as the
- * row's horizontal inset.
- */
-export function phoneBleedRowProps(inset: string) {
-  return {
-    borderRadius: 0,
-    borderWidth: 0,
-    ...hairline.bottom,
-    borderColor: "$borderColor",
-    elevation: 0,
-    shadowColor: "transparent",
-    paddingLeft: inset,
-    paddingRight: inset,
-  } as const;
-}
-
-/** LC-146 recipe for a full-bleed list frame: out to the screen edges, rows abut. */
-export function phoneBleedListProps(bleed: Pick<PhoneTableBleed, "frame"> | null) {
-  return { ...(bleed ? bleed.frame : {}), gap: 0 } as const;
-}
-
 const BodyRowIndexContext = createContext<number | undefined>(undefined);
 
 function indexBodyRows(children: React.ReactNode, counter: { next: number }): React.ReactNode {
@@ -642,16 +618,16 @@ function extractCardModel(children: React.ReactNode): {
   return { headerLabels, rows, caption };
 }
 
-/** Card list rendering for the Table primitive (layout="cards" / narrow auto). */
+/**
+ * Card list rendering for the Table primitive (layout="cards" / narrow auto).
+ * A card is its own surface: it keeps the page gutter (LC-146 bleeds rows,
+ * not cards) and never stripes (LC-144 stripes rows, not cards).
+ */
 function TableCardsList({
   children,
-  edgeInset,
-  selfBleed,
   ...props
 }: {
   children?: React.ReactNode;
-  edgeInset?: string | null;
-  selfBleed?: PhoneTableBleed | null;
   [key: string]: any;
 }) {
   const { knobProps } = useResolvedKnobs();
@@ -679,12 +655,9 @@ function TableCardsList({
         unknown
       >)}
       {...viewProps}
-      {...(edgeInset ? phoneBleedListProps(selfBleed ?? null) : {})}
-      {...(edgeInset ? ({ "data-phone-bleed": "true" } as Record<string, unknown>) : {})}
     >
       {caption != null && (
-        // LC-146: the caption stays on the page line while the cards bleed.
-        <YStack {...(edgeInset ? { paddingHorizontal: edgeInset as SpaceTokens } : {})}>
+        <YStack>
           {typeof caption === "string" || typeof caption === "number" ? (
             <SizableText fontSize={knobProps.sizeToken as FontSizeTokens} color="$color10">
               {caption}
@@ -694,8 +667,7 @@ function TableCardsList({
           )}
         </YStack>
       )}
-      {rows.map((row, rowIndex) => {
-        const stripe = tableZebraStripe(knobProps.tableZebra, rowIndex);
+      {rows.map((row) => {
         const card = (
           <ThemeableStack
             key={row.key}
@@ -703,17 +675,10 @@ function TableCardsList({
             {...knobProps.surface}
             {...knobProps.cardSurface}
             {...motion}
-            {...(stripe === "odd"
-              ? { backgroundColor: tableZebraFill(knobProps.cardSurface.backgroundColor) }
-              : {})}
             {...(row.intent ? { backgroundColor: "$color3" as const } : {})}
-            {...(edgeInset
-              ? phoneBleedRowProps(edgeInset)
-              : {
-                  elevation: knobProps.elevation,
-                  borderColor: edgeColorAt("$color6", knobProps.borderWidthStop),
-                })}
-            {...({ "data-table-zebra": stripe } as Record<string, unknown>)}
+            elevation={knobProps.elevation}
+            borderColor={edgeColorAt("$color6", knobProps.borderWidthStop)}
+            {...({ "data-table-zebra": "off" } as Record<string, unknown>)}
           >
             {row.cells.map((cell, index) => {
               const label = headerLabels[index];
@@ -806,7 +771,7 @@ function ThemedTableFrame({
   if (showCards) {
     return (
       <PageGutter inset={null}>
-        <TableCardsList {...props} edgeInset={inset} selfBleed={selfBleed} />
+        <TableCardsList {...props} />
       </PageGutter>
     );
   }

package/src/table.spec.tsx

@@ -527,7 +527,7 @@ describe("Table Primitives", () => {
       expect(fills(container)).toEqual([[], ["_bg-color3"], [], ["_bg-color3"]]);
     });
 
-    it("stripes odd cards in the card layout and leaves intent cards tinted", () => {
+    it("never stripes a card in the card layout and leaves intent cards tinted (FZ-7816)", () => {
       const cards = (tableZebra: "on" | "off") =>
         Array.from(
           zebraTable(
@@ -555,18 +555,18 @@ describe("Table Primitives", () => {
         "off",
       ]);
       expect(on.map((card) => card.getAttribute("data-table-zebra"))).toEqual([
-        "even",
-        "odd",
-        "even",
-        "odd",
-        "even",
-        "odd",
+        "off",
+        "off",
+        "off",
+        "off",
+        "off",
+        "off",
       ]);
-      expect(atomic(on[0], "bg")).toEqual(atomic(off[0], "bg"));
-      expect(atomic(on[1], "bg")).toEqual(["_bg-color3"]);
-      expect(atomic(on[3], "bg")).toEqual(["_bg-color3"]);
-      expect(atomic(on[4], "bg")).toEqual(atomic(off[4], "bg"));
-      expect(atomic(on[5], "bg")).toEqual(["_bg-color3"]);
+      for (const index of [0, 1, 3, 5]) {
+        expect(atomic(on[index], "bg")).toEqual(atomic(off[index], "bg"));
+      }
+      expect(atomic(on[1], "bg")).toEqual(atomic(on[0], "bg"));
+      expect(atomic(on[4], "bg")).toEqual(["_bg-color3"]);
     });
 
     describe("the stripe steps one up the ramp from the surface it sits on (MPO-401)", () => {
@@ -592,17 +592,12 @@ describe("Table Primitives", () => {
         );
       }
 
-      it("in dark an odd card's background differs from an even card's", () => {
-        const [even, odd] = cardFills("dark");
-        expect(odd).not.toEqual(even);
-      });
-
       for (const scheme of ["light", "dark"] as const) {
-        it(`${scheme} cards keep the template fill and stripe at every elevation`, () => {
+        it(`${scheme} cards keep the template fill and never stripe at any elevation`, () => {
           for (const elevation of ["none", "small", "medium", "large"] as const) {
             expect(cardFills(scheme, elevation).slice(0, 2)).toEqual([
               ["_bg-background"],
-              ["_bg-color3"],
+              ["_bg-background"],
             ]);
           }
         });

package/types/index.d.ts

@@ -4,7 +4,6 @@
  * Layer 1 only: depends on theme + Tamagui (no forms, no data-table).
  * Consumed by @multiplatform.one/table, @multiplatform.one/forms, etc.
  */
-import { type PhoneTableBleed } from "@multiplatform.one/theme";
 import type { SizeTokens } from "tamagui";
 export { TableCellContext, useIsInTableCell, useTableCellContext } from "./tableCellContext";
 export type { TableCellContextValue } from "./tableCellContext";
@@ -86,27 +85,6 @@ export declare function TableEdgeInset({ inset, children, }: {
 export declare function TableEdgeCells({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-/**
- * LC-146 recipe for one row of a full-bleed card or document list: no card
- * chrome at the screen edge, a hairline between rows, and the gutter as the
- * row's horizontal inset.
- */
-export declare function phoneBleedRowProps(inset: string): {
-    readonly borderColor: "$borderColor";
-    readonly elevation: 0;
-    readonly shadowColor: "transparent";
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly borderBottomWidth: number;
-    readonly className: "mp-hairline-b";
-    readonly borderRadius: 0;
-    readonly borderWidth: 0;
-};
-/** LC-146 recipe for a full-bleed list frame: out to the screen edges, rows abut. */
-export declare function phoneBleedListProps(bleed: Pick<PhoneTableBleed, "frame"> | null): {
-    readonly gap: 0;
-    readonly marginHorizontal?: string | undefined;
-};
 declare const TableBody: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}