Fluentui: Documentation: Localization RTL page unclear

[HarryGifford]

Environment Information

• Package version(s): 7.64.2
• Browser and OS versions: Any

Please provide a reproduction of the bug in a codepen:

Go to the docs page for Localization. It says to use an rtl stylesheet to enable RTL mode. It seems like this isn't supported now. Please could you update the docs to specify how this should be done now? Adding dir="rtl" to the html element doesn't reverse the icons on it's own. Do we need to flip the icons manually using getRTL?

Actual behavior: --

Expected behavior: --

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Low

Products/sites affected: (if applicable)

[khmakoto]

Hi @HarryGifford, thanks for filing this issue! I cannot reproduce this behavior in the page you suggested. If I add dir="rtl" to the html element everything is reversed correctly.

__dir="ltr"__

__dir="rtl"__

As you can see the icons are actually flipped, with the first icon being an arrow that points to the bottom right on ltr and an arrow that points to the bottom left on rtl. Can you elaborate, and maybe illustrate, how is this not working for you? Thanks!

[HarryGifford]

Sorry, I meant the documentation itself, not the website. There's no RTL CSS file any more. Can you update the documentation with the current way to handle RTL? In particular, adding dir="rtl" doesn't flip the icons themselves.

Here's a codepen showing the icons don't flip, but the issue I think is that the documentation is out of date because the RTL CSS no longer exists.

[micahgodbolt]

@HarryGifford seems you forgot to add the codepen.

[HarryGifford]

@micahgodbolt @khmakoto Oops, codepen: https://codepen.io/hegi/pen/RwwzwmK

[Jahnp]

Hi @HarryGifford , apologies for the confusion. This documentation applies specifically to Fabric Core, which I realize isn't clearly called out here. In order for this behavior to work, you need to include Fabric Core on your page. Here's a codepen showing how this works: https://codepen.io/jahnp/pen/MWWMqLW

It's also true that there isn't a dedicated RTL stylesheet, which Fabric Core used to have in the olden days. Instead it uses mixins to add RTL-specific rules for things like icon and grid-flipping.

Your scenario may not benefit from Fabric Core, though, so this may also be something of a feature gap for Fabric React. In the meantime, we'll look at updating the docs to clarify that this applies to Fabric Core.

[HarryGifford]

@Jahnp Thank you for the explanation. That's helpful to know. We're not using Fabric Core. Could we have a global function to automatically flip the icons so we don't have to have a bunch of places in our code with getRTL() ? "BlahBlahIconRight" : "BlahBlahIconLeft"?

[khmakoto]

@HarryGifford I'll change the documentation to reflect the current behavior and link that to this issue. I'll also create a separate issue to track the feature request for a global function.

[msft-github-bot]

:tada:This issue was addressed in #11351, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release