Move the TAC to above the button (#12438)

* Move the TAC to above the button

This isn't what the designs say, but there is a (bug/feature)* in
radix where it will turn a mouseup event within the menu into a
click so that it activates the menu option that's under your cursor
when you lift the button, even if you pressed the button down on
a different item. Unfortunately it forgot to check that the mouse
down happened in the menu, so if the menu appears under the cursor,
the cursor, it will immediately select whatever option appeared under
the cursor.

I think the simplest solution here is to just move the menu above the
TAC button. This also makes it consistent† with quick settings.

*delete as applicable
†Not actually consistent because it fades in a different way

* Update snapshots
pull/28217/head
David Baker 2024-04-19 10:04:48 +01:00 committed by GitHub
parent 198b975439
commit cc7edade21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 8 deletions

View File

@ -88,7 +88,8 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
</ReleaseAnnouncement> </ReleaseAnnouncement>
) : ( ) : (
<Menu <Menu
align="end" align="start"
side="top"
open={open} open={open}
onOpenChange={(newOpen) => { onOpenChange={(newOpen) => {
// Track only when the Threads Activity Centre is opened // Track only when the Threads Activity Centre is opened
@ -96,7 +97,6 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
setOpen(newOpen); setOpen(newOpen);
}} }}
side="right"
title={_t("threads_activity_centre|header")} title={_t("threads_activity_centre|header")}
trigger={ trigger={
<ThreadsActivityCentreButton <ThreadsActivityCentreButton

View File

@ -5,10 +5,10 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
aria-labelledby="radix-14" aria-labelledby="radix-14"
aria-orientation="vertical" aria-orientation="vertical"
class="_menu_1x5h1_17" class="_menu_1x5h1_17"
data-align="end" data-align="start"
data-orientation="vertical" data-orientation="vertical"
data-radix-menu-content="" data-radix-menu-content=""
data-side="right" data-side="top"
data-state="open" data-state="open"
dir="ltr" dir="ltr"
id="radix-15" id="radix-15"
@ -130,10 +130,10 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
aria-labelledby="radix-20" aria-labelledby="radix-20"
aria-orientation="vertical" aria-orientation="vertical"
class="_menu_1x5h1_17" class="_menu_1x5h1_17"
data-align="end" data-align="start"
data-orientation="vertical" data-orientation="vertical"
data-radix-menu-content="" data-radix-menu-content=""
data-side="right" data-side="top"
data-state="open" data-state="open"
dir="ltr" dir="ltr"
id="radix-21" id="radix-21"
@ -164,10 +164,10 @@ exports[`ThreadsActivityCentre should order the room with the same notification
aria-labelledby="radix-22" aria-labelledby="radix-22"
aria-orientation="vertical" aria-orientation="vertical"
class="_menu_1x5h1_17" class="_menu_1x5h1_17"
data-align="end" data-align="start"
data-orientation="vertical" data-orientation="vertical"
data-radix-menu-content="" data-radix-menu-content=""
data-side="right" data-side="top"
data-state="open" data-state="open"
dir="ltr" dir="ltr"
id="radix-23" id="radix-23"