Skip to content
Open
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
54fed16
feat(Table): expose theme targets for the sort and filter affordances
freddymeta Aug 24, 2026
7d67af8
Address the review: colour on the button reaches the glyph, and clear…
freddymeta Aug 25, 2026
03941ba
Leave the CI wiring for a maintainer — this PAT has no `workflow` scope
freddymeta Aug 25, 2026
6c4ea0d
fix(Table): give the sort and filter affordances the shared interacti…
Aug 28, 2026
312eac9
fix(guard): assert the painted stroke/fill, and wait for the story to…
Aug 28, 2026
d69785e
docs(changeset): record the affordance interaction states
Aug 28, 2026
f8f250f
Merge remote-tracking branch 'origin/main' into r5420
Aug 28, 2026
84824eb
Merge origin/main into feat/table-affordance-theme-targets
freddymeta Aug 31, 2026
c6ba5b1
fix(Table): let the sortable heading follow its header cell, and hono…
freddymeta Aug 31, 2026
db8c0fd
fix(Table): make the sort glyph's colour var internal
freddymeta Aug 31, 2026
3946d30
Merge remote-tracking branch 'origin/main' into feat/table-affordance…
freddymeta Sep 1, 2026
bc4f09e
Merge remote-tracking branch 'origin/main' into feat/table-affordance…
freddymeta Sep 2, 2026
864ecc8
fix(Table): build the sort and filter affordances on Button, keep one…
freddymeta Sep 2, 2026
9c0da1e
docs(Table): align the spec with this head — ten targets, and the vis…
freddymeta Sep 2, 2026
b96b63d
test(Table): measure column order under RTL, closing the pr-rtl cover…
freddymeta Sep 2, 2026
f45cefe
Merge remote-tracking branch 'origin/main' into HEAD
freddymeta Sep 2, 2026
e1da289
Merge remote-tracking branch 'origin/main' into HEAD
freddymeta Sep 2, 2026
2c4dc27
test(Table): drop the now-stale verified-not-applicable declaration
freddymeta Sep 2, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions .changeset/table-affordance-theme-targets.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
'@astryxdesign/core': patch
---

[fix] Table: the sort control and the filter trigger are now the real `Button`
and `IconButton` instead of native buttons that restated their interaction
states. Rest, hover, pressed, the focus ring, the press transform and the
reduced-motion guard all come from Button now, so they cannot drift from it.
Visible consequences: both controls take Button's hover and pressed overlay
(`--color-overlay-hover` / `--color-overlay-pressed`, drawn as a background
image rather than a background colour) and its `scale(0.98)` press; the filter
trigger, which previously fell through to the user agent's default outline on
keyboard focus, draws the shared 2px ring; the filter trigger's box is Button's
`sm` square (28x28 measured, above the 24px WCAG 2.2 2.5.8 minimum) instead of a
bare icon. The column heading inside the sort control is unchanged: measured
against its `<th>`, colour, white-space, overflow, text-overflow, font size and
weight all match.

[fix] Table: the resting sort arrows and filter funnel are no longer dimmed to
`opacity: 0.35`. Composited against the header that put them at **1.57:1**,
below the 3:1 [WCAG
1.4.11](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) asks
of a UI component; they render at `--color-icon-secondary`, measured 4.74:1.
Both affordances stay visible at rest rather than fading in on header hover. The
sorted arrow still moves to the accent colour and still changes glyph
(`arrowsUpDown` -> `arrowUp`/`arrowDown`) alongside the `aria-sort` the header
already carries, so the state is never colour alone. The glyph darkens a step on
hover so the feedback survives a forced-colors mode that drops backgrounds, and
hover is guarded on `@media (hover: hover)` so a touch device does not stick in
it after a tap.

[feat] Table: `astryx-table-sort-button` (reflecting `direction`) and
`astryx-table-filter-button` (reflecting `active`) are stable theme targets.
Both controls are rendered inside Table's own plugins, so there is no wrapper a
consumer can interpose and no `renderX` prop to route around: restyling either
meant `.astryx-table-header-cell button[aria-haspopup='dialog']`, a selector
that says "the button that opens a dialog", which is the filtering funnel today
and could be anything tomorrow.

`color` on `astryx-table-sort-button` paints the sort glyph and leaves the
column name alone. The control holds both, and the name belongs to the header
cell, so the value is routed to the glyph through the derived-var registry and
the source property is dropped — the same mechanism Progress bar marks and Text
area padding already use. `color` on `astryx-table-filter-button` reaches the
funnel directly, since that control holds nothing else.

@freddymeta
Loading
Loading