@multiplatform.one/table 7.34.4 → 7.36.0

package/src/components/DataTable/smallTableFooter.spec.tsx

@@ -0,0 +1,61 @@
+/**
+ * A small table (`size="$3"`) forwards `$3` to its toolbar, rows and cells,
+ * but its pagination footer stays at the ambient token: the pager's page
+ * controls hold the 44px press floor, so a `$3` rows-per-page Select would
+ * sit 8px short of them in one row (LC-100, LC-78).
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { defaultScaleInputs, generateScale } from "@multiplatform.one/theme";
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+import { DataTable as NativeDataTable } from "./index.native";
+
+vi.mock("@shopify/flash-list", () => ({ FlashList: () => null }));
+
+type Row = { id: number; name: string };
+
+const rows: Row[] = Array.from({ length: 30 }, (_, i) => ({ id: i + 1, name: `Row ${i + 1}` }));
+const columns: DataTableColumn<Row>[] = [
+  { accessorKey: "name", header: "Name", meta: { role: "title" } },
+  { accessorKey: "id", header: "ID" },
+];
+const size = generateScale(defaultScaleInputs).tokens.size;
+
+describe.each([
+  { root: "web", Table: DataTable },
+  { root: "native", Table: NativeDataTable },
+])("a small $root DataTable", ({ Table }) => {
+  it("keeps its rows-per-page Select at the ambient token while the toolbar takes $3", () => {
+    renderWithProviders(
+      <Table
+        data={rows}
+        columns={columns}
+        layout="table"
+        size="$3"
+        enablePagination
+        enableGlobalSearch
+      />,
+    );
+
+    expect(
+      screen
+        .getByLabelText("Search table data")
+        .closest("[data-visual-height]")
+        ?.getAttribute("data-visual-height"),
+    ).toBe(String(size.$3));
+    expect(screen.getByLabelText("Select rows per page").getAttribute("data-visual-height")).toBe(
+      String(size.$true),
+    );
+  });
+
+  it("paints the Select at $true in a default-size table too", () => {
+    renderWithProviders(<Table data={rows} columns={columns} layout="table" enablePagination />);
+
+    expect(screen.getByLabelText("Select rows per page").getAttribute("data-visual-height")).toBe(
+      String(size.$true),
+    );
+  });
+});

package/src/components/DataTableCell/DataTableCell.stories.tsx

@@ -82,7 +82,6 @@ const meta: Meta<typeof DataTableCell> = {
     field: { control: "select", options: FIELD_TYPES },
     readOnly: { control: "boolean" },
     disabled: { control: "boolean" },
-    compact: { control: "boolean" },
     size: { control: "text" },
   },
 };
@@ -345,7 +344,6 @@ export const Playground: Story = {
     value: "hello",
     readOnly: false,
     disabled: false,
-    compact: true,
     columnId: "playground",
     rowIndex: 0,
     fieldProps: { options: statusOptions, placeholder: "Type here" },

package/src/components/DataTableCell/index.tsx

@@ -88,8 +88,6 @@ export interface DataTableCellProps {
   rowData?: any;
   /** Size token for field sizing */
   size?: string;
