diff --git a/core/src/components/modal/test/custom-dialog/index.html b/core/src/components/modal/test/custom-dialog/index.html new file mode 100644 index 0000000000..0f51327ff8 --- /dev/null +++ b/core/src/components/modal/test/custom-dialog/index.html @@ -0,0 +1,80 @@ + + + + + Modal - Custom Dialog + + + + + + + + + + + +
+ + + Modal - Custom Dialog + + + + + Open Custom Dialog + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + +
+ + + diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts b/core/src/components/modal/test/custom-dialog/modal.e2e.ts new file mode 100644 index 0000000000..2b167abd0b --- /dev/null +++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts @@ -0,0 +1,21 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('modal: custom dialog', () => { + test('should size custom modal correctly', async ({ page }, testInfo) => { + test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.'); + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/24080', + }); + + await page.goto('/src/components/modal/test/custom-dialog'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#custom-modal'); + + await ionModalDidPresent.next(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-custom-dialog-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8b34c28985 Binary files /dev/null and b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d3fb909271 Binary files /dev/null and b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f4fe7228b2 Binary files /dev/null and b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..251e40c73b Binary files /dev/null and b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..61dc5c44a9 Binary files /dev/null and b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..45659afd3c Binary files /dev/null and b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 2065bc82b7..2ba1779c8b 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -162,6 +162,22 @@ html.ios ion-modal.modal-card .ion-page { z-index: $z-index-page-container; } +/** + * When making custom dialogs, using + * ion-content is not required. As a result, + * some developers may wish to have dialogs + * that are automatically sized by the browser. + * These changes allow certain dimension values + * such as fit-content to work correctly. + */ +ion-modal .ion-page { + position: relative; + + contain: layout style; + + height: 100%; +} + .split-pane-visible > .ion-page.split-pane-main { position: relative; }