fix(clerk-js): Make user name on <UserButton showName /> clickable

.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.

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));

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>
+  );
+};

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.$md : 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>
     );
   }),