Skip to content

Commit 574d762

Browse files
thetaPCIonitron
thetaPC
and
Ionitron
authored
test(menu): safe area and proper var reset (#28177)
Issue number: N/A --------- <!-- 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. --> - There are no tests for menu when safe area is applied. - The safe area variables on menu weren't being reset properly to allow easy local customization. Currently, some of the variables are being set to `env()`. This is the same structure that is being used in core. However, this doesn't prevents users from mocking the safe area when using `--ion-safe-area-left: 50px` on `html`. It makes it hard to create tests to validate that padding is being applied to the safe area. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Tests have been added. - The safe area variables on menu are now being reset to use the values from `:root`. The variables are being `unset` in order for the variables to [default to parent styles](https://stackoverflow.com/a/69491310/5374225). Since core styles has already declared the variables, then developers can use `--ion-safe-area-left: 50px` on `html`. ## 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. --> N/A --------- Co-authored-by: ionitron <[email protected]>
1 parent 45bbea6 commit 574d762

File tree

27 files changed

+192
-6
lines changed

27 files changed

+192
-6
lines changed

‎core/src/components/menu/menu.scss

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,14 @@
8383
* Otherwise, the content will have less space on both sides.
8484
*
8585
* RTL:
86-
* The right side of the menu touches the screen edge. The safe area padding has
87-
* already been set in the core styles, so there's no need to set it again.
86+
* The right side of the menu touches the screen edge.
87+
* The right side needs to revert back to the default value that was set in the core styles, so we unset it here.
88+
* This would keep the variable consistent with the core styles.
89+
* Additionally, it would continue to allow users to override the variable if they choose to.
8890
* The left side of the menu is not touching the screen edge. Padding is not
8991
* applied to the left side of the menu. A value of 0 is set.
9092
*/
91-
--ion-safe-area-right: env(safe-area-inset-right);
93+
--ion-safe-area-right: unset;
9294
--ion-safe-area-left: 0px;
9395
}
9496
}
@@ -118,12 +120,14 @@
118120
* Otherwise, the content will have less space on both sides.
119121
*
120122
* RTL:
121-
* The left side of the menu touches the screen edge. The safe area padding has
122-
* already been set in the core styles, so there's no need to set it again.
123+
* The left side of the menu touches the screen edge.
124+
* The left side needs to revert back to the default value that was set in the core styles, so we unset it here.
125+
* This would keep the variable consistent with the core styles.
126+
* Additionally, it would continue to allow users to override the variable if they choose to.
123127
* The right side of the menu is not touching the screen edge. Padding is not
124128
* applied to the right side of the menu. A value of 0 is set.
125129
*/
126-
--ion-safe-area-left: env(safe-area-inset-left);
130+
--ion-safe-area-left: unset;
127131
--ion-safe-area-right: 0px;
128132
}
129133
}

