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

fix(clerk-js): UI fixes for phone input and OTP inputs #3302

Merged
merged 5 commits into from
May 8, 2024

Conversation

octoper
Copy link
Member

@octoper octoper commented May 1, 2024

Description

This PR fixes 2 UI issues that were found when using @tailwindcss/forms, the first problem was that phone number had the country code flowing over the phone input and the other one was that the OTP where huge due to box-sizing: content-box

Before

CleanShot 2024-05-01 at 21 17 01@2x

CleanShot 2024-05-01 at 21 16 23@2x

After

CleanShot 2024-05-01 at 21 31 45@2x

CleanShot 2024-05-01 at 21 15 53@2x

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 May 1, 2024

🦋 Changeset detected

Latest commit: dd3ec07

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 force-pushed the vaggelis/sdk-1704-core-2-components-ui-issues branch from 2ebd039 to f047d0b Compare May 2, 2024 11:24
@desiprisg
Copy link
Contributor

Did we check if these issues appear only without simpleStyles: true ? If they appear with or without it, I'd suggest doing a check with both settings and see if both are fixed.

borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
paddingLeft: t.space.$1,
'&:focus': {
Copy link
Contributor

Choose a reason for hiding this comment

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

What about hover and active states?

Copy link
Member Author

@octoper octoper May 8, 2024

Choose a reason for hiding this comment

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

Hover and active states are not styled by default but we can include them as well

@octoper
Copy link
Member Author

octoper commented May 7, 2024

@desiprisg Yeah I have checked both and they had the same issues but those changes fixes them both

@octoper octoper force-pushed the vaggelis/sdk-1704-core-2-components-ui-issues branch from f047d0b to dd3ec07 Compare May 8, 2024 09:27
@nikosdouvlis nikosdouvlis merged commit 12f7849 into main May 8, 2024
10 checks passed
@nikosdouvlis nikosdouvlis deleted the vaggelis/sdk-1704-core-2-components-ui-issues branch May 8, 2024 14:51
@clerk-cookie clerk-cookie mentioned this pull request May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants