-
Notifications
You must be signed in to change notification settings - Fork 205
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
fix(clerk-js): Fix layout shift for Social block buttons #1838
fix(clerk-js): Fix layout shift for Social block buttons #1838
Conversation
🦋 Changeset detectedLatest commit: 9efbefb The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
731b4de
to
b1fe1f5
Compare
b1fe1f5
to
1f884f3
Compare
@octoper I remember that we decided to change the social logos' dimensions to 20px by 20px, this PR seems to bring it back to 16x16, are we ok with this ? |
@panteliselef yeah you are correct, had some problems at first to keep it at 20px but I did manage to resolve them today. |
@panteliselef Just changed the sizes and also updated the videos. |
d34278c
to
2394bf8
Compare
@@ -37,8 +37,9 @@ const { applyVariants, filterProps } = createVariants(theme => { | |||
md: { [thickness]: theme.sizes.$1 }, | |||
}, | |||
size: { | |||
sm: { [size]: theme.sizes.$3 }, | |||
md: { [size]: theme.sizes.$4 }, | |||
xs: { [size]: theme.sizes.$3 }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❓ Are we using this somewhere ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, this is used here packages/clerk-js/src/ui/elements/Actions.tsx
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the fix @octoper 🔧
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💯
Description
This PR fixes layout shift that is happening when Social block button is in loading state.
Before:
CleanShot.2023-10-09.at.17.06.33.mp4
After:
Layout.Shift.after.20px.mp4
Fixes JS-792
Checklist
npm test
runs as expected.npm run build
runs as expected.Type of change
Packages affected
@clerk/clerk-js
@clerk/clerk-react
@clerk/nextjs
@clerk/remix
@clerk/types
@clerk/themes
@clerk/localizations
@clerk/clerk-expo
@clerk/backend
@clerk/clerk-sdk-node
@clerk/shared
@clerk/fastify
@clerk/chrome-extension
gatsby-plugin-clerk
build/tooling/chore