docs: add some guidance to configure RTL mode

[mobinseven]

Documentation Request

There is no information about how to configure RTL mode in the docs. However, by searching the issues I have found out some information about RTL support. (e.g. #386 and a demo site)

FluentDesignTheme has a Direction property which when is set to LocalizationDirection.RightToLeft has no impact.

Based on this comment, in the aforementioned issue, I have done this:

1. Added a simple js file containing a simple dir configuration:

export function switchDirection(dir) {
    document.dir = dir;
}

2. Added these initializations to OnAfterRenderAsync of the main layout of the app:

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
                 "./_content/[corresponding assembly]/Layouts/MainLayout.razor.js");

            var dir = LocalizationDirection.rtl;
            GlobalState.SetDirection(dir);

            await Direction.SetValueFor(container, dir.ToAttributeValue());
            await _jsModule!.InvokeVoidAsync("switchDirection", dir.ToString());

            StateHasChanged();
        }
    }

But the result is a rtl layout with the exactly same issue reported in #386. So there should be a better documentation on this feature which I know implementing it have taken lots of time and effort.

v4.7.2
net8.0

[vnbaaij]

That is a very old demo site you are looking at. Hence, why we say on the first line:

The site at this URL is no longer being updated. Visit https://www.fluentui-blazor.net/ for an up-to-date version.

We should indeed update the docs on that but too much to do in too little time...until that time, you can use the source of the demo site here in the repo (in the examples folder) as an example implementation.

[mobinseven]

That is a very old demo site you are looking at.

I knew it was a very old demo site. I had to refer to it because the main documentation has no mention of this mode (I should have said "an old demo site".)

I have no problem with contributing to this part of documentation, but I could not find the correct way to configure it.

I inferred from marking this issue as "completed" that you are not interested in my contribution.

[vnbaaij]

I inferred from marking this issue as "completed" that you are not interested in my contribution.

We absolutely are always interested in contributions!

But it was not clear to me that you want to do that from the first post. I closed it because it is on our ToDo list and no further action was needed on this for now. I'll reopen and label it as 'community contribution'. Looking forward to it!

You can use the implementation in the examples folder in this repo. This folder contains code for the current demo site. Please let us know if you have questions still.

[vnbaaij]

@mobinseven are you still planning to contribute this?

If not, that is totally ok too, but then I'll close the issue to keep expectations straight.

[mobinseven]

Of course. I have managed to reach a minimal configuration to correctly setup RTL mode at startup.

@* MainLayout.razor *@

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inject Direction DirectionToken
@inherits LayoutComponentBase
...
@Body
...
<FluentDesignTheme Direction="@Direction" />
@code {
    LocalizationDirection Direction { get; set; }
    protected override async Task OnAfterRenderAsync(bool f)
    {
        await base.OnAfterRenderAsync(f);
        if(!f)
            return;
        await DirectionToken.WithDefault("rtl");
        Direction = LocalizationDirection.RightToLeft;
        StateHasChanged();
    }
}

Compontents like FluentTreeView have issues when just direction is switched (check FluentTreeView on demo site when "Right to Left" setting is on.)

Is it ok to add this snippet to docs?

[vnbaaij]

Yes, please. Let's add a RTL section in the https://www.fluentui-blazor.net/CodeSetup page