feat(ui): Implement connection layout rendering - Githubissues

clerk / javascript

Official Javascript repository for Clerk authentication

https://clerk.com

MIT License

981 stars 221 forks source link

feat(ui): Implement connection layout rendering #3540

Closed alexcarpenter closed 1 month ago

alexcarpenter commented 1 month ago

Description

Given the amount of enabled connections distribute the connection buttons evenly with a max of 6 per row.

Follows distributeStrategiesIntoRows but uses flexbox as to not need to render in each row.

Screenshot 2024-06-07 at 5 21 08 PM

https://linear.app/clerk/issue/SDKI-24/implement-connection-layout-rendering

TODO

[ ] Conditionally show/hide label text based on enabled connections length.
[ ] Move column count variable into CSS class
[ ] Ensure height is preserved when icon only is shown

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
[x] 📖 Refactoring / dependency upgrade / documentation
[ ] other:

changeset-bot[bot] commented 1 month ago

🦋 Changeset detected

Latest commit: e97d54ab224369df4120927172f0049af205428e

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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