[itsprade]

Stacked on #635. This changes how the error popover and the cell's error outline look; the editing-session behaviour, a11y labels and the error API are unchanged.

Why

The default popover showed only the message, in the same neutral styling as a tooltip, so it didn't read as an error. It opened under the small icon rather than the cell, and the 2px red ring felt heavy in a dense table.

One thing for you to weigh in on: when the popover closes, focus returns to the in-cell icon (Base UI default). Sending it back to the editor via finalFocus might be nicer, but that touches your focus-group logic, so I left it alone.

What (editable-cell.tsx)

• Cell outline: the error ring is 1.5px (2px before), including while the cell is focused. Parse errors share this outline, so they get 1.5px too.
• Cell icon: strokeWidth={2.5}, and its focus ring is removed. The ring drew a second red box around the icon when focus returned to it on popover close; the trigger is tabIndex={-1}, and keyboard users open details with Alt+↓ from the editor.
• Placement: the popup is anchored to the cell (<td>), opening directly underneath and aligned to the cell's left edge (it was aligned to the end of the icon trigger).
• Tint: the popup uses Alert's error colours (danger-surface background, danger-text), with no border and a lighter shadow-sm.
• Default content: a CircleAlert icon (strokeWidth={2.5}, the text colour at 70% opacity), centred on the first line of text, then the message. Long messages wrap at max-w-xs.
• Spacing: tighter padding (px-2.5 py-2). This also applies to custom error.render content.

Why the tint is a background-image

--danger-surface is --primitive-red-a3, a transparent colour. Used as bg-*, it replaces the opaque bg-popover and the table's row lines show through. So the tint is layered as a background-image over bg-popover, the same technique the editable-cell tint uses. I'll raise a separate theme proposal for a solid companion role (e.g. --danger-surface-solid → --primitive-red-3) for overlays. If we add that, this becomes a plain bg-danger-surface-solid.

Demo

DataTable Lab → Editing errors → Draft note:

• ! shows a short message
• !! shows a long, full-sentence message, to check wrapping

Test

• vitest run src/components/data-table: 672 passed
• tsc --noEmit passes
• Checked manually in light and dark mode in the lab

🤖 Generated with Claude Code

[github-actions]

Code Metrics Report

	main (b0fd352)	#638 (7e45cfd)	+/-
Coverage	89.3%	89.3%	+0.0%
Test Execution Time	2m31s	1m53s	-38s

Details

  |                     | main (b0fd352) | #638 (7e45cfd) |  +/-  |
  |---------------------|----------------|----------------|-------|
+ | Coverage            |          89.3% |          89.3% | +0.0% |
  |   Files             |            227 |            228 |    +1 |
  |   Lines             |           7240 |           7401 |  +161 |
+ |   Covered           |           6469 |           6615 |  +146 |
+ | Test Execution Time |          2m31s |          1m53s |  -38s |

Code coverage of files in pull request scope (91.7% → 91.4%, patch 100.0%)

Files	Coverage	+/-	Patch Coverage	Status
packages/core/src/components/data-table/editable-cell.tsx	92.7%	-2.7%	100.0%	modified
packages/core/src/components/data-table/i18n.ts	53.3%	+7.1%	-	affected
packages/core/src/components/data-table/use-cell-edit-session.ts	97.8%	+97.8%	-	affected

---

Reported by octocov