feat(clerk-js,types): Add navbar button text descriptor and localization key (#4635)

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>

Author: alexcarpenter

.changeset/young-deers-deliver.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduce the `navbarButtonText` element descriptor.

packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx

@@ -15,10 +15,10 @@ describe('UserProfile', () => {
       });
 
       render(<UserProfile />, { wrapper });
-      const profileElements = screen.getAllByText(/Profile/i);
-      expect(profileElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
-      const securityElements = screen.getAllByText(/Security/i);
-      expect(securityElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+      const profileElements = screen.getAllByRole('button', { name: /Profile/i });
+      expect(profileElements.length).toBeGreaterThan(0);
+      const securityElements = screen.getAllByRole('button', { name: /Security/i });
+      expect(securityElements.length).toBeGreaterThan(0);
     });
 
     it('includes custom nav items', async () => {
@@ -45,14 +45,14 @@ describe('UserProfile', () => {
 
       props.setProps({ customPages });
       render(<UserProfile />, { wrapper });
-      const profileElements = screen.getAllByText(/Profile/i);
-      expect(profileElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
-      const securityElements = screen.getAllByText(/Security/i);
-      expect(securityElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
-      const customElements = screen.getAllByText(/Custom1/i);
-      expect(customElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
-      const externalElements = screen.getAllByText(/ExternalLink/i);
-      expect(externalElements.some(el => el.tagName.toUpperCase() === 'BUTTON')).toBe(true);
+      const profileElements = screen.getAllByRole('button', { name: /Profile/i });
+      expect(profileElements.length).toBeGreaterThan(0);
+      const securityElements = screen.getAllByRole('button', { name: /Security/i });
+      expect(securityElements.length).toBeGreaterThan(0);
+      const customElements = screen.getAllByRole('button', { name: /Custom1/i });
+      expect(customElements.length).toBeGreaterThan(0);
+      const externalElements = screen.getAllByRole('button', { name: /ExternalLink/i });
+      expect(externalElements.length).toBeGreaterThan(0);
     });
   });
 });

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -250,6 +250,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'navbarButtons',
   'navbarButton',
   'navbarButtonIcon',
+  'navbarButtonText',
   'navbarMobileMenuRow',
   'navbarMobileMenuButton',
   'navbarMobileMenuButtonIcon',

packages/clerk-js/src/ui/customizables/index.ts

@@ -60,3 +60,5 @@ export const Tbody = makeCustomizable(sanitizeDomProps(Primitives.Tbody));
 export const Tr = makeCustomizable(sanitizeDomProps(Primitives.Tr));
 export const Th = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Th)));
 export const Td = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Td)));
+
+export const Span = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Span)));

packages/clerk-js/src/ui/elements/Navbar.tsx

@@ -2,7 +2,7 @@ import { createContextAndHook } from '@clerk/shared/react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { Button, Col, descriptors, Flex, Heading, Icon, Text, useLocalizations } from '../customizables';
+import { Button, Col, descriptors, Flex, Heading, Icon, Span, Text, useLocalizations } from '../customizables';
 import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
 import { useNavigateToFlowStart, usePopover } from '../hooks';
 import { Menu } from '../icons';
@@ -47,7 +47,6 @@ export const NavBar = (props: NavBarProps) => {
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
-  const { t } = useLocalizations();
   const router = useRouter();
 
   const handleNavigate = (route: NavbarRoute) => {
@@ -105,7 +104,11 @@ export const NavBar = (props: NavBarProps) => {
             minHeight: t.space.$8,
           })}
         >
-          {t(r.name)}
+          <Span
+            elementDescriptor={descriptors.navbarButtonText}
+            elementId={descriptors.navbarButtonText.setId(r.id as any)}
+            localizationKey={r.name}
+          />
         </NavButton>
       ))}
     </Col>

packages/clerk-js/src/ui/primitives/Span.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Span = React.forwardRef<
+  HTMLSpanElement,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+>((props, ref) => {
+  return (
+    <span
+      {...props}
+      ref={ref}
+    />
+  );
+});

packages/clerk-js/src/ui/primitives/index.ts

@@ -26,3 +26,4 @@ export * from './Tr';
 export * from './Th';
 export * from './Td';
 export * from './NotificationBadge';
+export * from './Span';

packages/types/src/appearance.ts

@@ -375,6 +375,7 @@ export type ElementsConfig = {
   navbarButtons: WithOptions<never, ActiveState>;
   navbarButton: WithOptions<string, ActiveState>;
   navbarButtonIcon: WithOptions<string, ActiveState>;
+  navbarButtonText: WithOptions<string, ActiveState>;
   navbarMobileMenuRow: WithOptions;
   navbarMobileMenuButton: WithOptions;
   navbarMobileMenuButtonIcon: WithOptions;