refactor(ui): use Menu for user profile actions

Author: austincalvelage

packages/ui/src/mosaic/user-profile/__tests__/user-profile-profile-panel.view.test.tsx

@@ -83,6 +83,8 @@ describe('UserProfileProfilePanelView', () => {
     expect(screen.getByRole('heading', { level: 4, name: 'Connected accounts' })).toBeInTheDocument();
     expect(screen.getByRole('heading', { level: 4, name: 'Danger zone' })).toBeInTheDocument();
     await user.click(screen.getByRole('button', { name: 'Manage Google' }));
+    expect(onManageConnectedAccount).not.toHaveBeenCalled();
+    await user.click(screen.getByRole('menuitem', { name: 'Manage' }));
     await user.click(screen.getByRole('button', { name: 'Connect' }));
     await user.click(screen.getByRole('button', { name: 'Delete account' }));
 
@@ -111,6 +113,8 @@ describe('UserProfileProfilePanelView', () => {
     await user.type(screen.getByRole('textbox', { name: 'Name' }), ' Jr.');
     await user.click(within(screen.getByRole('region', { name: 'Email' })).getByRole('button', { name: 'Add' }));
     await user.click(screen.getByRole('button', { name: 'Manage item2@clerk.dev' }));
+    expect(onManageEmail).not.toHaveBeenCalled();
+    await user.click(screen.getByRole('menuitem', { name: 'Manage' }));
 
     expect(onNameChange).toHaveBeenCalled();
     expect(onAddEmail).toHaveBeenCalledOnce();

packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx

@@ -11,6 +11,7 @@ import { Heading } from '../components/heading';
 import { Icon } from '../components/icon';
 import { Input } from '../components/input';
 import { Item } from '../components/item';
+import { Menu } from '../components/menu';
 import { Text } from '../components/text';
 import { mergeStyleProps, themeProps } from '../props';
 import { colorVars, space } from '../tokens.stylex';
@@ -266,17 +267,15 @@ function ConnectedAccountsSection({
                     </Item.Content>
                     <Item.Actions>
                       {connected && onManage ? (
-                        <Button
-                          aria-label={`Manage ${account.provider}`}
-                          color='neutral'
-                          shape='square'
-                          size='sm'
-                          touchTarget={false}
-                          variant='ghost'
-                          onClick={() => onManage(account.id)}
-                        >
-                          <Icon name='ellipsis' />
-                        </Button>
+                        <Menu.Root placement='bottom-end'>
+                          <Menu.Trigger aria-label={`Manage ${account.provider}`} />
+                          <Menu.Content>
+                            <Menu.Item
+                              label='Manage'
+                              onClick={() => onManage(account.id)}
+                            />
+                          </Menu.Content>
+                        </Menu.Root>
                       ) : null}
                       {!connected && onConnect ? (
                         <Button
@@ -413,17 +412,15 @@ function ContactSection({
             </Item.Content>
             {onManage ? (
               <Item.Actions>
-                <Button
-                  aria-label={`Manage ${item.value}`}
-                  color='neutral'
-                  shape='square'
-                  size='sm'
-                  touchTarget={false}
-                  variant='ghost'
-                  onClick={() => onManage(item.id)}
-                >
-                  <Icon name='ellipsis' />
-                </Button>
+                <Menu.Root placement='bottom-end'>
+                  <Menu.Trigger aria-label={`Manage ${item.value}`} />
+                  <Menu.Content>
+                    <Menu.Item
+                      label='Manage'
+                      onClick={() => onManage(item.id)}
+                    />
+                  </Menu.Content>
+                </Menu.Root>
               </Item.Actions>
             ) : null}
           </Item.Root>