feat(core): add useTableRowStatus plugin

[humbertovirtudes]

What

Adds useTableRowStatus — a plugin that prepends a narrow column rendering a full-height colored bar on each row's leading edge: a compact per-row status signal (error, warning, unread, etc.) without a dedicated status column.

const rowStatus = useTableRowStatus({
  getStatus: row =>
    row.state === 'error'
      ? {color: 'var(--color-icon-red)', label: 'Error'}
      : null,
});
<Table data={data} columns={columns} idKey="id" plugins={{rowStatus}} />;

Design

• getStatus(item) maps a row to {color, label?} — any CSS color (token or raw) plus an optional accessible label — or null for no indicator.
• Prepends a fixed 8px, non-resizable __rowStatus column with an empty header; transformBodyCell zeroes the cell padding so a 4px absolutely-positioned bar spans the row's full height on the leading edge.
• The bar exposes role="img" + aria-label/title when a label is given, so status is announced and hoverable.

Includes

• Storybook (Core/TableRowStatus): Default (theme-token colors, mixed statuses incl. "no bar") and RawColors (hex).
• Docsite: useTableRowStatus hook page + a "Status Bars" example block.
• Table Lab: added as a toggle (colors by member status).
• Unit tests (4): narrow status column + empty header, labeled bars for statused rows, no bar for null, and color applied to the bar.

Validation

• Build ✅, lint ✅, sandbox typecheck ✅
• 144 tests pass (rowStatus + full Table suite, no regressions); changeset included.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Error		Jul 23, 2026 8:58am

[github-actions]

PR Analysis Report

Modified Components

Banner

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	322	-
Complexity	N/A	High (22)	-

Chat

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	5240	-
Complexity	N/A	Very High (425)	-

CodeBlock

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1560	-
Complexity	N/A	Very High (83)	-

DateTimeInput

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	784	-
Complexity	N/A	Very High (141)	-

FileInput

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	631	-
Complexity	N/A	Very High (95)	-

MobileNav

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	364	-
Complexity	N/A	Very High (37)	-

NumberInput

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	495	-
Complexity	N/A	Very High (76)	-

PowerSearch

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	3661	-
Complexity	N/A	Very High (335)	-

SideNav

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1848	-
Complexity	N/A	Very High (179)	-

Table

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1918	-
Complexity	N/A	Very High (101)	-

authoring

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	124	-
Complexity	N/A	Low (1)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.7KB	0B

Accessibility Audit

Status: 7 accessibility violation(s) found — 1 critical, 6 serious.

Banner - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/15 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Chat - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/8 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

FileInput - 3 issue(s)

• 🟠 serious: Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies
  • Rule: nested-interactive · Affects 12/14 stories · Learn more
  • WCAG: 4.1.2 (Level A)
• 🔴 critical: Ensure an element's role supports its ARIA attributes
  • Rule: aria-allowed-attr · Affects 1/14 stories · Learn more
  • WCAG: 4.1.2 (Level A)
• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/14 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

PowerSearch - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/24 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Table - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 4/24 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

---

_{Generated by PR Enrichment workflow | View full report}

[humbertovirtudes]

@ernestt can I have your design eyes here pls

[ernestt]

Thanks again for continuing all the plugins! @humbertovirtudes Curious why we are diverging from the original version that shows either a status dot or icon? My 2 worries with this design are

1. Status is conveyed through color alone
2. The shape of this is similar to out tab selection state. Might be interpreted as selected row?

[humbertovirtudes]

Thanks again for continuing all the plugins! @humbertovirtudes Curious why we are diverging from the original version that shows either a status dot or icon? My 2 worries with this design are

1. Status is conveyed through color alone
2. The shape of this is similar to out tab selection state. Might be interpreted as selected row?

the vertical color feels less invasive / space consuming that a status dot. However if status dot is preferred for consistency, Im down

[humbertovirtudes]

Good call @ernestt, switched it. The default indicator is now a centered status dot rather than the full-height leading-edge bar, which addresses both concerns:

1. No longer color-only by default when you opt into shape: the icon field renders an Icon instead of the dot (shape + color), same as before. For the plain dot, label supplies the accessible name via role="img".
2. No longer reads as the tab selection state — the vertical bar shape is gone; a dot matches the original status-dot / icon pattern.

getStatus still returns {color, icon?, label?} (or null). Dot by default, icon when you pass one. Updated the tests, docs, story, CLI template, and Table Lab accordingly. Rebased on latest main and green.

[ernestt]

Following up with the specific conventions behind my two worries — both trace directly to the Design Conventions wiki, so this is less a taste call than a convention gap.

1. Status by color alone. The System Interaction States section states it as a hard rule: "Status always pairs a semantic token with an icon — never color alone." The Color foundation flags the same thing as a smell (🟡 "Color alone — status by hue with no icon/text"). Right now icon and label are both optional, so the default/minimal usage ({color: 'error'}) is exactly the anti-pattern — and one of the unit tests deliberately locks in the color-only path. The icon addition made compliance possible; I think we want it to be the default. Making the shape signifier primary (icon/dot) and the color secondary would close this.

2. Collision with the selection language + the edge-bar tell. Two conventions here:

• Our approved "Selected" representations already claim the leading edge bar: Selected (Edge style) is "--color-accent edge bar / underline marks the current item" (tabs/steps/entries) and Selected (Depressed style) covers list & nav rows. A colored full-height bar on a row's leading edge reuses the system's established "this is the current/selected item" channel to mean "status" — which cuts against "use the system's established channel for a given meaning." A red leading bar reads as "selected row," not "errored row."
• The Radius foundation lists 🔴 "Side-tab accent — a thick colored stripe on one edge… (a classic AI tell)" as a smell in its own right.

The overarching principle is "Minimize visuals per state… Reuse an existing representation before inventing a new one" — which is really why I asked why we diverged from the original dot/icon version. That version was already convention-compliant: a leading status icon/dot (shape + semantic token) signals per-row status without color-alone and without borrowing the selection edge-bar. I'd lean toward going back to that as the primary treatment, keeping the color as reinforcement rather than the sole signal.

[humbertovirtudes]

@ernestt should be good to land now yes?

[cixzhang]

Thanks for making the updates! This is starting to look closer to what we have internally. @ernestt does this address your comments?

I left a few more items for your consideration. Main blocking one is whether we should force label to be required. I'm not sure if there's another way we can ensure accessible context for unlabeled statuses.

[cixzhang]

Hmm do we want to make this required instead? Without the label I'm not sure how we would make the status accessible for AT users.

[humbertovirtudes]

Good call — made it required. label is now a required field on TableRowStatus, so a status can never be conveyed by color alone; it's announced to assistive tech via role="img" and also shown on hover. Updated the type, the render path, the doc, and the tests in 90a6088.

[ernestt]

Yes this looks good from my side. Thanks for fixing!

[cixzhang]

What do you think about applying tooltip instead of the native title for more visual consistency?

[humbertovirtudes]

Done — switched from the native title to the Tooltip component for visual consistency with the rest of the system. The indicator (dot or icon) is now wrapped in <Tooltip content={label}>. In 90a6088.