Paul Trowbridge
6364ce0c8c
LAYOUT / ROWS / COLUMNS were 10px text-gray-400: about 2.5:1 on white, where WCAG wants 4.5:1 at that size. Their own class rather than a darker grey utility, because in dark mode text-gray-400 and text-gray-500 both resolve to --text-muted (#61656e, nearer 2:1 on the panel) -- swapping the utility would have fixed light mode and left dark exactly as it was. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
27 lines
1.3 KiB
JavaScript
27 lines
1.3 KiB
JavaScript
// One axis's collapse control. Rows and columns are the same thing — a depth in
|
||
// ViewConfig, counting the levels to show — so they are drawn by one component
|
||
// rather than two that happen to look alike.
|
||
//
|
||
// The buttons are named after the level they reveal. The row axis used to be a
|
||
// fixed 0 1 2 3: a number means nothing without already knowing what group_by
|
||
// holds, and a fixed range offers levels that do not exist while hiding ones
|
||
// that do.
|
||
export default function DepthButtons({ label, levels, depth, onPick, totalLabel = 'Total' }) {
|
||
return (
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="pf-section-label">{label}</span>
|
||
{Array.from({ length: levels.length + 1 }, (_, n) => (
|
||
<button key={n} onClick={() => onPick(n)}
|
||
title={n === 0
|
||
? `Collapse ${label.toLowerCase()} to a single total`
|
||
: `Show ${label.toLowerCase()} down to ${levels.slice(0, n).join(' › ')}`}
|
||
className={`border rounded px-1.5 py-0.5 transition-colors max-w-[9rem] truncate
|
||
${depth === n ? 'border-blue-300 text-blue-600 bg-blue-50'
|
||
: 'border-gray-200 text-gray-500 hover:border-gray-400'}`}>
|
||
{n === 0 ? totalLabel : levels[n - 1]}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|