fix(item-sliding): options display on rtl (#27203)

Browse Source

Issue URL: resolves #26103, resolves #25285

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

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

<!-- Issues are required for both bug fixes and features. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Issue was coming from `:host-context`. Firefox would keep [removing the
entire](https://www.w3.org/TR/selectors-3/#grouping) 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
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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

- Updating `add-root-selector()` would also fix another
[issue](https://github.com/ionic-team/ionic-framework/issues/25285)
unintentionally

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

...

This commit is contained in:

Maria Hutt

2023-05-09 10:05:18 -07:00

committed by GitHub

parent 2bec25ef01

commit b16fd1d6f9

4 changed files with 113 additions and 29 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Firefox-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 58 KiB After Width:  |  Height:  |  Size: 58 KiB

BIN

core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Firefox-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 88 KiB After Width:  |  Height:  |  Size: 88 KiB