@multiplatform.one/table-primitives 7.7.6 → 7.8.0

package/src/index.tsx

@@ -476,8 +476,16 @@ function TableCardsList({
     ...viewProps
   } = props;
 
+  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
   return (
-    <ThemeableStack flexDirection="column" {...knobProps.gap} testID="table-cards" {...viewProps}>
+    <ThemeableStack
+      flexDirection="column"
+      {...knobProps.gap}
+      {...motion}
+      testID="table-cards"
+      {...({ "data-animation": knobProps.transition ? "on" : "none" } as Record<string, unknown>)}
+      {...viewProps}
+    >
       {caption != null &&
         (typeof caption === "string" || typeof caption === "number" ? (
           <SizableText fontSize={knobProps.sizeToken as FontSizeTokens} color="$color10">
@@ -494,6 +502,7 @@ function TableCardsList({
             {...knobProps.surface}
             {...knobProps.cardSurface}
             elevation={knobProps.elevation}
+            {...motion}
             borderColor="$color6"
             {...(row.intent ? { backgroundColor: "$color3" as const } : {})}
           >
@@ -511,7 +520,7 @@ function TableCardsList({
                     <SizableText
                       fontSize={knobProps.sizeToken as FontSizeTokens}
                       fontWeight="500"
-                      color="$color10"
+                      color={knobProps.textAccentColor}
                       width="40%"
                       flexShrink={0}
                     >
@@ -555,6 +564,7 @@ function ThemedTableComp({ layout = "table", ...props }: ThemedTableProps) {
     return <TableCardsList {...props} />;
   }
 
+  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
   return (
     <TableComp
       // Table frames are R-OUTER + SF-CARD-tier surface (theme-propagation-spec
@@ -565,9 +575,11 @@ function ThemedTableComp({ layout = "table", ...props }: ThemedTableProps) {
       {...(knobProps.outlined ? { backgroundColor: "transparent" as const } : null)}
       borderWidth={resolvedBorderWidth}
       elevation={knobProps.elevation}
+      {...motion}
       // Size knob sets default row height through the table context; consumer
       // cellHeight (table- or cell-level) still overrides via {...props}.
       cellHeight={knobProps.sizeToken as SizeTokens}
+      {...({ "data-animation": knobProps.transition ? "on" : "none" } as Record<string, unknown>)}
       {...props}
       // borderSpacing 0 neutralizes the real <table> UA default (2px gaps
       // between cells) so the migrated element keeps the div-table look.
@@ -583,6 +595,8 @@ function ThemedTableHead(props: React.ComponentProps<typeof TableHead>) {
 }
 
 function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps) {
+  const { knobProps } = useResolvedKnobs();
+  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
   const intent = resolveIntent({ accent, error, warning, success } as ThemedRowProps);
 
   // Intent rows must not use the plain <Theme> wrapper: on web it renders a
@@ -595,6 +609,8 @@ function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps
   // without emitting any wrapper element.
   const row = (
     <Row
+      {...motion}
+      {...({ "data-animation": knobProps.transition ? "on" : "none" } as Record<string, unknown>)}
       {...(intent
         ? {
             backgroundColor: "$color3" as const,
@@ -651,6 +667,17 @@ function TableCellSurfaceBody({
       key={key}
       fontSize={knobProps.sizeToken as FontSizeTokens}
       fontWeight={isHeader ? "600" : undefined}
+      // data-chrome: honour textAccent on labels. Body cells stay T-VALUE
+      // (inherit), matching SimpleTable's header vs value split (MPO-132).
+      {...(isHeader
+        ? {
+            color: knobProps.textAccentColor,
+            ...({ "data-text-accent": String(knobProps.textAccentColor) } as Record<
+              string,
+              unknown
+            >),
+          }
+        : {})}
     >
       {label}
     </SizableText>
@@ -659,9 +686,12 @@ function TableCellSurfaceBody({
 
 function ThemedCell({ children, style, ...props }: React.ComponentProps<typeof Cell>) {
   const { knobProps } = useResolvedKnobs();
+  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
   return (
     <Cell
       {...getTableCellPadding(knobProps.space)}
+      {...motion}
+      {...({ "data-animation": knobProps.transition ? "on" : "none" } as Record<string, unknown>)}
       {...props}
       // Compose (not replace) the inline style so a consumer style (e.g.
       // sticky pinned cells) keeps the verticalAlign baseline.
@@ -674,9 +704,12 @@ function ThemedCell({ children, style, ...props }: React.ComponentProps<typeof C
 
 function ThemedHeaderCell({ children, style, ...props }: React.ComponentProps<typeof HeaderCell>) {
   const { knobProps } = useResolvedKnobs();
+  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
   return (
     <HeaderCell
       {...getTableCellPadding(knobProps.space)}
+      {...motion}
+      {...({ "data-animation": knobProps.transition ? "on" : "none" } as Record<string, unknown>)}
       {...props}
       // Compose (not replace) the inline style so consumer styles (sticky
       // pinned headers) keep the real-<th> UA neutralizers (bold/centered).

package/src/table.spec.tsx

@@ -1,5 +1,5 @@
 /**
- * Table primitives tests - 5 focused tests for Task Group 1.
+ * Table primitives tests — semantic HTML, knobs, data-chrome animation / textAccent.
  *
  * Note: tamagui 2.0.0-rc derives the DOM element from the `render` prop —
  * the primitives emit REAL <table>/<thead>/<tbody>/<tfoot>/<tr>/<th>/<td>/
@@ -7,6 +7,7 @@
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { describe, expect, it } from "vitest";
 import { Table } from "./index";
 
@@ -203,4 +204,91 @@ describe("Table Primitives", () => {
     expect(getByText("F1")).toBeDefined();
     expect(getByText("F2")).toBeDefined();
   });
+
+  it("honours animation on the frame, row and cell (data-chrome)", () => {
+    const { container: none } = renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>H</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>C</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Preset>,
+    );
+    const { container: bouncy } = renderWithProviders(
+      <Preset overrides={{ animation: "bouncy" }}>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>H</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>C</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Preset>,
+    );
+
+    expect(none.querySelector("table")?.getAttribute("data-animation")).toBe("none");
+    expect(bouncy.querySelector("table")?.getAttribute("data-animation")).toBe("on");
+    expect(none.querySelector("tr")?.getAttribute("data-animation")).toBe("none");
+    expect(bouncy.querySelector("tr")?.getAttribute("data-animation")).toBe("on");
+    expect(none.querySelector("td")?.getAttribute("data-animation")).toBe("none");
+    expect(bouncy.querySelector("td")?.getAttribute("data-animation")).toBe("on");
+  });
+
+  it("honours textAccent on header labels and leaves body cells as T-VALUE", () => {
+    const { container: high } = renderWithProviders(
+      <Preset overrides={{ textAccent: "high" }}>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Ada</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Preset>,
+    );
+    const { container: low } = renderWithProviders(
+      <Preset overrides={{ textAccent: "low" }}>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Ada</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </Preset>,
+    );
+
+    const headerHigh = high
+      .querySelector("th [data-text-accent]")
+      ?.getAttribute("data-text-accent");
+    const headerLow = low.querySelector("th [data-text-accent]")?.getAttribute("data-text-accent");
+    expect(headerHigh).toBeTruthy();
+    expect(headerLow).toBeTruthy();
+    expect(headerHigh).not.toBe(headerLow);
+    expect(high.querySelector("td [data-text-accent]")).toBeNull();
+    expect(low.querySelector("td [data-text-accent]")).toBeNull();
+  });
 });

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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"}