From e4740daf686fb3df4f64e97eaa098af8c4ca6ca9 Mon Sep 17 00:00:00 2001 From: kumibrr Date: Tue, 23 Sep 2025 19:38:58 +0200 Subject: [PATCH 1/4] fix(header): ensure collapsible header is visible in iOS mode --- core/src/components/header/header.md.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss index 96cf48f92c1..f54ce39735e 100644 --- a/core/src/components/header/header.md.scss +++ b/core/src/components/header/header.md.scss @@ -8,7 +8,7 @@ box-shadow: $header-md-box-shadow; } -.header-collapse-condense { +.header-md.header-collapse-condense { display: none; } From d403556989ac6255d1ff47986a829d450e561bd0 Mon Sep 17 00:00:00 2001 From: kumibrr Date: Tue, 23 Sep 2025 19:52:45 +0200 Subject: [PATCH 2/4] added showcase --- .../header/test/condense-modal/index.html | 144 ++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 core/src/components/header/test/condense-modal/index.html diff --git a/core/src/components/header/test/condense-modal/index.html b/core/src/components/header/test/condense-modal/index.html new file mode 100644 index 00000000000..ba0279a1577 --- /dev/null +++ b/core/src/components/header/test/condense-modal/index.html @@ -0,0 +1,144 @@ + + + + + Modal - Basic + + + + + + + + + + + +
+ + + Header condense-modal + + + + + + +
+ + + + + From fefb1ec9ccbdfd0f960f40b7d538369de6c85ec1 Mon Sep 17 00:00:00 2001 From: kumibrr Date: Tue, 23 Sep 2025 20:07:57 +0200 Subject: [PATCH 3/4] added mode=ios to all headers in showcase --- core/src/components/header/test/condense-modal/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/header/test/condense-modal/index.html b/core/src/components/header/test/condense-modal/index.html index ba0279a1577..cb98b855542 100644 --- a/core/src/components/header/test/condense-modal/index.html +++ b/core/src/components/header/test/condense-modal/index.html @@ -49,7 +49,7 @@ // create component to open const element = document.createElement('div'); element.innerHTML = ` - +
From eb4bfa66906cb1faadeb5f0587fa73b20e9a3253 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Fri, 19 Dec 2025 11:34:33 -0800 Subject: [PATCH 4/4] test(header): replace HTML test with setContent-based e2e test --- .../header/test/condense-modal/header.e2e.ts | 71 +++++++++ .../header/test/condense-modal/index.html | 144 ------------------ 2 files changed, 71 insertions(+), 144 deletions(-) create mode 100644 core/src/components/header/test/condense-modal/header.e2e.ts delete mode 100644 core/src/components/header/test/condense-modal/index.html diff --git a/core/src/components/header/test/condense-modal/header.e2e.ts b/core/src/components/header/test/condense-modal/header.e2e.ts new file mode 100644 index 00000000000..72cc6a7b706 --- /dev/null +++ b/core/src/components/header/test/condense-modal/header.e2e.ts @@ -0,0 +1,71 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This test verifies that collapsible headers with mode="ios" work correctly + * when both iOS and MD stylesheets are loaded. The bug occurred because + * `.header-collapse-condense { display: none }` in the MD stylesheet was not + * scoped to `.header-md`, causing it to hide iOS condense headers when both + * stylesheets were present. + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('header: condense with iOS mode override'), () => { + test('should show iOS condense header when both MD and iOS styles are loaded', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29929', + }); + + // Include both an MD header and an iOS modal to force both stylesheets to load + await page.setContent( + ` + + + + MD Header + + + + + + + + Header + + + + + + Large Header + + +

Content

+ + + `, + config + ); + + const modal = page.locator('ion-modal'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await modal.evaluate((el: HTMLIonModalElement) => el.present()); + await ionModalDidPresent.next(); + + const largeTitleHeader = modal.locator('#largeTitleHeader'); + + // The large title header should be visible, not hidden by MD styles + await expect(largeTitleHeader).toBeVisible(); + + // Verify it has the iOS mode class + await expect(largeTitleHeader).toHaveClass(/header-ios/); + + // Verify it does NOT have display: none applied + // This would fail if the MD stylesheet's unscoped .header-collapse-condense rule applies + const display = await largeTitleHeader.evaluate((el) => { + return window.getComputedStyle(el).display; + }); + expect(display).not.toBe('none'); + }); + }); +}); diff --git a/core/src/components/header/test/condense-modal/index.html b/core/src/components/header/test/condense-modal/index.html deleted file mode 100644 index cb98b855542..00000000000 --- a/core/src/components/header/test/condense-modal/index.html +++ /dev/null @@ -1,144 +0,0 @@ - - - - - Modal - Basic - - - - - - - - - - - -
- - - Header condense-modal - - - - - - -
- - - - -