diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index b01024e6ece..56cb1138aba 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -17,18 +17,6 @@ font-family: $font-family-base; } -:host(.in-list.item-options-end:last-child) { - @include padding-horizontal( - null, calc(.7em + var(--ion-safe-area-right)) - ); -} - -:host(.in-list.item-options-start:first-child) { - @include padding-horizontal( - calc(.7em + var(--ion-safe-area-left)), null - ); -} - :host(.ion-color) { background: current-color(base); color: current-color(contrast); diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts index 3d31279b40c..908155f0ea5 100644 --- a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts +++ b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts @@ -99,3 +99,94 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co }); }); }); + +/** + * 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('item-sliding: basic'), () => { + test.describe('safe area left', () => { + test('should have padding on the left only', async ({ page }) => { + await page.setContent( + ` + + + + + + Archive + + + Delete + + + + + + Sliding Item + + + + `, + config + ); + + const direction = config.direction; + const item = page.locator('ion-item-sliding'); + + const dragByX = direction == 'rtl' ? -150 : 150; + await dragElementBy(item, page, dragByX); + await page.waitForChanges(); + + await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-left`)); + }); + }); + + test.describe('safe area right', () => { + test('should have padding on the right only', async ({ page }) => { + await page.setContent( + ` + + + + + + Sliding Item + + + + + + Archive + + + Delete + + + + `, + config + ); + + const direction = config.direction; + const item = page.locator('ion-item-sliding'); + + const dragByX = direction == 'rtl' ? 150 : -150; + await dragElementBy(item, page, dragByX); + await page.waitForChanges(); + + await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-right`)); + }); + }); + }); +}); diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..60b83137e0b Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b7ca18c5e7e Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..52beeeb7a95 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c9f7034c527 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..edb97fa14ab Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7a0b3c04ca3 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..873f68641ef Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5ef8f2fdf3d Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..671a9d901e0 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4fdf0ad75a1 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9473f2c20c3 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..59ca54af360 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ac79bcf0a4a Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d52744a8556 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..aff99e31d9c Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e0ac027181e Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..104548e5037 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1871af7cb19 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4bdb163297a Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..176c185cfbd Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..682e0196487 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a2767263a08 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e532cf2302c Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..80312a26af5 Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-md-rtl-Mobile-Safari-linux.png differ