From 1f4f8eb6ca2b8adb543ade83c309177ac7f2044d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 11 Nov 2021 10:01:53 -0500 Subject: [PATCH] fix(modal): border radius is now correctly applied to card modals (#24204) --- core/src/components/modal/modal.ios.scss | 9 +- core/src/components/modal/test/card/e2e.ts | 10 ++ .../src/components/modal/test/card/index.html | 94 +++++++++++++++++++ core/src/css/core.scss | 25 ++--- 4 files changed, 125 insertions(+), 13 deletions(-) create mode 100644 core/src/components/modal/test/card/e2e.ts create mode 100644 core/src/components/modal/test/card/index.html diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index d293f2500b8..76404e73917 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -8,6 +8,11 @@ --backdrop-opacity: var(--ion-backdrop-opacity, 0.4); } +:host(.modal-card), +:host(.modal-sheet) { + --border-radius: #{$modal-ios-border-radius}; +} + @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { :host { --border-radius: #{$modal-ios-border-radius}; @@ -36,7 +41,7 @@ } :host(.modal-card) .modal-wrapper { - @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); + @include border-radius(var(--border-radius), var(--border-radius), 0, 0); } :host(.modal-card) { @@ -76,5 +81,5 @@ // -------------------------------------------------- :host(.modal-sheet) .modal-wrapper { - @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); + @include border-radius(var(--border-radius), var(--border-radius), 0, 0); } diff --git a/core/src/components/modal/test/card/e2e.ts b/core/src/components/modal/test/card/e2e.ts new file mode 100644 index 00000000000..33e1bee8847 --- /dev/null +++ b/core/src/components/modal/test/card/e2e.ts @@ -0,0 +1,10 @@ +import { testModal } from '../test.utils'; + +const DIRECTORY = 'card'; + +test('modal: card', async () => { + await testModal(DIRECTORY, '#card', true); +}); +test('modal: card - custom', async () => { + await testModal(DIRECTORY, '#card-custom', true); +}); diff --git a/core/src/components/modal/test/card/index.html b/core/src/components/modal/test/card/index.html new file mode 100644 index 00000000000..e90a126c899 --- /dev/null +++ b/core/src/components/modal/test/card/index.html @@ -0,0 +1,94 @@ + + + + + + Modal - Card + + + + + + + + + + + + + + +
+ + + Card + + + + + Card Modal + Card Modal Custom Radius + +
+ + + + + + diff --git a/core/src/css/core.scss b/core/src/css/core.scss index d3440a35834..819e30d14f5 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -65,17 +65,6 @@ html.ios ion-modal ion-toolbar { padding-left: calc(var(--ion-safe-area-left) + 8px); } -/** - * .ion-page needs to explicitly set - * the border radius in WebKit otherwise - * modals will not show border radius properly. - * Do not use inherit as that will not - * work with shadow dom in this case. - */ -html.ios ion-modal .ion-page { - border-radius: 10px 10px 0 0; -} - /** * Card style modal on iPadOS * should only have backdrop on first instance. @@ -110,6 +99,20 @@ ion-modal:not(.overlay-hidden) ~ ion-modal { --box-shadow: none; } +/** + * This works around a bug in WebKit where the + * content will overflow outside of the bottom border + * radius when re-painting. As long as a single + * border radius value is set on .ion-page, this + * issue does not happen. We set the top left radius + * here because the top left corner will always have a + * radius no matter the platform. + * This behavior only applies to card modals. + */ +html.ios ion-modal.modal-card .ion-page { + border-top-left-radius: var(--border-radius); +} + // Ionic Colors // -------------------------------------------------- // Generates the color classes and variables based on the