Clerk Components RTL Problems
Opened this issue · 1 comments
Preliminary Checks
-
I have reviewed the documentation: https://clerk.com/docs
-
I have searched for existing issues: https://github.com/clerk/javascript/issues
-
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
-
This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
Reproduction
https://github.com/clerk/javascript
Publishable key
pk_test_ZGVjZW50LW1vbGUtNy5jbGVyay5hY2NvdW50cy5kZXYk
Description
Sing In / Sign Up component:
The Arrow icon on submit button may be with direction to the left with right margin:
Position of the eye icon may be on the left of the input:
User Button component:
User avatar and user name may be reversed:
User Profile Popup component:
Close button may be on the left corner of the popup:
Problem with content corners (may be without border-radius):
Phone number may be with ltr direction:
Every button hover arrows may be with direction to the left with right margin:
Environment
System:
OS: macOS 14.6.1
CPU: (11) arm64 Apple M3 Pro
Memory: 1.65 GB / 18.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - /usr/local/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 10.8.1 - /usr/local/bin/npm
bun: 1.1.23 - ~/.bun/bin/bun
Browsers:
Chrome: 127.0.6533.101
Edge: 127.0.2651.98
Safari: 17.6
npmPackages:
@aws-sdk/client-s3: 3.629.0 => 3.629.0
@aws-sdk/lib-storage: 3.629.0 => 3.629.0
@bloxtax/react-icons: 5.2.1 => 5.2.1
@clerk/clerk-react: 5.4.1 => 5.4.1
@clerk/localizations: 2.5.8 => 2.5.8
@dnd-kit/core: 6.1.0 => 6.1.0
@dnd-kit/modifiers: 7.0.0 => 7.0.0
@dnd-kit/sortable: 8.0.0 => 8.0.0
@graphql-codegen/cli: 5.0.2 => 5.0.2
@graphql-codegen/typescript: 4.0.9 => 4.0.9
@graphql-codegen/typescript-graphql-request: 6.2.0 => 6.2.0
@graphql-codegen/typescript-operations: 4.2.3 => 4.2.3
@hookform/error-message: 2.0.1 => 2.0.1
@tanstack/react-query: 5.51.23 => 5.51.23
@tinymce/tinymce-react: 5.1.1 => 5.1.1
@types/crypto-js: 4.2.2 => 4.2.2
@types/lodash.get: 4.4.9 => 4.4.9
@types/logrocket-react: 3.0.3 => 3.0.3
@types/node: 22.3.0 => 22.3.0
@types/react: 18.3.3 => 18.3.3
@types/react-dom: 18.3.0 => 18.3.0
@types/react-google-recaptcha: 2.1.9 => 2.1.9
@types/react-helmet: 6.1.11 => 6.1.11
@types/uuid: 10.0.0 => 10.0.0
@vitejs/plugin-react-swc: 3.7.0 => 3.7.0
ag-grid-community: 32.1.0 => 32.1.0
ag-grid-enterprise: 32.1.0 => 32.1.0
ag-grid-react: 32.1.0 => 32.1.0
ahooks: 3.8.1 => 3.8.1
antd: 5.20.1 => 5.20.1
antd-img-crop: 4.22.0 => 4.22.0
axios: 1.7.4 => 1.7.4
capture-console-logs: 2.0.1-rc.1 => 2.0.1-rc.1
classnames: 2.5.1 => 2.5.1
crypto-js: 4.2.0 => 4.2.0
dayjs: 1.11.12 => 1.11.12
ethers: 6.13.2 => 6.13.2
filesize: 10.1.4 => 10.1.4
framer-motion: 11.3.24 => 11.3.24
graphql: 16.9.0 => 16.9.0
graphql-request: 7.1.0 => 7.1.0
graphql-tag: 2.12.6 => 2.12.6
libphonenumber-js: 1.11.5 => 1.11.5
lodash.get: 4.4.2 => 4.4.2
logrocket: 8.1.2 => 8.1.2
logrocket-react: 6.0.3 => 6.0.3
mime: 4.0.4 => 4.0.4
rc-virtual-list: 3.14.5 => 3.14.5
react: 18.3.1 => 18.3.1
react-device-detect: 2.2.3 => 2.2.3
react-dom: 18.3.1 => 18.3.1
react-draggable: 4.4.6 => 4.4.6
react-google-recaptcha: 3.1.0 => 3.1.0
react-helmet: 6.1.0 => 6.1.0
react-hook-form: 7.52.2 => 7.52.2
react-icons: 5.3.0 => 5.3.0
react-json-view-lite: 1.4.0 => 1.4.0
react-router-dom: 6.26.0 => 6.26.0
react-usestateref: 1.0.9 => 1.0.9
recharts: 2.12.7 => 2.12.7
typesafe-i18n: 5.26.2 => 5.26.2
typescript: 5.5.4 => 5.5.4
unocss: 0.62.1 => 0.62.1
use-query-params: 2.2.1 => 2.2.1
uuid: 10.0.0 => 10.0.0
vite: 5.4.0 => 5.4.0
zustand: 4.5.4 => 4.5.4@shadoworion appreciate the detailed run down of all the different instances that can be improved here. We are currently working on a rebuild of our AIO components and making sure RTL support is fully accounted for.