From ce46b0835edfeec48d5246d01eb0022719be2756 Mon Sep 17 00:00:00 2001
From: Marcel Cruz <12413903+marcelscruz@users.noreply.github.com>
Date: Tue, 19 Dec 2023 13:16:02 -0300
Subject: [PATCH 1/2] fix(clerk-js): Make user name on <UserButton showName />
 clickable

---
 .changeset/happy-panthers-approve.md          |  6 ++
 .../ui/components/UserButton/UserButton.tsx   | 59 +++++--------------
 .../UserButtonTopLevelIdentifier.tsx          | 24 ++++++++
 .../UserButton/UserButtonTrigger.tsx          | 27 ++++++---
 4 files changed, 65 insertions(+), 51 deletions(-)
 create mode 100644 .changeset/happy-panthers-approve.md
 create mode 100644 packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx

diff --git a/.changeset/happy-panthers-approve.md b/.changeset/happy-panthers-approve.md
new file mode 100644
index 00000000000..8f30c7fe15e
--- /dev/null
+++ b/.changeset/happy-panthers-approve.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': major
+---
+
+Make the user name on <UserButton showName /> clickable, i.e. part of the button's trigger.
+This change inverts the positions of `cl-userButtonTrigger` and `cl-userButtonBox`, the latter now being a child of the former.
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
index 6115e3bb7bb..55820f5c7eb 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
@@ -1,9 +1,7 @@
-import { useUser } from '@clerk/shared/react';
 import { useId } from 'react';
 
-import { getFullName, getIdentifier } from '../../../utils/user';
 import { useUserButtonContext, withCoreUserGuard } from '../../contexts';
-import { descriptors, Flex, Flow, Text } from '../../customizables';
+import { Flow } from '../../customizables';
 import { Popover, withCardStateProvider, withFloatingTree } from '../../elements';
 import { usePopover } from '../../hooks';
 import { UserButtonPopover } from './UserButtonPopover';
@@ -21,51 +19,26 @@ const _UserButton = withFloatingTree(() => {
 
   return (
     <Flow.Root flow='userButton'>
-      <Flex
-        elementDescriptor={descriptors.userButtonBox}
+      <UserButtonTrigger
+        ref={reference}
+        onClick={toggle}
+        isOpen={isOpen}
+        aria-controls={userButtonMenuId}
+      />
+      <Popover
+        nodeId={nodeId}
+        context={context}
         isOpen={isOpen}
-        align='center'
-        gap={2}
       >
-        <UserButtonTopLevelIdentifier />
-        <UserButtonTrigger
-          ref={reference}
-          onClick={toggle}
-          isOpen={isOpen}
-          aria-controls={userButtonMenuId}
+        <UserButtonPopover
+          id={userButtonMenuId}
+          close={toggle}
+          ref={floating}
+          style={{ ...styles }}
         />
-        <Popover
-          nodeId={nodeId}
-          context={context}
-          isOpen={isOpen}
-        >
-          <UserButtonPopover
-            id={userButtonMenuId}
-            close={toggle}
-            ref={floating}
-            style={{ ...styles }}
-          />
-        </Popover>
-      </Flex>
+      </Popover>
     </Flow.Root>
   );
 });
 
-const UserButtonTopLevelIdentifier = () => {
-  const { user } = useUser();
-
-  const { showName } = useUserButtonContext();
-  if (!user) {
-    return null;
-  }
-  return showName ? (
-    <Text
-      variant='subtitle'
-      elementDescriptor={descriptors.userButtonOuterIdentifier}
-    >
-      {getFullName(user) || getIdentifier(user)}
-    </Text>
-  ) : null;
-};
-
 export const UserButton = withCoreUserGuard(withCardStateProvider(_UserButton));
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx
new file mode 100644
index 00000000000..b82635d578a
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx
@@ -0,0 +1,24 @@
+import { useUser } from '@clerk/shared/react';
+
+import { getFullName, getIdentifier } from '../../../utils/user';
+import { descriptors, Text } from '../../customizables';
+
+type UserButtonTopLevelIdentifierProps = {
+  showName: boolean | undefined;
+};
+
+export const UserButtonTopLevelIdentifier = ({ showName }: UserButtonTopLevelIdentifierProps) => {
+  const { user } = useUser();
+
+  if (!user || !showName) {
+    return null;
+  }
+  return (
+    <Text
+      variant='subtitle'
+      elementDescriptor={descriptors.userButtonOuterIdentifier}
+    >
+      {getFullName(user) || getIdentifier(user)}
+    </Text>
+  );
+};
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index e16b3807069..58222601679 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -1,9 +1,11 @@
 import { useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
-import { Button, descriptors } from '../../customizables';
+import { useUserButtonContext } from '../../contexts';
+import { Button, descriptors, Flex } from '../../customizables';
 import { UserAvatar, withAvatarShimmer } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
+import { UserButtonTopLevelIdentifier } from './UserButtonTopLevelIdentifier';
 
 type UserButtonTriggerProps = PropsOfComponent<typeof Button> & {
   isOpen: boolean;
@@ -13,24 +15,33 @@ export const UserButtonTrigger = withAvatarShimmer(
   forwardRef<HTMLButtonElement, UserButtonTriggerProps>((props, ref) => {
     const { sx, ...rest } = props;
     const { user } = useUser();
+    const { showName } = useUserButtonContext();
 
     return (
       <Button
         elementDescriptor={descriptors.userButtonTrigger}
         variant='roundWrapper'
-        sx={[theme => ({ borderRadius: theme.radii.$circle }), sx]}
+        sx={[theme => ({ borderRadius: showName ? theme.radii.$xl : theme.radii.$circle }), sx]}
         ref={ref}
         aria-label={`${props.isOpen ? 'Close' : 'Open'} user button`}
         aria-expanded={props.isOpen}
         aria-haspopup='dialog'
         {...rest}
       >
-        <UserAvatar
-          boxElementDescriptor={descriptors.userButtonAvatarBox}
-          imageElementDescriptor={descriptors.userButtonAvatarImage}
-          {...user}
-          size={theme => theme.sizes.$7}
-        />
+        <Flex
+          elementDescriptor={descriptors.userButtonBox}
+          isOpen={props.isOpen}
+          align='center'
+          gap={2}
+        >
+          <UserButtonTopLevelIdentifier showName={showName} />
+          <UserAvatar
+            boxElementDescriptor={descriptors.userButtonAvatarBox}
+            imageElementDescriptor={descriptors.userButtonAvatarImage}
+            {...user}
+            size={theme => theme.sizes.$7}
+          />
+        </Flex>
       </Button>
     );
   }),

From 692b2a0fe6312de0ec6378332f83d876855f52c4 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Tue, 19 Dec 2023 19:58:35 +0200
Subject: [PATCH 2/2] fix(clerk-js): Use smaller radius for UserButton button
 with name

---
 .../clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index 58222601679..3576d975935 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -21,7 +21,7 @@ export const UserButtonTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.userButtonTrigger}
         variant='roundWrapper'
-        sx={[theme => ({ borderRadius: showName ? theme.radii.$xl : theme.radii.$circle }), sx]}
+        sx={[theme => ({ borderRadius: showName ? theme.radii.$md : theme.radii.$circle }), sx]}
         ref={ref}
         aria-label={`${props.isOpen ? 'Close' : 'Open'} user button`}
         aria-expanded={props.isOpen}