diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index 4a1a09e84b..83536250d0 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -83,12 +83,14 @@ * Otherwise, the content will have less space on both sides. * * RTL: - * The right side of the menu touches the screen edge. The safe area padding has - * already been set in the core styles, so there's no need to set it again. + * The right side of the menu touches the screen edge. + * The right side needs to revert back to the default value that was set in the core styles, so we unset it here. + * This would keep the variable consistent with the core styles. + * Additionally, it would continue to allow users to override the variable if they choose to. * The left side of the menu is not touching the screen edge. Padding is not * applied to the left side of the menu. A value of 0 is set. */ - --ion-safe-area-right: env(safe-area-inset-right); + --ion-safe-area-right: unset; --ion-safe-area-left: 0px; } } @@ -118,12 +120,14 @@ * Otherwise, the content will have less space on both sides. * * RTL: - * The left side of the menu touches the screen edge. The safe area padding has - * already been set in the core styles, so there's no need to set it again. + * The left side of the menu touches the screen edge. + * The left side needs to revert back to the default value that was set in the core styles, so we unset it here. + * This would keep the variable consistent with the core styles. + * Additionally, it would continue to allow users to override the variable if they choose to. * The right side of the menu is not touching the screen edge. Padding is not * applied to the right side of the menu. A value of 0 is set. */ - --ion-safe-area-left: env(safe-area-inset-left); + --ion-safe-area-left: unset; --ion-safe-area-right: 0px; } } diff --git a/core/src/components/menu/test/safe-area/index.html b/core/src/components/menu/test/safe-area/index.html new file mode 100644 index 0000000000..0798ca88d1 --- /dev/null +++ b/core/src/components/menu/test/safe-area/index.html @@ -0,0 +1,81 @@ + + + + + Menu - Safe Area Padding + + + + + + + + + + + + + + + + This is the title for a start menu + + + + + Menu Item + + + + + + + + This is the title for an end menu + + + + + Menu Item + + + + +
+ + + Menu - Safe Area Padding + + + + Open Start Menu + Open End Menu + +
+ + + + + diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts b/core/src/components/menu/test/safe-area/menu.e2e.ts new file mode 100644 index 0000000000..9ab66c454a --- /dev/null +++ b/core/src/components/menu/test/safe-area/menu.e2e.ts @@ -0,0 +1,101 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across modes. + */ +configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => { + test.describe(title('menu: safe area'), () => { + test.beforeEach(async ({ page }) => { + await page.goto(`/src/components/menu/test/safe-area`, config); + }); + test.describe('side: start', () => { + test('should render with safe area when notch is on the left', async ({ page }) => { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + + await page.evaluate(() => { + const style = document.querySelector('style'); + style!.innerHTML = ` + :root { + --ion-safe-area-left: 50px !important; + --ion-safe-area-right: 10px !important; + } + `; + }); + + await page.click('#open-start'); + await ionDidOpen.next(); + + const startMenu = page.locator('[menu-id="start-menu"]'); + await expect(startMenu).toHaveClass(/show-menu/); + + await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`)); + }); + test('should render with safe area when notch is on the right', async ({ page }) => { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + + await page.evaluate(() => { + const style = document.querySelector('style'); + style!.innerHTML = ` + :root { + --ion-safe-area-left: 10px !important; + --ion-safe-area-right: 50px !important; + } + `; + }); + + await page.click('#open-start'); + await ionDidOpen.next(); + + const startMenu = page.locator('[menu-id="start-menu"]'); + await expect(startMenu).toHaveClass(/show-menu/); + + await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-right-notch`)); + }); + }); + test.describe('side: end', () => { + test('should render with safe area when notch is on the left', async ({ page }) => { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + + await page.evaluate(() => { + const style = document.querySelector('style'); + style!.innerHTML = ` + :root { + --ion-safe-area-left: 50px !important; + --ion-safe-area-right: 10px !important; + } + `; + }); + + await page.click('#open-end'); + await ionDidOpen.next(); + + const endMenu = page.locator('[menu-id="end-menu"]'); + await expect(endMenu).toHaveClass(/show-menu/); + + await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-left-notch`)); + }); + test('should render with safe area when notch is on the right', async ({ page }) => { + const ionDidOpen = await page.spyOnEvent('ionDidOpen'); + + await page.evaluate(() => { + const style = document.querySelector('style'); + style!.innerHTML = ` + :root { + --ion-safe-area-left: 10px !important; + --ion-safe-area-right: 50px !important; + } + `; + }); + + await page.click('#open-end'); + await ionDidOpen.next(); + + const endMenu = page.locator('[menu-id="end-menu"]'); + await expect(endMenu).toHaveClass(/show-menu/); + + await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-right-notch`)); + }); + }); + }); +}); diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e5598ea0c1 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bb8be0d961 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e26aac77eb Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..95aa60b047 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7e633d12f9 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..51f854892c Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cc6c494d21 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..32b22960fd Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9989117ca4 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bfa13d85bd Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..04d3c8fd8f Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f6c9b87172 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..369e5377be Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..df9b448404 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6493d007a2 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8914e73395 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d4b21b5d5a Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8ed3eb8bda Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..392f60fa57 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cfadce8ea7 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d9db0b02b3 Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..eb5cf5118f Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d3d6f09c7c Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..215f6c4a3a Binary files /dev/null and b/core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-start-safe-area-right-notch-md-rtl-Mobile-Safari-linux.png differ