Bug: Updating dir on page doesn't consistently update components.

[asangma]

Actual Behavior

In the demo pages, when turning the RTL toggle on, components don't consistently re-render. Accordion is a good example.

Expected Behavior

Updating dir should result in a consistent behavior across components.

Reproduction Steps or Sample

1. view Accordion demo page
2. toggle RTL

Relevant Info

Version: @esri/calcite-components@<version>

• CDN
• NPM package

[driskull]

I think this is just #2079

[julio8a]

Closing this one. Let's use #2079

[caripizza]

IMO we should remove the RTL switch from the demo page header. It sends the wrong impression- that components will dynamically update their UI and display mirrored after a dir change on the root html tag. Or are we actually saying that "our components programmatically respond to dir changes"?

It really seems like the only true way to test rtl is to add the dir="rtl" attribute to the html tag, and let the saved page reload in development, this will show you the true built-in browser behavior our components are currently relying on for their rtl displays.

[driskull]

It sends the wrong impression- that components will dynamically update their UI and display mirrored after a dir change on the root html tag.

@caripizza This is the end goal. If we get complaints, we should prioritize removing getElementDir() and using CSS logical properties instead.

[caripizza]

I understand it will help yes, but what is the use case for dynamically responding to dir updates? Is there an app somewhere that's actually asking for this behavior and if so can you specify?

[driskull]

I'm not sure if anyone is asking for it but it's the best practice for having a component automatically work correctly when the text direction changes. Otherwise we have to rely on a re-render of the component.

Our story should be that we should handle CSS direction changes automatically by using CSS logical properties.