Skip to content

fix(clerk-js): Added padding for ArrowBlockButton to prevent layout shift#1728

Merged
octoper merged 4 commits intomainfrom
vaggelis/js-723-weird-layout-shift-in-signin-social-buttons
Sep 28, 2023
Merged

fix(clerk-js): Added padding for ArrowBlockButton to prevent layout shift#1728
octoper merged 4 commits intomainfrom
vaggelis/js-723-weird-layout-shift-in-signin-social-buttons

Conversation

@octoper
Copy link
Copy Markdown
Member

@octoper octoper commented Sep 14, 2023

Description

Added some padding when the ArrowBlockButton is in loading state and has a left icon to prevent layout shift.

fixes JS-723

Before

JS-723-before.mp4

After

JS-723-after.mp4

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:

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

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Sep 14, 2023

🦋 Changeset detected

Latest commit: 3e1f0e1

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

This PR includes changesets to release 3 packages
Name Type
@clerk/clerk-js Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo 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

@octoper octoper marked this pull request as ready for review September 14, 2023 21:08
@octoper octoper requested a review from a team as a code owner September 14, 2023 21:08
Comment thread packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
Comment thread .changeset/large-baboons-hope.md Outdated
@octoper octoper force-pushed the vaggelis/js-723-weird-layout-shift-in-signin-social-buttons branch from 1a31fbd to ba2c138 Compare September 18, 2023 08:38
Copy link
Copy Markdown
Contributor

@panteliselef panteliselef left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seem like the loading spinner gets bigger. Can you confirm with @cedawson if that's ok ? Otherwise let's merge

@panteliselef
Copy link
Copy Markdown
Contributor

Shall we merge this ?

@cedawson
Copy link
Copy Markdown

This looks good, thanks @octoper

@octoper octoper force-pushed the vaggelis/js-723-weird-layout-shift-in-signin-social-buttons branch from ba2c138 to 3e1f0e1 Compare September 28, 2023 16:19
@octoper octoper added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 7c322e0 Sep 28, 2023
@octoper octoper deleted the vaggelis/js-723-weird-layout-shift-in-signin-social-buttons branch September 28, 2023 16:37
@clerk-cookie clerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie
Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerk clerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants