diff --git a/src/components/NoteList.rendering.test.tsx b/src/components/NoteList.rendering.test.tsx index c860fc02..697d1c48 100644 --- a/src/components/NoteList.rendering.test.tsx +++ b/src/components/NoteList.rendering.test.tsx @@ -123,7 +123,7 @@ describe('NoteList rendering', () => { expect(screen.getByTitle('Create new note')).toBeInTheDocument() }) - it('uses matching ghost icon button styling for note-list header actions', () => { + it('uses breadcrumbs-like button styling for note-list header actions', () => { renderNoteList({ entries: makeBookTypeEntries(['Priority'], { properties: { Priority: 'High' } }), selection: { kind: 'filter', filter: 'inbox' }, @@ -138,9 +138,18 @@ describe('NoteList rendering', () => { ] for (const button of buttons) { - expect(button).toHaveAttribute('data-size', 'icon-xs') expect(button).toHaveAttribute('data-variant', 'ghost') - expect(button).toHaveClass('h-7', 'w-7', 'text-muted-foreground', 'hover:bg-accent') + expect(button).toHaveClass( + '!h-auto', + '!w-auto', + '!min-w-0', + '!rounded-none', + '!p-0', + '!text-muted-foreground', + 'hover:!bg-transparent', + 'hover:!text-foreground', + ) + expect(button).not.toHaveAttribute('tabindex', '-1') } }) diff --git a/src/components/note-list/NoteListHeader.tsx b/src/components/note-list/NoteListHeader.tsx index 7efcac5c..0749f3c8 100644 --- a/src/components/note-list/NoteListHeader.tsx +++ b/src/components/note-list/NoteListHeader.tsx @@ -7,7 +7,7 @@ import { useDragRegion } from '../../hooks/useDragRegion' import { SortDropdown } from '../SortDropdown' import { ListPropertiesPopover, type ListPropertiesPopoverProps } from './ListPropertiesPopover' -const NOTE_LIST_ACTION_BUTTON_CLASSNAME = 'h-7 w-7 text-muted-foreground' +const NOTE_LIST_ACTION_BUTTON_CLASSNAME = '!h-auto !w-auto !min-w-0 !rounded-none !p-0 !text-muted-foreground hover:!bg-transparent hover:!text-foreground focus-visible:!bg-transparent data-[state=open]:!bg-transparent data-[state=open]:!text-foreground [&_svg]:!size-4' export function NoteListHeader({ title, typeDocument, isEntityView, listSort, listDirection, customProperties, sidebarCollapsed, searchVisible, search, propertyPicker, onSortChange, onCreateNote, onOpenType, onToggleSearch, onSearchChange }: { title: string @@ -38,7 +38,7 @@ export function NoteListHeader({ title, typeDocument, isEntityView, listSort, li > {title} -