fix(item-sliding): options display on rtl

[thetaPC]

Issue URL: resolves #26103, resolves #25285

---

What is the current behavior?

Options in item-sliding will not display when using RTL with Firefox and Safari.

What is the new behavior?

Issue was coming from :host-context. Firefox would keep removing the entire compiled style when using this unsupported style. This would led to the RTL styles to not being applied to the component.

• Split the CSS group from add-root-selector()
• Added comments to make it easier to navigate through add-root-selector()
• Added :dir()

Does this introduce a breaking change?

• Yes
• No

Other information

Co-authored-by: brandyscarney brandyscarney@users.noreply.github.com

• Updating add-root-selector() would also fix another issue unintentionally

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

Why was this added?

[thetaPC]

Without host-context then it leads to compiling the wrong css. Notice the lack of space between [dir=rtl] and .sc-ion-alert-ios

[dir=rtl].sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child {
 border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
}

By adding :host, the compiled css has the space:

[dir=rtl] .sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:last-child {
 border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
}

This only happens when the component is scoped.

If the component is not scoped or a shadow then it would have worked without :host:

.alert-button:first-child {
  @include rtl() {
    ...
  }
}

[liamdebeasi]

I'm not sure I understand the output comment here. [dir=rtl] :host won't match anything: https://codepen.io/liamdebeasi/pen/ExdgJzg

[thetaPC]

This outcome originated from input outline.

Without dir in the front then it wouldn't compile the correct styling which is the following:

[dir=rtl] :host(.input-fill-outline) .input-outline-start {
...
}

[liamdebeasi]

So this only applies to non-shadow DOM components, correct?

[thetaPC]

That is correct. The new changes would cause add-root-selector to not work with scoped or shadow DOM components. The main reason that host-context was removed is because when Firefox sees it then it completely removes it along with the attached list.

:host(.popover-side-end) .popover-arrow, :host-contenxt(...)... {
...
}

Firefox wouldn't even apply the example above. It sees the host-context and ignores the entire style (this is the cause of the issue on item-sliding).

Another approach to solving the issue is to determine if the browser is Chrome then add host-context to the list. Thoughts?

[brandyscarney]

So I used the following input SCSS against the functions on both main and FW-2608:

// shadow element
:host {
  @include rtl() {
    color: blue;
  }
}

// shadow element targeting class
:host(.fixed) {
  @include rtl() {
    color: red;
  }
}

// shadow element targeting class and child icon
:host(.icon-hide) ::slotted(ion-icon) {
  @include rtl() {
    color: blue;
  }
}

// shadow element targeting class and child icon
:host(.icon-left) ::slotted(ion-icon) {
  @include rtl() {
    color: blue;
  }
}

// shadow element targeting child class
.shadow {
  @include rtl() {
    color: green;
  }
}

// non-shadow element
.not-shadow {
  @include rtl() {
    color: pink;
  }
}

:host .element-selector {
  @include position(0, 0, null, null);
}

On main the resulting selectors are separated by commas, so I split those out to their own rules and then compared that output with the output from this PR in order to make the diff easier to compare:

The diff looks good as all of the selectors that shouldn't have changed have not (besides splitting them up instead of having them comma separated which is intentional). The new selectors seem to have the desired changes.

I checked the item-sliding tests in Safari and Firefox and they seem to be working correctly in RTL.

I think once the screenshots are passing this should be good to go.

[liamdebeasi]

I think change is looking really good so far!

One thing I am noticing is the bundle size can increase in some places because we are splitting up selectors:

Is is possible to optimize the code a bit so that we can use multiple selectors for a single code block?

So in the screenshot above the preferred output would be:

[dir=rtl] .range-knob-handle,
:host-context([dir=rtl]) .range-knob-handle,
.range-knob-handle:dir(rtl) {
 ...
}

I realize this task is taking longer than we originally pointed, so if you'd like to come back to it next sprint when we can re-point it that's fine too.

[thetaPC]

I think change is looking really good so far!

One thing I am noticing is the bundle size can increase in some places because we are splitting up selectors:

Is is possible to optimize the code a bit so that we can use multiple selectors for a single code block?

So in the screenshot above the preferred output would be:

[dir=rtl] .range-knob-handle,
:host-context([dir=rtl]) .range-knob-handle,
.range-knob-handle:dir(rtl) {
 ...
}

I realize this task is taking longer than we originally pointed, so if you'd like to come back to it next sprint when we can re-point it that's fine too.

We can't group them back in that sense because the entire styling would be ignored on Firefox and Safari as soon as they detect :hosts-context. I did manage to group them up this way:

:host-context([dir=rtl]) .range-knob-handle,
:host-context([dir=rtl]) .... {
 ...
}

[dir=rtl] .range-knob-handle,
[dir=rtl] ... {
 ...
}

All host-context will be grouped. Any vanilla selectors will be grouped. As for :dir(), those have also been grouped. But will be based on @supports selector.

[liamdebeasi]

The screenshot test threshold was reduced from 0.2 to 0.1, so it got more sensitive. As a result, I updated your PR to pull in the latest main and re-ran the update screenshot job. We were able to capture the fix that you noted with popover arrows in RTL in 5786f92

Good to merge once CI passes. Great work!