feat(ion-header): add basic UI for ionic theme (#29629)

Issue number: internal

---------

<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added new common header partial, to be used by ionic theme and ios/md
- Renamed header.scss to header.native.scss. This inherits the common
created above and its used only on ios and md partial
- Created new partial for ionic theme.
- Added ionic theme to basic e2e tests.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Sample Header
Screen](https://ionic-framework-rcfex2fep-ionic1.vercel.app/src/components/header/test/basic?ionic:theme=ionic)

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <maria@ionic.io>

core/src/components/header/header.common.scss

@@ -1,5 +1,3 @@
-@import "../../themes/native/native.globals";
-
 // Header
 // --------------------------------------------------
 
@@ -10,8 +8,6 @@ ion-header {
   order: -1;
 
   width: 100%;
-
-  z-index: $z-index-toolbar;
 }
 
 ion-header ion-toolbar:first-of-type {

core/src/components/header/header.ionic.scss

@@ -0,0 +1,10 @@
+@use "./header.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Header
+// --------------------------------------------------
+
+ion-header {
+  box-shadow: #{globals.$ionic-elevation-200};
+  z-index: 10;
+}

core/src/components/header/header.ios.scss

@@ -1,4 +1,4 @@
-@import "./header";
+@import "./header.native";
 @import "./header.ios.vars";
 
 // iOS Header

core/src/components/header/header.md.scss

@@ -1,4 +1,4 @@
-@import "./header";
+@import "./header.native";
 @import "./header.md.vars";
 
 // Material Design Header

core/src/components/header/header.native.scss

@@ -0,0 +1,9 @@
+@import "./header.common";
+@import "../../themes/native/native.globals";
+
+// Header
+// --------------------------------------------------
+
+ion-header {
+  z-index: $z-index-toolbar;
+}

core/src/components/header/header.tsx

@@ -26,7 +26,7 @@ import {
   styleUrls: {
     ios: 'header.ios.scss',
     md: 'header.md.scss',
-    ionic: 'header.md.scss',
+    ionic: 'header.ionic.scss',
   },
 })
 export class Header implements ComponentInterface {

core/src/components/header/test/basic/header.e2e.ts

@@ -1,22 +1,31 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('header: rendering'), () => {
     test('should not have visual regressions with basic header', async ({ page }) => {
       await page.setContent(
         `
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Header - Default</ion-title>
-          </ion-toolbar>
-        </ion-header>
+        <style>
+          .container {
+            background-color: #eaeaea;
+            padding: 10px;
+          }
+        </style>
+      
+        <div class="container">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Header - Default</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </div>
       `,
         config
       );
 
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`header-diff`));
+      const container = page.locator('.container');
+      await expect(container).toHaveScreenshot(screenshot(`header-diff`));
     });
   });
 });