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 |
octoper
changed the title
octoper
changed the title
octoper
force-pushed
the
vaggelis/js-792-layout-shift-still-happening-for-social-button
branch
from
731b4de
to
b1fe1f5
Compare
octoper
force-pushed
the
vaggelis/js-792-layout-shift-still-happening-for-social-button
branch
from
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. |
octoper
force-pushed
the
vaggelis/js-792-layout-shift-still-happening-for-social-button
branch
from
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.
❓ Are we using this somewhere ?
There was a problem hiding this comment.
Yeah, this is used here packages/clerk-js/src/ui/elements/Actions.tsx
nikosdouvlis
deleted the
vaggelis/js-792-layout-shift-still-happening-for-social-button
branch
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 testruns as expected.npm run buildruns 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-extensiongatsby-plugin-clerkbuild/tooling/chore