archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(ripple): resolve misalignment in RTL layouts by using transform (#5891)

Browse Source 
* fix(ripple): resolve misalignment in RTL layouts by using transform translate

* chore(ripple): add changeset for ripple RTL layout fix

* chore: add issue number

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Hayato Hasegawa 2025-11-15 23:36:40 +09:00 committed by GitHub
parent 0bf225abf5
commit 91e010fe3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/odd-jobs-vanish.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/ripple": patch
---
fix resolve misalignment in RTL layouts by using transform translate (#5858)

12
packages/components/ripple/src/ripple.tsx
View File

@ -28,10 +28,16 @@ const Ripple: FC<RippleProps> = (props) => {
<LazyMotion key={ripple.key} features={domAnimation}>
<AnimatePresence mode="popLayout">
<m.span
animate={{transform: "scale(2)", opacity: 0}}
animate={{
transform: `translate(${ripple.x}px, ${ripple.y}px) scale(2)`,
opacity: 0,
}}
className="heroui-ripple"
exit={{opacity: 0}}
initial={{transform: "scale(0)", opacity: 0.35}}
initial={{
transform: `translate(${ripple.x}px, ${ripple.y}px) scale(0)`,
opacity: 0.35,
}}
style={{
position: "absolute",
backgroundColor: color,
@ -41,8 +47,6 @@ const Ripple: FC<RippleProps> = (props) => {
overflow: "hidden",
inset: 0,
zIndex: 0,
top: ripple.y,
left: ripple.x,
width: `${ripple.size}px`,
height: `${ripple.size}px`,
...style,