-  /** Use compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   /**
    * For linked daterange columns: the value of the linked (end date) column.
    * When set, renders a DateRangePicker with this cell as "from" and linkedValue as "to".
@@ -113,13 +111,12 @@ export function DataTableCell({
   rowIndex: _rowIndex,
   rowData,
   size,
-  compact,
   linkedValue: _linkedValue,
   onLinkedChange: _onLinkedChange,
 }: DataTableCellProps) {
-  // Cells are always compact unless caller explicitly opts out — table rows
-  // are 40-44px tall, so default-sized fields overflow the row.
-  const { knobProps } = useResolvedKnobs({ size, compact: compact ?? true });
+  // A table cell sits under the row's <Surface size="$3">, so its fields
+  // clamp to the row's control token.
+  const { knobProps } = useResolvedKnobs({ size });
   const cellName = (fieldProps as any)["aria-label"] ?? columnLabel ?? columnId;
   const {
     options,
@@ -453,7 +450,6 @@ export function DataTableCell({
             maxStars={stars}
             starIcon={restProps.starIcon ?? CellStar}
             size={knobProps.sizeToken}
-            compact
           />
         </CellWrapper>
       );

package/src/components/DataTableColumnPinning/index.tsx

@@ -1,3 +1,4 @@
+import { componentColors } from "@multiplatform.one/components";
 import { PushPinIcon } from "@phosphor-icons/react";
 import {
   MIN_PRESS_TARGET,
@@ -54,7 +55,7 @@ const PinnedIndicator = styled(View, {
   top: 0,
   bottom: 0,
   width: 3,
-  backgroundColor: "$accentBackground",
+  backgroundColor: componentColors.selection.ring,
   variants: {
     position: {
       left: {

package/src/components/DataTableDateFilter/index.tsx

@@ -87,7 +87,7 @@ export function DataTableDateFilter({
   const triggerMinWidth = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
   const popoverMinWidth = sz === "$3" ? 280 : sz === "$5" ? 360 : 320;
   // Row height derives from the same size token the preset Buttons render
-  // at, so the whole-row window stays exact under every size knob.
+  // at, so the whole-row window stays exact under every size token.
   const tokens = getTokens({ prefixed: true });
   const sizeTokens = tokens.size as Record<string, unknown>;
   const presetRowHeight = Math.round(

package/src/components/DataTableFilterButton/index.tsx

@@ -22,7 +22,7 @@ import {
   wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Text, View, XStack, YStack } from "tamagui";
+import { SizableText, Text, View, XStack, YStack } from "tamagui";
 import { t } from "../../shared/t";
 import type { FilterOperator, FilterValue, ResolvedFilterField } from "../../types";
 import {
@@ -309,7 +309,6 @@ function FilterButton({ contentTrigger = false }: { contentTrigger?: boolean })
   const trigger = (
     <Button
       size="$3"
-      compact
       {...(activeChipCount > 0 ? { accent: true } : { variant: "outlined" as const })}
       aria-label={t("Filter")}
       icon={<FunnelIcon size={14} weight={activeChipCount > 0 ? "fill" : "regular"} />}
@@ -341,9 +340,14 @@ function FilterButton({ contentTrigger = false }: { contentTrigger?: boolean })
                 }}
                 icon={<BackCaretIcon size={14} />}
               />
-              <Text fontSize="$3" fontWeight="600" color="$color11" flex={1}>
+              <SizableText
+                fontFamily={knobProps.heading.fontFamily}
+                size="$3"
+                color="$color11"
+                flex={1}
+              >
                 {t("Filter: {{column}}", { column: activeField.label })}
-              </Text>
+              </SizableText>
             </XStack>
 
             <FilterOperatorValueEditor
@@ -375,7 +379,6 @@ function FilterButton({ contentTrigger = false }: { contentTrigger?: boolean })
               debounceMs={0}
               placeholder={t("Search fields...")}
               size="$3"
-              compact
               aria-label={t("Search fields")}
             />
             <YStack

package/src/components/DataTableFilterChips/index.tsx

@@ -102,7 +102,7 @@ export function DataTableFilterChips() {
         />
       ))}
       {chips.length >= 2 && (
-        <Button size="$2" chromeless compact onPress={handleClearAll}>
+        <Button size="$2" chromeless onPress={handleClearAll}>
           {t("Clear all")}
         </Button>
       )}

package/src/components/DataTableFilters/DataTableFilters.spec.tsx

@@ -61,7 +61,6 @@ describe("DataTableFilters", () => {
     availableColumns: sampleColumns,
     maxFilters: 10,
     showFilterCount: true,
-    compact: false,
   };
 
   describe("chip bar", () => {
@@ -376,19 +375,9 @@ describe("DataTableFilters", () => {
     });
   });
 
-  describe("compact mode", () => {
-    it("should render in compact mode when compact is true", () => {
-      const { container } = renderWithProviders(
-        <DataTableFilters {...defaultProps} compact={true} />,
-      );
-
-      expect(container).toBeDefined();
-    });
-
-    it("should render in normal mode when compact is false", () => {
-      const { container } = renderWithProviders(
-        <DataTableFilters {...defaultProps} compact={false} />,
-      );
+  describe("size token", () => {
+    it("renders at a smaller size token", () => {
+      const { container } = renderWithProviders(<DataTableFilters {...defaultProps} size="$3" />);
 
       expect(container).toBeDefined();
     });

package/src/components/DataTableFilters/DataTableFilters.stories.tsx

@@ -25,10 +25,6 @@ const meta: Meta<typeof DataTableFilters> = {
       control: "boolean",
       description: "Whether to show the active filter count",
     },
-    compact: {
-      control: "boolean",
-      description: "Whether to use compact layout",
-    },
   },
 };
 
@@ -102,7 +98,6 @@ export const Basic: Story = {
     availableColumns: sampleColumns,
     maxFilters: 10,
     showFilterCount: true,
-    compact: false,
   },
 };
 
@@ -115,9 +110,9 @@ export const WithFilters: Story = {
 
 export const Compact: Story = {
   args: {
+    size: "$3",
     ...Basic.args,
     filters: sampleFilters,
-    compact: true,
   },
 };
 

package/src/components/DataTableFilters/index.tsx

@@ -11,10 +11,10 @@
  */
 
 import { FunnelIcon, PlusIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { useEffect, useState } from "react";
 import { Button, FloatingPanel, Select } from "@multiplatform.one/forms";
-import { Text, View, XStack, YStack } from "tamagui";
+import { Text, View, XStack, YStack, type SizeTokens } from "tamagui";
 import type {
   DataTableColumnType,
   FacetedFilterOption,
@@ -46,7 +46,11 @@ export interface DataTableFiltersProps {
   }>;
   maxFilters?: number;
   showFilterCount?: boolean;
-  compact?: boolean;
+  /**
+   * Size token (Tamagui's own `size`). Below `$true` the bar draws its small
+   * layout: an "Add Filter" trigger and the active filters as chips.
+   */
+  size?: SizeTokens;
 }
 
 type ColumnOption = NonNullable<DataTableFiltersProps["availableColumns"]>[number];
@@ -60,15 +64,16 @@ export function DataTableFilters(props: DataTableFiltersProps) {
   const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
   const availableColumns = props.availableColumns ?? [];
 
-  const { maxFilters = 10, showFilterCount = true, compact } = props;
+  const { maxFilters = 10, showFilterCount = true } = props;
 
   const [builderOpen, setBuilderOpen] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const { knobProps } = useResolvedKnobs({ size: props.size });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
 
   const canAddMoreFilters = filters.length < maxFilters;
   const editingFilter = editingId ? (filters.find((f) => f.id === editingId) ?? null) : null;
-  const triggerName = compact ? t("Add Filter") : t("Filter");
+  const triggerName = small ? t("Add Filter") : t("Filter");
   const triggerLabel =
     showFilterCount && filters.length > 0 ? `${triggerName} (${filters.length})` : triggerName;
 
@@ -95,10 +100,9 @@ export function DataTableFilters(props: DataTableFiltersProps) {
   const trigger = (
     <Button
       size="$3"
-      compact
       {...(filters.length > 0 ? { accent: true } : { variant: "outlined" as const })}
       icon={
-        compact ? (
+        small ? (
           <PlusIcon size={14} />
         ) : (
           <FunnelIcon size={14} weight={filters.length > 0 ? "fill" : "regular"} />
@@ -133,7 +137,7 @@ export function DataTableFilters(props: DataTableFiltersProps) {
           </FloatingPanel>
         </View>
 
-        {!compact &&
+        {!small &&
           filters.map((filter) => {
             const column = availableColumns.find((col) => col.id === filter.columnId);
             const label = getFilterChipLabel(
@@ -151,13 +155,13 @@ export function DataTableFilters(props: DataTableFiltersProps) {
             );
           })}
 
-        {compact && filters.length > 0 && (
-          <Button size="$2" chromeless compact onPress={onClearFilters} aria-label={t("Clear")}>
+        {small && filters.length > 0 && (
+          <Button size="$2" chromeless onPress={onClearFilters} aria-label={t("Clear")}>
             {t("Clear")}
           </Button>
         )}
-        {!compact && filters.length >= 2 && (
-          <Button size="$2" chromeless compact onPress={onClearFilters} aria-label={t("Clear all")}>
+        {!small && filters.length >= 2 && (
+          <Button size="$2" chromeless onPress={onClearFilters} aria-label={t("Clear all")}>
             {t("Clear all")}
           </Button>
         )}
@@ -181,7 +185,7 @@ function FilterBuilder({
   onCancel,
   canAdd,
 }: FilterBuilderProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const [selectedColumnId, setSelectedColumnId] = useState("");
   const [selectedOperator, setSelectedOperator] = useState<FilterOperator>("contains");
   const [filterValue, setFilterValue] = useState("");
@@ -240,7 +244,6 @@ function FilterBuilder({
         options={columnOptions}
         placeholder={t("Select column")}
         size="$3"
-        compact
       />
 
       {selectedColumn ? (
@@ -255,12 +258,11 @@ function FilterBuilder({
       ) : null}
 
       <XStack gap="$2" justifyContent="flex-end">
-        <Button size="$3" compact onPress={onCancel}>
+        <Button size="$3" onPress={onCancel}>
           {t("Cancel")}
         </Button>
         <Button
           size="$3"
-          compact
           accent
           onPress={handleCommit}
           disabled={!selectedColumnId || !selectedOperator || !canAdd}

package/src/components/DataTableGrouping/index.tsx

@@ -22,6 +22,7 @@ import {
   stackRadiusProps,
   useResolvedKnobs,
   type GroupPosition,
+  sizeTokenStop,
 } from "@multiplatform.one/theme";
 import { useCallback, useMemo, useState } from "react";
 import { Button, FloatingPanel, Select } from "@multiplatform.one/forms";
@@ -79,8 +80,8 @@ export interface DataTableGroupingProps<T = any> {
 
 const EMPTY_EXPANDED_GROUPS: Set<string> = new Set();
 
-// SP-EDGE row density (getTableCellPadding precedent): the space knob moves
-// row padding; medium keeps the previous hardcoded $3/$2 defaults.
+// SP-EDGE row padding (getTableCellPadding precedent): the size token's stop
+// picks the row; medium keeps the previous hardcoded $3/$2 defaults.
 const groupHeaderPaddingMap: Record<string, string> = {
   small: "$2",
   medium: "$3",
@@ -92,7 +93,7 @@ const groupItemPaddingMap: Record<string, string> = {
   large: "$3",
 };
 
-// Tree indent rides the space knob so nested groups stay flush full-bleed
+// Tree indent rides the size token's stop so nested groups stay flush full-bleed
 // rows (padding, never margin) — AG Grid / Excel / Airtable grouping: the
 // chevron and label step in, the painted row still spans the stack.
 const groupIndentStepMap: Record<string, number> = {
@@ -380,7 +381,7 @@ function GroupHeader<T = any>({
   });
   const iconSize = groupIconSize(String(knobProps.sizeToken));
   const metaSize = groupMetaSizeMap[knobProps.sizeToken] ?? "$3";
-  const indent = groupIndent(knobProps.space, level);
+  const indent = groupIndent(sizeTokenStop(knobProps.sizeToken), level);
   const label = group.value == null || group.value === "" ? "No Value" : String(group.value);
   const countLabel = `${formatNumber(group.count, { maximumFractionDigits: 0 })} item${
     group.count !== 1 ? "s" : ""
@@ -397,7 +398,7 @@ function GroupHeader<T = any>({
       alignItems="center"
       gap="$2"
       minHeight={44}
-      padding={groupHeaderPaddingMap[knobProps.space] ?? "$3"}
+      padding={groupHeaderPaddingMap[sizeTokenStop(knobProps.sizeToken)] ?? "$3"}
       backgroundColor={knobProps.inputBackground}
       overflow="hidden"
       cursor="pointer"
@@ -472,7 +473,7 @@ interface GroupItemsProps<T = any> {
 function GroupItems<T = any>({ items, columns = [], level, stackEnd }: GroupItemsProps<T>) {
   const { knobProps } = useResolvedKnobs();
   const metaSize = groupMetaSizeMap[knobProps.sizeToken] ?? "$3";
-  const indent = groupIndent(knobProps.space, level);
+  const indent = groupIndent(sizeTokenStop(knobProps.sizeToken), level);
   const iconSize = groupIconSize(String(knobProps.sizeToken));
   return (
     <YStack>
@@ -488,7 +489,7 @@ function GroupItems<T = any>({ items, columns = [], level, stackEnd }: GroupItem
             {index > 0 ? <View {...hairline.line} /> : null}
             <XStack
               {...corners}
-              padding={groupItemPaddingMap[knobProps.space] ?? "$2"}
+              padding={groupItemPaddingMap[sizeTokenStop(knobProps.sizeToken)] ?? "$2"}
               paddingInlineStart={indent + iconSize}
               overflow="hidden"
               backgroundColor={index % 2 === 0 ? "$background" : "$color2"}
@@ -531,7 +532,7 @@ interface GroupFooterProps<T = any> {
 function GroupFooter<T = any>({ group, level, renderCustomFooter }: GroupFooterProps<T>) {
   const { knobProps } = useResolvedKnobs();
   return (
-    <View paddingInlineStart={groupIndent(knobProps.space, level)}>
+    <View paddingInlineStart={groupIndent(sizeTokenStop(knobProps.sizeToken), level)}>
       {renderCustomFooter(group, level)}
     </View>
   );

package/src/components/DataTablePagination/DataTablePagination.spec.tsx

@@ -1,5 +1,6 @@
 import { createElement, forwardRef, useEffect, useState } from "react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { defaultScaleInputs, generateScale } from "@multiplatform.one/theme";
 import { fireEvent, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
@@ -261,38 +262,47 @@ describe("DataTablePagination", () => {
     });
   });
 
-  describe("compact mode", () => {
-    it("should render in compact mode when compact is true", () => {
+  describe("small size token", () => {
+    it("renders at $3", () => {
       const { container } = renderWithProviders(
-        <DataTablePagination {...defaultProps} compact={true} />,
+        <DataTablePagination {...defaultProps} size="$3" />,
       );
 
       expect(container).toBeDefined();
     });
 
-    it("should render in normal mode when compact is false", () => {
-      const { container } = renderWithProviders(
-        <DataTablePagination {...defaultProps} compact={false} />,
-      );
+    it("renders at the default size token", () => {
+      const { container } = renderWithProviders(<DataTablePagination {...defaultProps} />);
 
       expect(container).toBeDefined();
     });
 
-    it("keeps the page-size selector in compact (DG-TBL-04)", () => {
+    it("keeps the page-size selector at $3 (DG-TBL-04)", () => {
       const { getByLabelText } = renderWithProviders(
-        <DataTablePagination {...defaultProps} compact />,
+        <DataTablePagination {...defaultProps} size="$3" />,
       );
 
       expect(getByLabelText("Select rows per page")).toBeDefined();
     });
 
-    it("hides the jumper in compact — the numbered window already jumps", () => {
+    it("hides the jumper below $true, where the numbered window already jumps", () => {
       const { queryByLabelText } = renderWithProviders(
-        <DataTablePagination {...defaultProps} compact />,
+        <DataTablePagination {...defaultProps} size="$3" />,
       );
 
       expect(queryByLabelText("Page number")).toBeNull();
     });
+
+    it("keeps its size Select level with the pager at the ambient token", () => {
+      const { getByLabelText } = renderWithProviders(
+        <DataTablePagination {...defaultProps} size="$3" />,
+      );
+
+      expect(getByLabelText("Page 1").getAttribute("data-size-token")).toBe("$true");
+      expect(getByLabelText("Select rows per page").getAttribute("data-visual-height")).toBe(
+        String(generateScale(defaultScaleInputs).tokens.size.$true),
+      );
+    });
   });
 
   describe("responsive behavior", () => {

package/src/components/DataTablePagination/DataTablePagination.stories.tsx

@@ -1,7 +1,6 @@
 import { Card } from "@multiplatform.one/components";
 import { action } from "@multiplatform.one/storybook";
 import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
-import { Preset } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
 import { within } from "storybook/test";
@@ -45,10 +44,6 @@ const meta: Meta<typeof DataTablePagination> = {
       control: "boolean",
       description: "Whether to show page jump input",
     },
-    compact: {
-      control: "boolean",
-      description: "Whether to use compact layout",
-    },
   },
 };
 
@@ -74,14 +69,13 @@ export const Basic: Story = {
     showInfo: true,
     showPageSizeSelector: true,
     showPageJump: true,
-    compact: false,
   },
 };
 
 export const Compact: Story = {
   args: {
+    size: "$3",
     ...Basic.args,
-    compact: true,
   },
 };
 
@@ -789,7 +783,7 @@ export const NarrowPanel: Story = {
     return (
       <YStack width={249}>
         <DataTablePagination
-          compact
+          size="$3"
           pagination={{
             ...pagination,
             totalCount: 1000,
@@ -802,14 +796,3 @@ export const NarrowPanel: Story = {
     );
   },
 };
-
-export const LargeSpaceNarrow: Story = {
-  ...NarrowPanel,
-  decorators: [
-    (Story) => (
-      <Preset overrides={{ space: "large" }}>
-        <Story />
-      </Preset>
-    ),
-  ],
-};

package/src/components/DataTablePagination/DataTablePagination.width.spec.tsx

@@ -47,29 +47,29 @@ beforeEach(() => {
   observed.onLayout = undefined;
 });
 
-describe("bounded compact table pagination", () => {
+describe("bounded small table pagination", () => {
   it("preserves the default footprint and grows for wide numeric options", () => {
-    const { rerender } = renderWithProviders(<DataTablePagination compact />);
-    expect(observed.sizeWidth).toBe(80);
-    rerender(<DataTablePagination compact pageSizeOptions={[10, 25, 1000000]} />);
-    expect(observed.sizeWidth).toBeGreaterThan(80);
+    const { rerender } = renderWithProviders(<DataTablePagination size="$3" />);
+    expect(observed.sizeWidth).toBe(92);
+    rerender(<DataTablePagination size="$3" pageSizeOptions={[10, 25, 1000000]} />);
+    expect(observed.sizeWidth).toBeGreaterThan(92);
   });
 
-  it("budgets the always-compact Select independently from footer spacing", () => {
-    const renderPager = (compact: boolean) => (
-      <Preset overrides={{ space: "large" }}>
-        <DataTablePagination compact={compact} />
+  it("budgets the page-size Select at the ambient token, whatever the footer size", () => {
+    const renderPager = (small: boolean) => (
+      <Preset>
+        <DataTablePagination size={small ? "$3" : undefined} />
       </Preset>
     );
     const { rerender } = renderWithProviders(renderPager(false));
     const width = observed.sizeWidth;
-    expect(width).toBeGreaterThan(80);
+    expect(width).toBe(92);
     rerender(renderPager(true));
     expect(observed.sizeWidth).toBe(width);
   });
 
   it("starts safely and responds to container width even on a desktop viewport", () => {
-    renderWithProviders(<DataTablePagination compact />);
+    renderWithProviders(<DataTablePagination size="$3" />);
     const pager = () => within(screen.getByRole("navigation", { name: "Page" }));
     expect(pager().getAllByRole("button")).toHaveLength(2);
     measure(1000);
@@ -83,7 +83,7 @@ describe("bounded compact table pagination", () => {
   });
 
   it("preserves the presentation when a container reports its width again", () => {
-    renderWithProviders(<DataTablePagination compact />);
+    renderWithProviders(<DataTablePagination size="$3" />);
     measure(249);
     const pager = screen.getByRole("navigation", { name: "Page" });
     const buttons = within(pager).getAllByRole("button");
@@ -95,7 +95,7 @@ describe("bounded compact table pagination", () => {
   it("resets to the first page when rows per page changes in a narrow table", async () => {
     renderWithProviders(
       <DataTablePagination
-        compact
+        size="$3"
         pagination={{ pageIndex: 5, pageSize: 25, totalPages: 40, totalCount: 1000 }}
       />,
     );