From a3e98269755107985c4754450ba661b8e349088f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Mon, 21 Oct 2024 12:52:37 +0100 Subject: [PATCH 1/2] Fixing enter animation when backdropBreakpoint is greater than currentBreakpoint --- core/src/components/modal/animations/sheet.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/core/src/components/modal/animations/sheet.ts b/core/src/components/modal/animations/sheet.ts index 8224effb9f5..a786f5dbf9e 100644 --- a/core/src/components/modal/animations/sheet.ts +++ b/core/src/components/modal/animations/sheet.ts @@ -12,9 +12,12 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => { * current breakpoint, then the backdrop should be fading in. */ const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint!; - const initialBackdrop = shouldShowBackdrop - ? `calc(var(--backdrop-opacity) * ${staticBackdropOpacity ? 1 : currentBreakpoint!})` - : '0'; + let initialBackdrop = '0'; + if (staticBackdropOpacity) { + initialBackdrop = 'calc(var(--backdrop-opacity)'; + } else if (shouldShowBackdrop) { + initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`; + } const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop); From 7d20b5de5a143ab9c06e9f09d3df786252d0af51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20Louren=C3=A7o?= Date: Tue, 22 Oct 2024 14:47:03 +0100 Subject: [PATCH 2/2] CR --- core/src/components/modal/modal.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index f9b161da6d1..5dc1f2e069d 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -1049,6 +1049,8 @@ interface ModalOverlayOptions { /** * The point after which the backdrop will begin * to fade in when using a sheet modal. + * This option is ignored for the ionic theme + * due to the option below. */ backdropBreakpoint: number; /**