fix(tabs): add opt-in for current animation, performance#7503
fix(tabs): add opt-in for current animation, performance#7503mcoker merged 8 commits intopatternfly:mainfrom
Conversation
|
Preview: https://patternfly-pr-7503.surge.sh A11y report: https://patternfly-pr-7503-a11y.surge.sh |
There was a problem hiding this comment.
Looks good pulling these latest changes into React -- animated tabs animate and the HTML/class implementation used from Org in the local build looks how it should without animations
There was a problem hiding this comment.
Seems fine but FWIW, the animated tabs do get messed up in RTL, so if that's not easy to fix, maybe we should remove the inline JS - if so, I'd add a comment on the example clearly saying that you won't see the effect here and link to the React example showing it.
|
@srambach good catch with RTL. Since this uses translate now, I needed to change the translate to a negative number in RTL. You can test by clicking on something, then switching to RTL and looking at the computed value. Also updated the JS to get the "right" value by calcing the I'd still like to remove this JS once this PR is ready, or as a follow-up. |
|
The util is basically just taking the
8000
offsetLeft and adding it to the offsetWidth of the |
There was a problem hiding this comment.
L🐈TM (with js removed)
I wouldn't hate mentioning which classes and variables apply only to the animated version in the component docs.
|
🎉 This PR is included in version 6.3.0-prerelease.19 🎉 The release is available on: Your semantic-release bot 📦🚀 |
fixes #7437
Moves animation behind
.pf-m-animate-current. Convertswidth/inset-inline-starttransition toscale/translatefor supercharged turbo performance TO THE MAX!!!