Skip to content

feat: unify grid styling attributes under data-pretable-*#169

Merged
blove merged 9 commits into
mainfrom
theming-semantic-attrs
Jun 7, 2026
Merged

feat: unify grid styling attributes under data-pretable-*#169
blove merged 9 commits into
mainfrom
theming-semantic-attrs

Conversation

@blove

@blove blove commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Summary

Unifies the grid's styling/identity/state DOM attributes under a single, consistent, documented data-pretable-* namespace — building on the @layer + :where() override contract (#160) so consumers can target any grid part (a column, a row, selected/focused/pinned state, body vs header) with plain CSS.

  • Rename every previously-unprefixed styling attr to data-pretable-*: data-column-id, data-row-id, data-row-index, data-row-height, data-selected, data-focused, data-pinned, data-row-select-cell, data-dragging. Collision-safe, clearly Pretable's, one stable contract.
  • New capability: header cells now emit data-pretable-column-id → target a column's header via CSS (previously impossible).
  • Dead-code removal: dropped the [data-pinned="right"] rule from grid.css. Right-pinning is not a feature (core setColumnPinned is "left" | null; PretableColumn.pinned is "left"), so the rule could never match. data-pretable-pinned is left-only.
  • Docs: updated grid/theming pages + added a "Targeting attributes" contract table to the cascade & overrides page.

Spec: docs/superpowers/specs/2026-06-06-semantic-targeting-attributes-design.md · Plan: docs/superpowers/plans/2026-06-06-semantic-targeting-attributes.md

Touched (and deliberately not)

  • @pretable/react emission (pretable-surface.tsx, labeled-grid-surface.tsx), @pretable/ui grid.css, and the bench pretable profile (bench-runtime.ts).
  • Comparators untouched: TanStack/AG Grid/MUI adapters and their bench profiles keep their own data-row-id etc. — not Pretable's contract.

Guards / tests

  • New attribute-contract.test.tsx — fails if any unprefixed styling data-* ever leaks (locks the namespace; covers rows, body cells, header cells, and the row-select column).
  • Cross-package coupling verified: pnpm bench:matrix --adapters=pretable --scenarios=S2 --scripts=sort,filter-text --scale=hypothesis → both runs completed (the harness reads the renamed data-pretable-row-id/-row-index).
  • @pretable/react 208 · @pretable/ui 16 (css-cascade + token contract) · bench-runtime 19 · website docs 21 — all green. No public-API (TS) change, so api:check unaffected.

Process

Brainstorm → spec → plan → subagent-driven execution (implementer + spec + code-quality review per task). Grounding caught that right-pinning isn't real (spec amended: remove, don't "emit right") and that data-dragging + a #160 cascade-test fixture also needed the rename. Final whole-branch review: merge-ready.

🤖 Generated with Claude Code

blove and others added 9 commits June 6, 2026 18:18
Unify the grid's styling/identity/state data-* attributes under a consistent
data-pretable-* namespace, fill two gaps (header data-pretable-column-id;
data-pretable-pinned now emits "right", fixing a dead grid.css rule), and
document the set as the stable styling-targeting contract. Updates emission
(pretable-surface, labeled-grid-surface), grid.css, the bench pretable profile
(not comparators), tests, and docs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…e not emit

Verified right-pinning is not a feature (core setColumnPinned: 'left'|null;
PretableColumn.pinned: 'left'). So data-pretable-pinned stays left-only and the
dead [data-pinned='right'] grid.css rule is removed, not 'completed'. Header
data-pretable-column-id remains the one real gap-fill.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4-task plan: rename @pretable/react styling attrs to data-pretable-* + add header
column-id + namespace guard test (T1); rename grid.css + drop dead right-pin rule
(T2); update bench pretable profile only + verify via matrix run (T3); docs +
contract table (T4).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…lumn-id

Renames data-column-id/-row-id/-row-index/-row-height/-selected/-focused/-pinned/
-row-select-cell to the data-pretable-* namespace, and adds data-pretable-column-id
to header cells (target a column's header via CSS). Adds an attribute-contract
test that fails if any unprefixed styling data-* leaks. data-pretable-pinned stays
left-only (right-pin unsupported). Also renames data-dragging to data-pretable-dragging
on the resize handle (same namespace contract).
Enable the row-select column in the guard fixture so data-pretable-row-select-cell
/-header are exercised by the no-unprefixed-data-* check, and document the
deliberate absence of data-pretable-column-id on the synthetic row-select header.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…in rule

Matches the data-pretable-* attribute contract from the react change. Removes the
[data-pinned="right"] rule — right-pinning is unsupported, so it could never
match. @layer pretable + :where() wrapping unchanged.
The pretable profile now reads the renamed attributes; comparator profiles keep
their own data-row-id/-index. Verified with a pretable sort/filter matrix run.
Also fixes cascade-override.spec.ts fixture that still used data-selected (Task 2
omission) — the test now uses data-pretable-selected to match the renamed grid.css.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Updates grid/theming docs to the renamed attributes and adds a targeting-attribute
table + examples to the cascade & overrides page.
Updates packages/ui/README.md and a globals.css comment to the renamed
attributes (drops the never-real "right" pin value), and footnotes the
row-select header's deliberate omission of data-pretable-column-id.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pretable Ready Ready Preview, Comment Jun 7, 2026 2:53pm

@blove blove enabled auto-merge (squash) June 7, 2026 14:53
@blove blove merged commit 4468070 into main Jun 7, 2026
13 checks passed
@blove blove deleted the theming-semantic-attrs branch June 7, 2026 14:55
@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Vercel preview ready

Preview: https://pretable-44k2ixq5y-cacheplane.vercel.app
Commit: fc0296b4c7c9223ee92245b80ae3efab14f96483

Updated automatically by the deploy-preview job.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant