[Feature]: add RTL support to motion APIs

[layershifter]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Animations created by motion APIs (createPresenceComponent(), createMotionComponent()) could be directional i.e. "slide to left" or "slide to right". They would be defined for example, by the following keyframes:

const keyframes = [
  { transform: navDirection === 'left' ? 'translateX(-100%)' : 'translateX(100%)' },
  { transform: 'translateX(0%)' },
]

However, there is no currently a way to make such keyframes to flip in RTL.

Have you discussed this feature with our team

@ling1726

Additional context

N/A

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

High

[miroslavstastny]

• might be required for carousel, we need to check

[layershifter]

• might be required for carousel, we need to check

clarified: not needed

[layershifter]

Note from an offline chat:

We use rtl-css-js (https://www.npmjs.com/package/rtl-css-js) in Griffel for automatic flipping. It's kinda nice, but it's not able to handle complex things like box shadows or transforms with calcs 💥

Going forward, I think that need to align with the platform that introduces logical properties. However, they are not a solution for the problem above as there are not logical properties for transform 🙊

I suggest to go through RFC process with it. At least, we will have this written and can refer back to it.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[layershifter]

keep open

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".