fix(list-header): apply safe area to proper side regardless of direct…

…ion (#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 <[email protected]>

core/src/components/list-header/list-header.ios.scss

@@ -9,7 +9,17 @@
   --color: #{$list-header-ios-color};
   --border-color: #{$item-ios-border-bottom-color};
 
-  @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start}), null);
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: var(--ion-safe-area-right);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start});
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$list-header-ios-padding-start});
+    padding-left: var(--ion-safe-area-left);
+  }
+  /* stylelint-enable */
 
   position: relative;
 

core/src/components/list-header/list-header.md.scss

@@ -9,7 +9,17 @@
   --color: #{$list-header-md-color};
   --border-color: #{$item-md-border-bottom-color};
 
-  @include padding-horizontal(calc(var(--ion-safe-area-left, 0) + #{$list-header-md-padding-start}), null);
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: var(--ion-safe-area-right);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$list-header-md-padding-start});
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$list-header-md-padding-start});
+    padding-left: var(--ion-safe-area-left);
+  }
+  /* stylelint-enable */
 
   min-height: $list-header-md-min-height;
 

core/src/components/list-header/test/basic/list-header.e2e.ts

@@ -12,3 +12,37 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior needs to be tested in both modes and directions to
+ * make sure the safe area padding is applied only to that side
+ * regardless of direction
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('list-header: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-list-header>
+            <ion-label>List Header</ion-label>
+            <ion-button>Button</ion-button>
+          </ion-list-header>
+        `,
+          config
+        );
+
+        const listHeader = page.locator('ion-list-header');
+
+        await expect(listHeader).toHaveScreenshot(screenshot(`list-header-safe-area`));
+      });
+    });
+  });
+});