🐛 fix(desktop): restore tooltip-wrapped trigger behavior

This commit is contained in:
AmAzing129 2026-07-16 22:29:45 -07:00 committed by Brooklyn Nicholson
parent 667b98b5cf
commit 84db32484f
4 changed files with 65 additions and 8 deletions

View file

@ -0,0 +1,33 @@
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
import { PanelRowMenu } from './panel'
beforeAll(() => {
Element.prototype.hasPointerCapture ??= () => false
Element.prototype.releasePointerCapture ??= () => undefined
Element.prototype.setPointerCapture ??= () => undefined
HTMLElement.prototype.scrollIntoView ??= () => undefined
})
describe('PanelRowMenu', () => {
afterEach(() => {
cleanup()
})
it('opens its actions menu when the trigger has a tooltip', async () => {
const onSelect = vi.fn()
render(<PanelRowMenu items={[{ label: 'Rename', onSelect }]} />)
const trigger = screen.getByRole('button', { name: 'Actions' })
fireEvent.pointerMove(trigger, { pointerType: 'mouse' })
expect((await screen.findByRole('tooltip')).textContent).toContain('Actions')
fireEvent.pointerDown(trigger, { button: 0, ctrlKey: false, pointerType: 'mouse' })
fireEvent.click(await screen.findByRole('menuitem', { name: 'Rename' }))
expect(onSelect).toHaveBeenCalledOnce()
})
})

View file

@ -217,8 +217,8 @@ export function PanelRowMenu({ items, label = 'Actions' }: { items: PanelMenuIte
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <Tip label={label}>
<Tip label={label}> <DropdownMenuTrigger asChild>
<Button <Button
aria-label={label} aria-label={label}
className="size-5 rounded-[4px] bg-transparent text-(--ui-text-tertiary) opacity-0 transition-colors duration-100 hover:bg-(--ui-control-active-background) hover:text-foreground focus-visible:opacity-100 focus-visible:ring-0 group-hover/row:opacity-100 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground data-[state=open]:opacity-100 [&_svg]:size-3.5!" className="size-5 rounded-[4px] bg-transparent text-(--ui-text-tertiary) opacity-0 transition-colors duration-100 hover:bg-(--ui-control-active-background) hover:text-foreground focus-visible:opacity-100 focus-visible:ring-0 group-hover/row:opacity-100 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground data-[state=open]:opacity-100 [&_svg]:size-3.5!"
@ -227,8 +227,8 @@ export function PanelRowMenu({ items, label = 'Actions' }: { items: PanelMenuIte
> >
<Codicon name="kebab-vertical" size="0.875rem" /> <Codicon name="kebab-vertical" size="0.875rem" />
</Button> </Button>
</Tip> </DropdownMenuTrigger>
</DropdownMenuTrigger> </Tip>
<DropdownMenuContent align="end" className="w-40" sideOffset={6}> <DropdownMenuContent align="end" className="w-40" sideOffset={6}>
{items.map(item => ( {items.map(item => (
<DropdownMenuItem <DropdownMenuItem

View file

@ -0,0 +1,24 @@
import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import { ShareControls } from './share-controls'
describe('ShareControls', () => {
afterEach(() => {
cleanup()
})
it('opens its dialog when the trigger has a tooltip', async () => {
render(<ShareControls shareCode="map-code" />)
const trigger = screen.getByRole('button', { name: 'Import / export map' })
fireEvent.pointerMove(trigger, { pointerType: 'mouse' })
expect((await screen.findByRole('tooltip')).textContent).toContain('Import / export map')
fireEvent.click(trigger)
const dialog = await screen.findByRole('dialog')
expect(within(dialog).getByRole('heading', { name: 'Import / export map' })).toBeTruthy()
})
})

View file

@ -76,8 +76,8 @@ export function ShareControls({ imported = false, onImport, onResetMap, shareCod
}} }}
open={open} open={open}
> >
<DialogTrigger asChild> <Tip label={t.starmap.shareTitle}>
<Tip label={t.starmap.shareTitle}> <DialogTrigger asChild>
<Button <Button
aria-label={t.starmap.shareTitle} aria-label={t.starmap.shareTitle}
className="text-muted-foreground hover:text-foreground" className="text-muted-foreground hover:text-foreground"
@ -86,8 +86,8 @@ export function ShareControls({ imported = false, onImport, onResetMap, shareCod
> >
<Upload className="size-3.5" /> <Upload className="size-3.5" />
</Button> </Button>
</Tip> </DialogTrigger>
</DialogTrigger> </Tip>
<DialogContent className="max-w-md"> <DialogContent className="max-w-md">
<DialogHeader> <DialogHeader>