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>

core/src/components/menu/menu.scss

@@ -190,13 +190,12 @@ ion-backdrop {
 
   width: auto;
 
-  /* stylelint-disable declaration-no-important */
-  transform: none !important;
+  transform: none;
 
-  box-shadow: none !important;
+  box-shadow: none;
 }
 
 :host(.menu-pane-visible) ion-backdrop {
+  /* stylelint-disable-next-line declaration-no-important */
   display: hidden !important;
-  /* stylelint-enable declaration-no-important */
 }

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

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('menu: custom'), () => {
+    test('should allow styling the menu box shadow when inside a split pane', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/21530',
+      });
+
+      await page.setContent(
+        `
+        <style>
+          ion-split-pane {
+            --side-width: 200px;
+            --side-min-width: 200px;
+          }
+
+          ion-menu {
+            box-shadow: 10px 5px 5px red;
+            z-index: 1;
+          }
+        </style>
+
+        <ion-app>
+          <ion-split-pane when="xs" id="splitPane" content-id="split-content">
+            <ion-menu side="start" content-id="split-content">
+              <ion-header>
+                <ion-toolbar color="secondary">
+                  <ion-title>Menu</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Menu Content</ion-content>
+            </ion-menu>
+
+            <div class="ion-page" id="split-content">
+              <ion-header>
+                <ion-toolbar>
+                  <ion-buttons slot="start">
+                    <ion-menu-button></ion-menu-button>
+                  </ion-buttons>
+
+                  <ion-title>Content</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Main Content</ion-content>
+            </div>
+          </ion-split-pane>
+        </ion-app>
+      `,
+        config
+      );
+
+      const app = page.locator('ion-app');
+
+      await expect(app).toHaveScreenshot(screenshot(`menu-custom-split-pane`));
+    });
+  });
+});

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

@@ -43,8 +43,7 @@
 
   position: relative;
 
-  /* stylelint-disable-next-line declaration-no-important */
-  box-shadow: none !important;
+  box-shadow: none;
   z-index: 0;
 }