‎core/src/components/menu/test/safe-area/index.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Menu - Safe Area Padding</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
<script type="module">
16+
import { menuController } from '../../../../dist/ionic/index.esm.js';
17+
window.menuController = menuController;
18+
</script>
19+
<style>
20+
:root {
21+
--ion-safe-area-left: 60px;
22+
--ion-safe-area-right: 20px;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<ion-app>
29+
<ion-menu side="start" menu-id="start-menu" content-id="main">
30+
<ion-header>
31+
<ion-toolbar color="primary">
32+
<ion-title>This is the title for a start menu</ion-title>
33+
</ion-toolbar>
34+
</ion-header>
35+
<ion-content>
36+
<ion-list>
37+
<ion-item>Menu Item</ion-item>
38+
</ion-list>
39+
</ion-content>
40+
</ion-menu>
41+
42+
<ion-menu side="end" menu-id="end-menu" content-id="main">
43+
<ion-header>
44+
<ion-toolbar color="danger">
45+
<ion-title>This is the title for an end menu</ion-title>
46+
</ion-toolbar>
47+
</ion-header>
48+
<ion-content>
49+
<ion-list>
50+
<ion-item>Menu Item</ion-item>
51+
</ion-list>
52+
</ion-content>
53+
</ion-menu>
54+
55+
<div class="ion-page" id="main">
56+
<ion-header>
57+
<ion-toolbar>
58+
<ion-title>Menu - Safe Area Padding</ion-title>
59+
</ion-toolbar>
60+
</ion-header>
61+
<ion-content class="ion-padding">
62+
<ion-button expand="block" id="open-start" onclick="openStart()">Open Start Menu</ion-button>
63+
<ion-button expand="block" id="open-end" onclick="openEnd()">Open End Menu</ion-button>
64+
</ion-content>
65+
</div>
66+
</ion-app>
67+
68+
<script>
69+
async function openStart() {
70+
// Open the menu by menu-id
71+
await menuController.enable(true, 'start-menu');
72+
await menuController.open('start-menu');
73+
}
74+
75+
async function openEnd() {
76+
// Open the menu by side
77+
await menuController.open('end');
78+
}
79+
</script>
80+
</body>
81+
</html>

‎core/src/components/menu/test/safe-area/menu.e2e.ts

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* This behavior does not vary across modes.
6+
*/
7+
configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
8+
test.describe(title('menu: safe area'), () => {
9+
test.beforeEach(async ({ page }) => {
10+
await page.goto(`/src/components/menu/test/safe-area`, config);
11+
});
12+
test.describe('side: start', () => {
13+
test('should render with safe area when notch is on the left', async ({ page }) => {
14+
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
15+
16+
await page.evaluate(() => {
17+
const style = document.querySelector('style');
18+
style!.innerHTML = `
19+
:root {
20+
--ion-safe-area-left: 50px !important;
21+
--ion-safe-area-right: 10px !important;
22+
}
23+
`;
24+
});
25+
26+
await page.click('#open-start');
27+
await ionDidOpen.next();
28+
29+
const startMenu = page.locator('[menu-id="start-menu"]');
30+
await expect(startMenu).toHaveClass(/show-menu/);
31+
32+
await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`));
33+
});
34+
test('should render with safe area when notch is on the right', async ({ page }) => {
35+
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
36+
37+
await page.evaluate(() => {
38+
const style = document.querySelector('style');
39+
style!.innerHTML = `
40+
:root {
41+
--ion-safe-area-left: 10px !important;
42+
--ion-safe-area-right: 50px !important;
43+
}
44+
`;
45+
});
46+
47+
await page.click('#open-start');
48+
await ionDidOpen.next();
49+
50+
const startMenu = page.locator('[menu-id="start-menu"]');
51+
await expect(startMenu).toHaveClass(/show-menu/);
52+
53+
await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-right-notch`));
54+
});
55+
});
56+
test.describe('side: end', () => {
57+
test('should render with safe area when notch is on the left', async ({ page }) => {
58+
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
59+
60+
await page.evaluate(() => {
61+
const style = document.querySelector('style');
62+
style!.innerHTML = `
63+
:root {
64+
--ion-safe-area-left: 50px !important;
65+
--ion-safe-area-right: 10px !important;
66+
}
67+
`;
68+
});
69+
70+
await page.click('#open-end');
71+
await ionDidOpen.next();
72+
73+
const endMenu = page.locator('[menu-id="end-menu"]');
74+
await expect(endMenu).toHaveClass(/show-menu/);
75+
76+
await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-left-notch`));
77+
});
78+
test('should render with safe area when notch is on the right', async ({ page }) => {
79+
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
80+
81+
await page.evaluate(() => {
82+
const style = document.querySelector('style');
83+
style!.innerHTML = `
84+
:root {
85+
--ion-safe-area-left: 10px !important;
86+
--ion-safe-area-right: 50px !important;
87+
}
88+
`;
89+
});
90+
91+
await page.click('#open-end');
92+
await ionDidOpen.next();
93+
94+
const endMenu = page.locator('[menu-id="end-menu"]');
95+
await expect(endMenu).toHaveClass(/show-menu/);
96+
97+
await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-right-notch`));
98+
});
99+
});
100+
});
101+
});

‎core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Chrome-linux.png

8.64 KB
Loading

‎core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Firefox-linux.png

16.2 KB
Loading

‎core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-ltr-Mobile-Safari-linux.png

7.58 KB
Loading

‎core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Chrome-linux.png

9.56 KB
Loading

‎core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Firefox-linux.png

17.4 KB
Loading

‎core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-left-notch-md-rtl-Mobile-Safari-linux.png

8.24 KB
Loading

‎core/src/components/menu/test/safe-area/menu.e2e.ts-snapshots/menu-end-safe-area-right-notch-md-ltr-Mobile-Chrome-linux.png

8.94 KB
Loading

0 commit comments

Comments
 (0)