rtl direction in TreeviewItem

[ehsangfl]

if set the direction to rtl, TreeviewItem expand collapse button becoms hidden (for left property value on css) and also selection boder remain on the left side of item ltr and rtl

[vnbaaij]

I can see this is working correctly at https://fluent-components.azurewebsites.net/?path=/docs/components-tree-view--tree-view (the web components demo site), so it must be something in the Blazor implementation. Will take a look!

[ehsangfl]

some other components has the same problem Accordion ListBox Menu : (only Icon must rotate 180) Options (selected state) Select (selected state)

I look at style and there is a bug with styles. for example 'expand-collapse-button' styled

:host(.nested) .expand-collapse-button {
    left: var(--expand-collapse-button-nested-width,calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * -1px));

that is wrong and in https://fluent-components.azurewebsites.net/?path=/docs/components-tree-view--tree-view is

:host(.nested) .expand-collapse-button {
 right: var(--expand-collapse-button-nested-width, calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * -1px));
}

another difference is

:root{
    --direction: ltr;
}

that must be

:root{
    --direction: rtl;
}

I dont think this related to blazor

[vnbaaij]

This is fixed in the 1.6.0-rc.2 release (and also for the upcoming 2.0 release). It is being built at the moment and will be pushed to NuGet after that.

It was caused by not setting the --direction CSS variable to the right value and that could not be set because the generated Design Token has the wrong type.

You can see the fix for 1.6 in this demo site: https://brave-cliff-0c0c93310.azurestaticapps.net/ You can see the fix for 2.0 in this demo site: https://brave-cliff-0c0c93310-233.centralus.azurestaticapps.net/