[CLNP-3674] feat: RTL(Right To Left) display support #1132
Conversation
✅ Deploy Preview for sendbird-uikit-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -136,6 +137,12 @@ const meta: Meta<typeof App> = { | |||
| 'A property that determines whether to automatically select another channel when the currently selected channel is deleted, or the user exits the channel, causing it to be deselected in the channel list.', | |||
| control: 'boolean', | |||
| }, | |||
| htmlTextDirection: { | |||
There was a problem hiding this comment.
Added this one too for the easier test :)
AhyoungRyu
requested review from
bang9,
HoonBaek and
liamcho
and removed request for
bang9 and
HoonBaek
AhyoungRyu
changed the title
|
Could you generate a preview URL for testing? |
There was a problem hiding this comment.
Shouldn't we lower it to the module level instead of the app level?
And when customers customize and reuse components, we might need to lower the level even further for it to apply.
checked docs: https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2401009678/RTL+Support
AhyoungRyu
force-pushed
the
feat/CLNP-3674
branch
2 times, most recently
from
688dc8f to
aa8308a
Compare
|
@bang9 Sure. Here the link -> https://deploy-preview-1132--sendbird-uikit-react.netlify.app/?htmlTextDirection=rtl |
|
One consideration we need to address is whether it is acceptable for this to be merged into the |
|
@bang9 Oh I thought there's no one who uses this until we make this public 😄 Then I won't merge this one and keep working based on this branch. |
|
I think it's ready so I'm gonna deliver the preview link to the design & QA team. But I'll merge this after finishing the QA process. |
AhyoungRyu
changed the title
AhyoungRyu
changed the title
AhyoungRyu
changed the title
Applied [postcss-rtlcss plugin](https://github.com/elchininet/postcss-rtlcss) for the better RTL support without tedious manual CSS style modifications. - [x] Added plugin configuration to storybook/main.ts - Allows testing of RTL support during development. - [x] Added plugin configuration to rollup.config.js - Ensures build artifacts support RTL languages. - [x] Created useHTMLTextDirection custom hook - Applies the dir attribute to modal and dropdown portal components for correct RTL rendering. postcss-rtlcss automates the conversion of LTR CSS to RTL, ensuring consistency and reducing manual errors. It automates CSS transformation by converting LTR styles to RTL, ensuring proper alignment and display in RTL mode. You can play around in here https://elchininet.github.io/postcss-rtlcss/ to see what kind of modifications could be made by this plugin.
AhyoungRyu
force-pushed
the
feat/CLNP-3674
branch
from
49bd7c6 to
eb56719
Compare
Fixed several UI issues mentioned in https://sendbird.slack.com/archives/C0794CS06EM/p1718940053725789
I found one more after #1147 merged 😅 **as-is** <img width="300" alt="Screenshot 2024-06-25 at 9 45 12 AM" src="https://github.com/sendbird/sendbird-uikit-react/assets/10060731/1e3f4311-e525-4cc0-a1de-97c6df26bf9c"> **to-be** <img width="300" alt="Screenshot 2024-06-25 at 9 45 06 AM" src="https://github.com/sendbird/sendbird-uikit-react/assets/10060731/ceee400a-3465-4b44-9b2b-bf19abfd77f0">
|
I got an approval from QA team so it seems okay to merge this into main branch 🎉 FYI, I got separate approvals for sub-PRs I made after I got 🆗 from Airen & Chris :) |
Addresses https://sendbird.atlassian.net/browse/CLNP-3543
I added
htmlTextDirectionprop(The original element attribute name isdirbut I chose to be more elaborate in our app) to SendbirdProvider to support Right To Left(RTL) text direction display for the middle east customers.https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir