SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 0 TypeScript

fix(list-header): apply safe area to proper side regardless of direction (#28371)

Issue number: Internal

---------

## What is the current behavior?
The list header adds padding to the "start" side (`padding-left` in LTR
and `padding-right` in RTL) based on the value of
`--ion-safe-area-left`. It does not account for `--ion-safe-area-right`
at all even though the list header can extend to the right side of the
content.

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

- The `--ion-safe-area-left` always applies to the left side of the
screen, regardless of direction. This means that in both LTR and RTL it
applies as `padding-left`.
- Added support for `--ion-safe-area-right` which applies to
`padding-right` in both LTR and RTL.
- Adds an e2e test which captures the list header with a button to
ensure the proper padding is added for the safe area.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

### Safe Area Left

| mode | direction | `main` | `branch` |
| ---| ---| ---| ---|
| `ios` | `LTR` |
![ios-ltr-main](https://github.com/ionic-team/ionic-framework/assets/6577830/19d6e36d-3ba2-4b39-9a9a-dfd7d87cd8c8)
|
![ios-ltr-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/5d0ae228-9dc8-4d37-98ba-c5b24b162c66)
|
| `ios` | `RTL` |
![ios-rtl-main](https://github.com/ionic-team/ionic-framework/assets/6577830/21e96613-0058-4d6a-a4d3-90262d8b4ae7)
|
![ios-rtl-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/162ca34e-9c8d-4f9d-8cf7-6610730764f2)
|
| `md` | `LTR` |
![md-ltr-main](https://github.com/ionic-team/ionic-framework/assets/6577830/21bec027-d205-41bd-bc01-63a1efc6ed7d)
|
![md-ltr-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/b5120f60-d63a-4e54-a26a-ade997a275fb)
|
| `md` | `RTL` |
![md-rtl-main](https://github.com/ionic-team/ionic-framework/assets/6577830/acef4350-08d1-4bd1-abf5-5b944c2c3711)
|
![md-rtl-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/48099c25-1851-4ee5-9b87-56072889b477)
|

### Safe Area Right

| mode | direction | `main` | `branch` |
| ---| ---| ---| ---|
| `ios` | `LTR` |
![ios-ltr-main](https://github.com/ionic-team/ionic-framework/assets/6577830/ce01abb2-ab9b-4d86-a1e6-5a79a9dafb1d)
|![ios-ltr-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/1c62aa51-e62c-412d-ab75-a0a69096298f)
|
| `ios` | `RTL` |
![ios-rtl-main](https://github.com/ionic-team/ionic-framework/assets/6577830/5a3670ed-8350-4039-b1e6-f44bc7da971c)
|
![ios-rtl-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/1696c39c-dc5d-420c-9496-b6d1dc4308e7)
|
| `md` |`LTR` |
![md-ltr-main](https://github.com/ionic-team/ionic-framework/assets/6577830/8c50988c-ff10-4eed-9330-f9fafb2d9f48)
|
![md-ltr-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/578f3c0d-a4fe-45f1-922f-a556f48c6379)
|
| `md` |`RTL` |
![md-rtl-main](https://github.com/ionic-team/ionic-framework/assets/6577830/2805db9e-a173-4e4a-a16c-876bec08f223)
|
![md-rtl-branch](https://github.com/ionic-team/ionic-framework/assets/6577830/14f2dca1-5af0-4ab1-b967-bd02d744b74c)
|

---------

Co-authored-by: ionitron <hi@ionicframework.com>
B
Brandy Carney committed
f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f
Parent: 6e771e0
Committed by GitHub <noreply@github.com> on 10/25/2023, 2:45:11 PM