[list] item with trailing meta has incorrect padding in RTL mode

[devversion]

Currently if someone uses a mdc-list-item with dir="rtl" and a --trailing-meta section, the horizontal padding breaks.

<ul class="mdc-list">
    <li class="mdc-list-item mdc-list-item--with-one-line mdc-list-item--with-trailing-meta" tabindex="0">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__content">Single-line item</span>
      <span class="mdc-list-item__end">(Icon)</span>
    </li>
    <li class="mdc-list-item mdc-list-item--with-one-line">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__content">Single-line item</span>
    </li>
    <li class="mdc-list-item mdc-list-item--with-one-line">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__content">Single-line item</span>
    </li>
  </ul>

Reproduction: https://codepen.io/DevVersion/pen/rNjqdpo?editors=1100

[devversion]

@brandondiamond I looked more into it. As you noted, the fix I initially proposed doesn't work really well if the padding on the opposite side is overridden too (e.g. leading icon is used together with trailing meta). I looked more into it (as this would be required for us implementing the MDC-based list in Angular Material).

The problem right now is that we reset the spacing on the mdc-list-item so that the __start and __end containers have full control over the start and end spacing. This works pretty well in LTR, but breaks in RTL because the styles from the reflexive-property are simply overwritten. e.g. the following styles are present:

.mdc-list-item {
  padding-left: 0px;
  padding-right: auto;
}


[dir=rtl] .mdc-list-item {
  padding-left: auto;
  padding-right: 0px;
}

This results in the following active CSS if dir=rtl is set:

.mdc-list-item {
  padding-left: 0px;
  padding-right: 0px;
}

This is wrong because the padding-left should be actually not set at all; and fall through to the 16px or other value (based on whether there is a leading graphic or not this can be also 0px). This was the goal as it seems, but it doesn't work as expected with the auto value.

There are multiple solutions based on what I can see:

1. Only apply LTR styles if dir=rtl is not set (so that auto can work as expected; and the value falls through)
   • This is not trivial to implement. Simply using :not(dir=rtl) <..> doesn't work. Probably involves a JS solution
2. Generate styles/selectors for all leading/trailing combinations.
   • This is pretty cumbersome and inefficient in terms of generated CSS + hard to maintain
3. Always keep the default horizontal item spacing; but for custom end and start spacing we just use negative margin on the actual start/end containers (if needed; to offset the outer item spacing)
   • This is the most size efficient solution; and also pretty easy to maintain.

I've tested (3) and it seems to work as expected. It might make overriding of the default spacing a little bit more difficult for consumers, but overriding the spacing wasn't straightforward before either (with the leading/trailing variants; and hard-coded values). Here is my draft commit: devversion@0fd217a

[brandondiamond]

Thanks for the fantastic investigation / details! This is something we've dug into quite a bit, too -- the trick is managing specificity appropriately so that the LTR and RTL styles aren't adjacent in the cascade. As you point out, this leads to padding being zeroed out. There should be a way of configuring the leading/trailing variants with the default item styles to ensure that the cascade works out as expected.

It may be best to hold off on this issue for the time being -- I'm doing a deep dive into the stylesheet to troubleshoot this and will hopefully have an update early next week (the structure of these styles is particularly important since any change to specificity will have a significant impact on other downstream components and clients).

[brandondiamond]

Hello again! I believe I've fixed the issue (RTL styles needed to be advanced in the stylesheet so that their specificity would exceed LTR variant styles, preventing LTR and RTL styles from being adjacent in the cascade): #7046

This approach is definitely a bit sensitive to specificity; we mainly see it as a workaround until the :dir selector becomes more widely supported. (And thanks again for your thorough analysis!)