8000 fix(menu): allow styling of the box shadow and transform when visible… · ionic-team/ionic-framework@8ee23d2 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8ee23d2

Browse files
brandyscarneyIonitron
brandyscarney
and
Ionitron
authored
fix(menu): allow styling of the box shadow and transform when visible inside of a split pane (#28691)
Issue number: resolves #21530 --------- ## What is the current behavior? The `box-shadow` and `transform` properties cannot be styled on a menu when it is inside of a split pane and visible due to the following: 1) The `box-shadow` and `transform` properties are set to `none` with `!important` 2) The menu itself is not on "top" of the split pane content so the content hides any box shadow ## What is the new behavior? - Removes all uses of `!important` in split pane and menu - Developers will need to change the `z-index` from `0` to `1` on the `ion-menu` so the menu will sit on top of the split pane and show the `box-shadow` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I considered putting the test for this in `split-pane` but I thought since it was styling the `ion-menu` it should go in menu. I can move this if others think it makes more sense in `split-pane`. --------- Co-authored-by: ionitron <hi@ionicframework.com>
1 parent 8f66acd commit 8ee23d2

9 files changed

+69
-6
lines changed

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -190,13 +190,12 @@ ion-backdrop {
190190

191191
width: auto;
192192

193-
/* stylelint-disable declaration-no-important */
194-
transform: none !important;
193+
transform: none;
195194

196-
box-shadow: none !important;
195+
box-shadow: none;
197196
}
198197

199198
:host(.menu-pane-visible) ion-backdrop {
199+
/* stylelint-disable-next-line declaration-no-important */
200200
display: hidden !important;
201-
/* stylelint-enable declaration-no-important */
202201
}

‎core/src/components/menu/test/custom/menu.e2e.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* This behavior does not vary across directions.
6+
*/
7+
configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
8+
test.describe(title('menu: custom'), () => {
9+
test('should allow styling the menu box shadow when inside a split pane', async ({ page }) => {
10+
test.info().annotations.push({
11+
type: 'issue',
12+
description: 'https://github.com/ionic-team/ionic-framework/issues/21530',
13+
});
14+
15+
await page.setContent(
16+
`
17+
<style>
18+
ion-split-pane {
19+
--side-width: 200px;
20+
--side-min-width: 200px;
21+
}
22+
23+
ion-menu {
24+
box-shadow: 10px 5px 5px red;
25+
z-index: 1;
26+
}
27+
</style>
28+
29+
<ion-app>
30+
<ion-split-pane when="xs" id="splitPane" content-id="split-content">
31+
<ion-menu side="start" content-id="split-content">
32+
<ion-header>
33+
<ion-toolbar color="secondary">
34+
<ion-title>Menu</ion-title>
35+
</ion-toolbar>
36+
</ion-header>
37+
38+
<ion-content class="ion-padding">Menu Content</ion-content>
39+
</ion-menu>
40+
41+
<div class="ion-page" id="split-content">
42+
<ion-header>
43+
<ion-toolbar>
44+
<ion-buttons slot="start">
45+
<ion-menu-button></ion-menu-button>
46+
</ion-buttons>
47+
48+
<ion-title>Content</ion-title>
49+
</ion-toolbar>
50+
</ion-header>
51+
52+
<ion-content class="ion-padding">Main Content</ion-content>
53+
</div>
54+
</ion-split-pane>
55+
</ion-app>
56+
`,
57+
config
58+
);
59+
60+
const app = page.locator('ion-app');
61+
62+
await expect(app).toHaveScreenshot(screenshot(`menu-custom-split-pane`));
63+
});
64+
});
65+
});

‎core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Chrome-linux.png

6.21 KB
Loading

‎core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Firefox-linux.png

15 KB
Loading

‎core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Safari-linux.png

5.43 KB
Loading

‎core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Chrome-linux.png

8.28 KB
Loading

‎core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Firefox-linux.png

17 KB
Loading

‎core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Safari-linux.png

7.19 KB
Loading

‎core/src/components/split-pane/split-pane.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@
4343

4444
position: relative;
4545

46-
/* stylelint-disable-next-line declaration-no-important */
47-
box-shadow: none !important;
46+
box-shadow: none;
4847
z-index: 0;
4948
}
5049

0 commit comments

Comments
 (0)
0