fix(design): keep sortable table headers uppercase (#1558)
The sortable headers on /bookkeeping and /invoices wrap their label in a button, and preflight's text-transform: none on buttons swallowed the uppercase from TH_CLASS, so sorted lists showed sentence-case heads next to every other table's uppercase idiom. Re-apply uppercase on the sort control itself. Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Jakob Wennberg
Claude Fable 5
parent
18755a37ec
commit
5453f11330
@@ -168,10 +168,12 @@ function SortableHeader({
|
||||
className={cn(TH_CLASS, className)}
|
||||
aria-sort={direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none'}
|
||||
>
|
||||
{/* Preflight sets text-transform: none on buttons, which would drop the
|
||||
TH_CLASS uppercase idiom inside the sort control. */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
'-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
align === 'right' && 'ml-auto justify-end',
|
||||
)}
|
||||
aria-label={sortLabel}
|
||||
|
||||
@@ -150,10 +150,12 @@ function SortableHeader({
|
||||
className={cn(TH_CLASS, className)}
|
||||
aria-sort={active ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'}
|
||||
>
|
||||
{/* Preflight sets text-transform: none on buttons, which would drop the
|
||||
TH_CLASS uppercase idiom inside the sort control. */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
'-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
align === 'right' && 'ml-auto justify-end',
|
||||
)}
|
||||
aria-label={sortLabel}
|
||||
|
||||
Reference in New Issue
Block a user