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(astro): Add support for custom menu items #3969

Merged
merged 24 commits into from
Aug 19, 2024

Conversation

wobsoriano
Copy link
Member

@wobsoriano wobsoriano commented Aug 15, 2024

Description

This PR adds support for custom menu items in the <UserButton /> Astro component. It implements the same behavior with the React counterpart, with two exceptions:

  1. The onClick prop for custom actions is not implemented, since Astro components are executed on the server and is serialized. Instead, we're using a CustomEvent with a clickIdentifier prop to identify which menu item has been clicked. Maybe we can remove clickIdentifier and just use the label as identifier?
  2. The labelIcon prop is now a slot.

React components to follow.

Closes ECO-130

Usage:

<UserButton>
    <UserButton.MenuItems>
        <UserButton.Link label="Profile" href="/profile">
            <SomeIcon slot="label-icon" />
        </UserButton.Link>
        <UserButton.Action label="Terms" open="terms">
            <TermsIcon slot="label-icon" />
        </UserButton.Action>
        <UserButton.Action label="Open chat" clickIdentifier="open_chat">
            <ChatIcon slot="label-icon" />
        </UserButton.Action>
    </UserButton.MenuItems>
    <UserButton.UserProfilePage label="Terms" url="terms">
        <TermsIcon slot="label-icon" />
        <div>
            <h1>Custom Terms Page</h1>
            <p>This is the custom terms page</p>
        </div>
    </UserButton.UserProfilePage>
</UserButton>

<script>
document.addEventListener(
  'clerk:menu-item-click',
  (e) => {
    if (e.detail === 'open_chat') { /* do something */ }
  },
  false,
);
</script>

Closes ECO-130

Checklist

  • npm test runs as expected.
  • npm run 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

changeset-bot bot commented Aug 15, 2024

🦋 Changeset detected

Latest commit: 7542e82

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

This PR includes changesets to release 1 package
Name Type
@clerk/astro Minor

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

@wobsoriano wobsoriano changed the title feat(astro): Add custom menu items feat(astro): Add support for custom menu items Aug 16, 2024
@wobsoriano wobsoriano marked this pull request as ready for review August 16, 2024 05:09
@wobsoriano wobsoriano merged commit 77a02d3 into main Aug 19, 2024
21 checks passed
@wobsoriano wobsoriano deleted the rob/eco-130-custom-menu-items-in-astro branch August 19, 2024 14:47
BRKalow pushed a commit that referenced this pull request Aug 22, 2024
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