From 0b8f1bc7dd4170a2a8c9ed3aede173dd489b25ea Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 26 Jul 2023 12:24:14 -0400
Subject: [PATCH] fix(item-options): use correct safe area padding (#27853)

Issue number: Internal

---------

<!-- 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. -->

Item sliding options in the "start" slot use the "left" safe area
padding on the end edge. This causes the padding to be added in the
wrong place.

During development I also discovered that the RTL padding was wrong for
both start and end options.

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

LTR:

- `side="start"` options set "left" safe area padding on left edge of
first child
- `side="end"` options set "right" safe area padding on right edge of
last child

RTL:

- `side="start"` options set "right" safe area padding on right edge of
first child
- `side="end"` options set "left" safe area padding on the left edge of
the last child

## 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. -->

| side prop/text direction | `main` | `branch` |
| - | - | - |
| start/LTR |
![start-ltr](https://github.com/ionic-team/ionic-framework/assets/2721089/36fd01c7-0907-4933-b8be-f0193f5652f3)
|
![start-ltr](https://github.com/ionic-team/ionic-framework/assets/2721089/0949fd0e-22a9-4101-bfff-07062b69fdd5)
|
| end/LTR |
![end-ltr](https://github.com/ionic-team/ionic-framework/assets/2721089/1fcc1440-e2ad-4935-9bb5-cce6d7f466ab)
|
![end-ltr](https://github.com/ionic-team/ionic-framework/assets/2721089/33c520d3-2bee-4235-a491-93a2c2d1fab5)
|
| start/RTL |
![start-rtl](https://github.com/ionic-team/ionic-framework/assets/2721089/ce66cc00-019a-4b63-b0d3-3ae094ae53a0)
|
![start-rtl](https://github.com/ionic-team/ionic-framework/assets/2721089/c655cfe7-4b22-41fb-8910-7b7055f87f9b)
|
| end/RTL |
![end-rtl](https://github.com/ionic-team/ionic-framework/assets/2721089/2d9f6810-80c3-479c-90d9-c4e0c55ad705)
|
![end-rtl](https://github.com/ionic-team/ionic-framework/assets/2721089/745a499b-bb22-40d4-a74f-55232c2af102)
|
---
 core/src/components/item-options/item-options.scss | 14 ++++++++------
 core/src/components/item-options/item-options.tsx  |  8 ++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss
index 50774c68560..c35b53fddb5 100644
--- a/core/src/components/item-options/item-options.scss
+++ b/core/src/components/item-options/item-options.scss
@@ -56,15 +56,17 @@ ion-item-options {
   }
 }
 
-.item-options-start ion-item-option:first-child {
-  @include padding-horizontal(null, var(--ion-safe-area-left));
-
+/* stylelint-disable property-disallowed-list */
+[dir="ltr"] .item-options-start ion-item-option:first-child,
+[dir="rtl"] .item-options-start ion-item-option:last-child {
+  padding-left: var(--ion-safe-area-left);
 }
 
-.item-options-end ion-item-option:last-child {
-  @include padding-horizontal(null, var(--ion-safe-area-right));
-
+[dir="ltr"] .item-options-end ion-item-option:last-child,
+[dir="rtl"] .item-options-end ion-item-option:first-child {
+  padding-right: var(--ion-safe-area-right);
 }
+/* stylelint-enable property-disallowed-list */
 
 .item-sliding-active-slide {
   @include rtl() {
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index 3b17a78fcea..d495580d7a5 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -45,6 +45,14 @@ export class ItemOptions implements ComponentInterface {
           // Used internally for styling
           [`item-options-${mode}`]: true,
 
+          /**
+           * Note: The "start" and "end" terms refer to the
+           * direction ion-item-option instances within ion-item-options flow.
+           * They do not refer to how ion-item-options flows within ion-item-sliding.
+           * As a result, "item-options-start" means the ion-item-options container
+           * always appears on the left, and "item-options-end" means the ion-item-options
+           * container always appears on the right.
+           */
           'item-options-start': !isEnd,
           'item-options-end': isEnd,
         }}