[WC-3548]: honor Position of pagination for custom pagination

[yordan-st]

Pull request type

Bug fix (non-breaking change which fixes an issue)

Description

Data Grid 2's "Position of pagination" property already controlled the built-in Pagination control but had no effect on custom pagination: WidgetFooter rendered the custom pagination widgets unconditionally and WidgetTopBar never rendered them at all, so "Above grid" silently did nothing. This mirrors the bug fixed for Gallery, which explicitly scoped Data Grid 2 out to keep that PR reviewable — this is that follow-up.

Custom pagination now honors pagingPosition in both runtime and editor preview: top bar for "Above grid", footer for "Below grid", and footer-only (not duplicated) for "Both" — duplicating the widgets placeholder would duplicate widget instances, DOM ids, and state. pagingPosition stays visible in Studio Pro when custom pagination is enabled (previously hidden as a stopgap), and a new design-time warning explains the single-render behavior for "Both".

What should be covered while testing?

• Add a Data Grid 2, enable Custom pagination, place a widget in the drop zone.
• Set "Position of pagination" to "Above grid" → widgets render above the grid, both at runtime and in the Studio Pro page editor preview.
• Set it to "Below grid" → widgets render below the grid (unchanged from before).
• Set it to "Both" → widgets render once, below the grid, and Studio Pro shows a warning on the "Position of pagination" property.
• Confirm "Position of pagination" stays visible/editable in the properties panel while Custom pagination is enabled.
• Regression: built-in pagination (Custom pagination off) still respects top/bottom/both as before.

No XML changes, no docs PR needed. Changelog entry included in this branch.

Ticket: WC-3548

[github-actions]

AI Code Review

⚠️ Approved with suggestions — low-severity items only, safe to merge

---

What was reviewed

File	Change
src/components/WidgetFooter.tsx	Gate custom pagination rendering on pagingPosition !== "top"
src/components/WidgetTopBar.tsx	Add custom pagination branch for pagingPosition === "top"
src/Datagrid.editorConfig.ts	Stop hiding pagingPosition when custom pagination is enabled
src/Datagrid.editorPreview.tsx	Mirror top/bottom placement rule for the preview's CustomPagination
src/consistency-check.ts	Add checkCustomPaginationPosition warning for both + custom pagination
src/__tests__/consistency-check.spec.ts	New tests for the both-warning and non-warning cases
src/__tests__/__snapshots__/consistency-check.spec.ts.snap	New snapshot for the warning
src/components/__tests__/WidgetFooter.spec.tsx	New tests: bottom/both renders, top suppresses
src/components/__tests__/WidgetTopBar.spec.tsx	New tests: top renders, bottom/both suppressed
CHANGELOG.md	User-facing entry for the fix
openspec/changes/pagination-position-not-honored/**	OpenSpec artifacts (design, proposal, spec, tasks)

Skipped (out of scope): dist/, pnpm-lock.yaml

---

Findings

⚠️ Low — Snapshot used for warning message — prefer toEqual assertion

File: src/__tests__/consistency-check.spec.ts line 304
Note: The "warns when custom pagination is enabled and position is both" test uses toMatchSnapshot() on a plain object array containing only static, deterministic values (no dates, IDs, or async data). Snapshots add a maintenance surface: a reviewer seeing the snap file has to cross-reference to understand the expected value, and an accidental wording change silently updates the baseline with -u. The warning message and severity are exactly the kind of thing worth asserting explicitly so a regression is caught rather than silently committed.

Suggested fix:

expect(check(props as unknown as DatagridPreviewProps)).toEqual([
    {
        property: "pagingPosition",
        severity: "warning",
        message:
            'Custom pagination cannot be shown in both positions and will render below the grid. ' +
            'Set "Position of pagination" to "Above grid" or "Below grid" to choose a single position.'
    }
]);

---

⚠️ Low — Missing test: custom pagination disabled entirely (built-in pagination, all positions)

File: src/components/__tests__/WidgetFooter.spec.tsx, WidgetTopBar.spec.tsx
Note: The new test files only set useCustomPagination: true. They don't assert that the existing built-in pagination still behaves correctly (i.e. that useCustomPagination: false with each pagingPosition value doesn't accidentally render the custom pagination placeholder). This is a regression-guard gap — the condition changed from a simple customPaginationEnabled to customPaginationEnabled && pagingPosition !== "top", so an off-by-one logic error there would go undetected by the current suite. A single extra it block per file covering useCustomPagination: false with "top" would close this.

---

Positives

• The pagingPosition condition mirroring Gallery's exact shape (!== "top" for footer, === "top" for top bar) makes cross-widget auditability trivial — a future reader can grep the Gallery fix and immediately verify parity.
• Removing pagingPosition from hidePropertiesIn by switching to a single hidePropertyIn("showPagingButtons") is clean: no implicit list maintenance, no risk of accidentally re-hiding pagingPosition in a future diff.
• checkCustomPaginationPosition returning Problem | undefined and being pushed conditionally is consistent with the existing checker style in consistency-check.ts.
• All three pagingPosition values ("top", "bottom", "both") are covered by both the runtime and editor-preview hooks, and the test files exercise all three paths — good edge-case discipline.
• The OpenSpec artifacts are thorough and self-contained; the design doc's explicit non-goals (no resolveSlots, no changes to widget-plugin-grid) correctly scope the fix and explain why Gallery's additional machinery isn't needed here.

[iobuhov]

LGTM