fix(popover): R10 weak-ring — checked rows get the full highlight fill

A hovered/roving CHECKED row got only a thin ring (R9 split), reading as a weak
afterthought next to an unchecked row's vivid accent fill. Now selected rows get the
SAME bg-accent/35 fill + a STRONGER ring (ring-2 accent/80 vs the unselected ring-1
accent/60); the child checkmark/checkbox stays legible on the tint. The one idiom that
DID rely on the R9 ring-only — the table-filter options, whose selected item paints its
own solid bg-accent ROW — opts back in via a new `keepSelectedPaint` PopoverItem prop,
so its solid paint isn't downgraded to a 35% tint. Scopes the R9 exception to the one
menu that needs it instead of penalising every checkbox menu.
This commit is contained in:
2026-08-09 17:46:13 +02:00
parent eee7443e6f
commit 5c5c045ed9
2 changed files with 25 additions and 8 deletions
+2
View File
@@ -156,6 +156,7 @@ function FilterFunnel<T>({
<PopoverItem
role="menuitemradio"
checked={!filterOn}
keepSelectedPaint
onSelect={() => onApply(col.key, "")}
label={t("datatable.all")}
className={`text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition ${
@@ -169,6 +170,7 @@ function FilterFunnel<T>({
key={o.value}
role="menuitemradio"
checked={value === o.value}
keepSelectedPaint
onSelect={() => onApply(col.key, o.value)}
label={o.label}
className={`text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition ${