Skip to content

Conversation

@alexcarpenter
Copy link
Member

@alexcarpenter alexcarpenter commented Nov 22, 2024

Description

Currently userprofile navbar buttons don't have visible localization keys since the have a icon within the button, since when a localizationKey is provided, the icon gets removed due to makeLocalizeable converting the children to a string. I had trouble tracking down the localization key for the navbar buttons since it was not visible in the dom as expected.

I am proposing introducing a generic that can be used to hold the localization key. Text as span currently carries styles that may not be intended in use.

Example:

BEFORE AFTER
Screenshot 2024-11-22 at 1 00 03 PM Screenshot 2024-11-22 at 1 11 14 PM

Resolves SDKI-769

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel
Copy link

vercel bot commented Nov 22, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 9, 2024 6:11pm

@changeset-bot
Copy link

changeset-bot bot commented Nov 22, 2024

🦋 Changeset detected

Latest commit: a484b40

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 23 packages
Name Type
@clerk/clerk-js Patch
@clerk/types Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/elements Patch
@clerk/expo-passkeys Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/localizations Patch
@clerk/nextjs Patch
@clerk/nuxt Patch
@clerk/react-router Patch
@clerk/clerk-react Patch
@clerk/remix Patch
@clerk/clerk-sdk-node Patch
@clerk/shared Patch
@clerk/tanstack-start Patch
@clerk/testing Patch
@clerk/themes Patch
@clerk/ui Patch
@clerk/vue Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@alexcarpenter alexcarpenter marked this pull request as ready for review November 22, 2024 18:03
@alexcarpenter alexcarpenter changed the title feat(clerk-js): Add support for primitive span usage feat(clerk-js,types): Add support for primitive span usage Nov 22, 2024
@alexcarpenter alexcarpenter changed the title feat(clerk-js,types): Add support for primitive span usage feat(clerk-js,types): Add navbar button text descriptor and localization key Nov 22, 2024
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);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment on lines +107 to +111
<Span
elementDescriptor={descriptors.navbarButtonText}
elementId={descriptors.navbarButtonText.setId(r.id as any)}
localizationKey={r.name}
/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ Could this be replaced with <Text as="span"/> ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No because of the default styles the <Text /> component applies.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>
@alexcarpenter alexcarpenter merged commit cd72a27 into main Dec 9, 2024
27 checks passed
@alexcarpenter alexcarpenter deleted the alexcarpenter/sdki-769-add-generic-span-primitive-to-hold-localization-keys branch December 9, 2024 18:49
wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
…ion key (#4635)

Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants