fix(sheet): fix toolbar not showing contents in ios for ionic theme

Author: OS-giulianasilva

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', "md", "ionic-ios", "ionic-md"], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('sheet modal: rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
@@ -25,7 +25,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ["ionic-ios", 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('sheet modal: half screen rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
@@ -62,7 +62,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
   });
 });
 
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios', "ionic-ios"], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('sheet modal: backdrop'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);

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

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toolbar: basic (LTR only)'), () => {
     test('should not have visual regressions with text only', async ({ page }) => {
       await page.setContent(
@@ -21,7 +21,7 @@ configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title,
   });
 });
 
-configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toolbar: basic'), () => {
     test('should truncate long title with ellipsis', async ({ page }) => {
       await page.setContent(
@@ -156,5 +156,25 @@ configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config })
       const header = page.locator('ion-header');
       await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
     });
+
+    test('should not have visual regressions with text and button inside the content slot', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-button fill="solid">
+                <ion-icon slot="start" name="person-circle"></ion-icon>
+                Solid
+              </ion-button>
+              <span>Solid</span>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );
+
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-buttons-inside-content`));
+    });
   });
 });

core/src/components/toolbar/toolbar.ionic.scss

@@ -17,6 +17,14 @@
 
 .toolbar-container {
   gap: globals.$ion-space-400;
+  z-index: 10;
+}
+
+// Toolbar: Transparent
+// --------------------------------------------------
+
+.toolbar-background {
+  z-index: -1;
 }
 
 // Toolbar: Content