bug(mdc-progress-bar): Does not flip with body set to `dir="rtl"`

[andrewseguin]

The legacy progress bar has specific styles to flip its directionality based on a parent having [dir='rtl']:

  // Reverse the apparent directionality of progress vars for rtl.
  &[dir='rtl'],
  [dir='rtl'] & {
    transform: rotateY(180deg);
  }

  &[mode='query'] {
    transform: rotateZ(180deg);

    &[dir='rtl'],
    [dir='rtl'] & {
      transform: rotateZ(180deg) rotateY(180deg);
    }
  }

However, this is missing from the new MDC-based progress bar. Should this extra code be included? An internal test fails due to this case, but perhaps it should have been implemented otherwise through the Directionality service?

[crisbeto]

Are you seeing the regression in our own dev app or someplace else? The dev app has a custom Directionality implementation which doesn't pick up the direction from the DOM.

[andrewseguin]

yeah its an internal test - they just add dir="rtl" to the body and expect it to work

[crisbeto]

That should work, but I'll double-check. The issue I mentioned above is with our own dev app.

[crisbeto]

I gave it another shot, but it worked as expected. We might have to investigate that internal test.

[andrewseguin]

If you go into the demo app and just add dir="rtl" to the body, the legacy progress bar will flip but the legacy one will not. That should be supported right?

[crisbeto]

The legacy one works, because the flip happens purely in CSS, whereas the MDC one has to execute some JS logic.

[crisbeto]

I looked into it again and it seems like we've moved away from the MDC API that required us to flip direction using JS. I've submitted #22705 which should resolve this issue.