Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

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:

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 Nov 25, 2024 5:29pm

Copy link

changeset-bot bot commented Nov 22, 2024

🦋 Changeset detected

Latest commit: 7fa0dab

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

This PR includes changesets to release 22 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/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

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.

3 participants