From cd72a27a75863dfd94b0a00ed5b2d03231556bc0 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 9 Dec 2024 13:49:29 -0500 Subject: [PATCH] feat(clerk-js,types): Add navbar button text descriptor and localization key (#4635) Co-authored-by: Stefanos Anagnostou --- .changeset/young-deers-deliver.md | 6 +++++ .../__tests__/UserProfile.test.tsx | 24 +++++++++---------- .../ui/customizables/elementDescriptors.ts | 1 + .../clerk-js/src/ui/customizables/index.ts | 2 ++ packages/clerk-js/src/ui/elements/Navbar.tsx | 9 ++++--- packages/clerk-js/src/ui/primitives/Span.tsx | 13 ++++++++++ packages/clerk-js/src/ui/primitives/index.ts | 1 + packages/types/src/appearance.ts | 1 + 8 files changed, 42 insertions(+), 15 deletions(-) create mode 100644 .changeset/young-deers-deliver.md create mode 100644 packages/clerk-js/src/ui/primitives/Span.tsx diff --git a/.changeset/young-deers-deliver.md b/.changeset/young-deers-deliver.md new file mode 100644 index 0000000000..7e9f802973 --- /dev/null +++ b/.changeset/young-deers-deliver.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Introduce the `navbarButtonText` element descriptor. diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx index 58eaf12c02..f797e4840c 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx @@ -15,10 +15,10 @@ describe('UserProfile', () => { }); render(, { 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(, { 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); }); }); }); diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index 858d4a0f24..0ed6053b6d 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -250,6 +250,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'navbarButtons', 'navbarButton', 'navbarButtonIcon', + 'navbarButtonText', 'navbarMobileMenuRow', 'navbarMobileMenuButton', 'navbarMobileMenuButtonIcon', diff --git a/packages/clerk-js/src/ui/customizables/index.ts b/packages/clerk-js/src/ui/customizables/index.ts index ccf80f1fa3..9398fc998d 100644 --- a/packages/clerk-js/src/ui/customizables/index.ts +++ b/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))); diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index 94383e5f34..2d725f03ff 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/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)} + ))} diff --git a/packages/clerk-js/src/ui/primitives/Span.tsx b/packages/clerk-js/src/ui/primitives/Span.tsx new file mode 100644 index 0000000000..cab52b58f3 --- /dev/null +++ b/packages/clerk-js/src/ui/primitives/Span.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export const Span = React.forwardRef< + HTMLSpanElement, + React.DetailedHTMLProps, HTMLSpanElement> +>((props, ref) => { + return ( + + ); +}); diff --git a/packages/clerk-js/src/ui/primitives/index.ts b/packages/clerk-js/src/ui/primitives/index.ts index 445a2872f7..36b6cc95c0 100644 --- a/packages/clerk-js/src/ui/primitives/index.ts +++ b/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'; diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index 925d6cfa78..cb211dbe5b 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -375,6 +375,7 @@ export type ElementsConfig = { navbarButtons: WithOptions; navbarButton: WithOptions; navbarButtonIcon: WithOptions; + navbarButtonText: WithOptions; navbarMobileMenuRow: WithOptions; navbarMobileMenuButton: WithOptions; navbarMobileMenuButtonIcon: WithOptions;