Following @tanner-reits' suggested approach & fixing snapshot tests

Author: OS-pedrolourenco

core/src/components/modal/animations/sheet.ts

@@ -4,23 +4,19 @@ import type { ModalAnimationOptions } from '../modal-interface';
 import { getBackdropValueForSheet } from '../utils';
 
 export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
-  const { currentBreakpoint, backdropBreakpoint } = opts;
+  const { currentBreakpoint, backdropBreakpoint, staticBackdropOpacity } = opts;
 
   /**
    * If the backdropBreakpoint is undefined, then the backdrop
    * should always fade in. If the backdropBreakpoint came before the
    * current breakpoint, then the backdrop should be fading in.
    */
   const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint!;
-
-  let initialBackdropOpacity = '0';
-  if (opts.initialBackdropOpacity) {
-    initialBackdropOpacity = opts.initialBackdropOpacity;
-  } else if (shouldShowBackdrop) {
-    initialBackdropOpacity = `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`;
-  }
-
-  const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdropOpacity);
+  const initialBackdrop = shouldShowBackdrop
+    ? `calc(var(--backdrop-opacity) * ${staticBackdropOpacity ? 1 : currentBreakpoint!})`
+    : '0';
+  console.log('initial backdrop', initialBackdrop);
+  const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
 
   if (shouldShowBackdrop) {
     backdropAnimation
@@ -46,17 +42,17 @@ export const createSheetLeaveAnimation = (opts: ModalAnimationOptions) => {
    * is defined, so we need to account for that offset by figuring out
    * what the current backdrop value should be.
    */
-  const backdropOpacityValue = opts.backdropOpacityValue
-    ? opts.backdropOpacityValue
-    : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint!, backdropBreakpoint!)})`;
-
+  const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(
+    currentBreakpoint!,
+    backdropBreakpoint!
+  )})`;
   const defaultBackdrop = [
-    { offset: 0, opacity: backdropOpacityValue },
+    { offset: 0, opacity: backdropValue },
     { offset: 1, opacity: 0 },
   ];
 
   const customBackdrop = [
-    { offset: 0, opacity: backdropOpacityValue },
+    { offset: 0, opacity: backdropValue },
     { offset: backdropBreakpoint!, opacity: 0 },
     { offset: 1, opacity: 0 },
   ];

core/src/components/modal/gestures/sheet.ts

@@ -1,12 +1,11 @@
-import { getIonTheme } from '@global/ionic-global';
 import { isIonContent, findClosestIonContent } from '@utils/content';
 import { createGesture } from '@utils/gesture';
 import { clamp, raf, getElementRoot } from '@utils/helpers';
 import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
 
 import type { Animation } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
-import { getBackdropValueForSheet, staticBackdropOpacity } from '../utils';
+import { getBackdropValueForSheet } from '../utils';
 
 import { calculateSpringStep, handleCanDismiss } from './utils';
 
@@ -52,39 +51,27 @@ export const createSheetGesture = (
   breakpoints: number[] = [],
   getCurrentBreakpoint: () => number,
   onDismiss: () => void,
-  onBreakpointChange: (breakpoint: number) => void
+  onBreakpointChange: (breakpoint: number) => void,
+  staticBackdropOpacity: boolean
 ) => {
-  const theme = getIonTheme(baseEl);
   // Defaults for the sheet swipe animation
   const defaultBackdrop = [
     { offset: 0, opacity: 'var(--backdrop-opacity)' },
-    { offset: 1, opacity: 0.01 },
+    { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0.01 },
   ];
 
   const customBackdrop = [
     { offset: 0, opacity: 'var(--backdrop-opacity)' },
-    { offset: 1 - backdropBreakpoint, opacity: 0 },
-    { offset: 1, opacity: 0 },
+    { offset: 1 - backdropBreakpoint, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
+    { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
   ];
 
-  const ionicThemeBackdrop = [
-    { offset: 0, opacity: staticBackdropOpacity },
-    { offset: 1, opacity: staticBackdropOpacity },
-  ];
-
-  let backdropKeyframes = defaultBackdrop;
-  if (theme === 'ionic') {
-    backdropKeyframes = ionicThemeBackdrop;
-  } else if (backdropBreakpoint !== 0) {
-    backdropKeyframes = customBackdrop;
-  }
-
   const SheetDefaults = {
     WRAPPER_KEYFRAMES: [
       { offset: 0, transform: 'translateY(0%)' },
       { offset: 1, transform: 'translateY(100%)' },
     ],
-    BACKDROP_KEYFRAMES: backdropKeyframes,
+    BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
   };
 
   const contentEl = baseEl.querySelector('ion-content');
@@ -323,35 +310,20 @@ export const createSheetGesture = (
         { offset: 1, transform: `translateY(${(1 - snapToBreakpoint) * 100}%)` },
       ]);
 
-      backdropAnimation.keyframes(
-        theme === 'ionic'
-          ? [
-              {
-                offset: 0,
-                opacity: staticBackdropOpacity,
-              },
-              {
-                offset: 1,
-                opacity: staticBackdropOpacity,
-              },
-            ]
-          : [
-              {
-                offset: 0,
-                opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(
-                  1 - breakpointOffset,
-                  backdropBreakpoint
-                )})`,
-              },
-              {
-                offset: 1,
-                opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(
-                  snapToBreakpoint,
-                  backdropBreakpoint
-                )})`,
-              },
-            ]
-      );
+      backdropAnimation.keyframes([
+        {
+          offset: 0,
+          opacity: staticBackdropOpacity
+            ? 'var(--backdrop-opacity)'
+            : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
+        },
+        {
+          offset: 1,
+          opacity: staticBackdropOpacity
+            ? 'var(--backdrop-opacity)'
+            : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
+        },
+      ]);
 
       animation.progressStep(0);
     }

core/src/components/modal/modal-interface.ts

@@ -27,8 +27,7 @@ export interface ModalAnimationOptions {
   presentingEl?: HTMLElement;
   currentBreakpoint?: number;
   backdropBreakpoint?: number;
-  initialBackdropOpacity?: string;
-  backdropOpacityValue?: string;
+  staticBackdropOpacity?: boolean;
 }
 
 export interface ModalBreakpointChangeEventDetail {

core/src/components/modal/modal.ionic.scss

@@ -7,7 +7,7 @@
 :host {
   --background: #{globals.$ionic-color-base-white};
   --box-shadow: #{globals.$ionic-elevation-300};
-  --backdrop-opacity: 1;
+  --backdrop-opacity: 0.7;
 
   color: globals.$ionic-color-neutral-1200;
 }

core/src/components/modal/modal.tsx

@@ -31,7 +31,6 @@ import type {
   FrameworkDelegate,
   Gesture,
   OverlayInterface,
-  Theme,
 } from '../../interface';
 import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
@@ -44,7 +43,7 @@ import type { MoveSheetToBreakpointOptions } from './gestures/sheet';
 import { createSheetGesture } from './gestures/sheet';
 import { createSwipeToCloseGesture } from './gestures/swipe-to-close';
 import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from './modal-interface';
-import { setCardStatusBarDark, setCardStatusBarDefault, staticBackdropOpacity } from './utils';
+import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
 
 // TODO(FW-2832): types
 
@@ -83,10 +82,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private inheritedAttributes: Attributes = {};
   private statusBarStyle?: StatusBarStyle;
 
-  get theme(): Theme {
-    return getIonTheme(this);
-  }
-
   private inline = false;
   private workingDelegate?: FrameworkDelegate;
 
@@ -578,8 +573,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
-      initialBackdropOpacity: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
-      backdropOpacityValue: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
+      staticBackdropOpacity: getIonTheme(this) === 'ionic',
     });
 
     /* tslint:disable-next-line */
@@ -686,7 +680,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       presentingEl: this.presentingElement,
       currentBreakpoint: initialBreakpoint,
       backdropBreakpoint,
-      theme: getIonTheme(this),
+      staticBackdropOpacity: getIonTheme(this) === 'ionic',
     }));
 
     ani.progressStart(true, 1);
@@ -706,7 +700,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
           this.currentBreakpoint = breakpoint;
           this.ionBreakpointDidChange.emit({ breakpoint });
         }
-      }
+      },
+      getIonTheme(this) === 'ionic'
     );
 
     this.gesture = gesture;
@@ -797,8 +792,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
         presentingEl: presentingElement,
         currentBreakpoint: this.currentBreakpoint ?? this.initialBreakpoint,
         backdropBreakpoint: this.backdropBreakpoint,
-        initialBackdropOpacity: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
-        backdropOpacityValue: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
       }
     );
 
@@ -1059,13 +1052,10 @@ interface ModalOverlayOptions {
    */
   backdropBreakpoint: number;
   /**
-   * The initial backdrop opacity value
-   */
-  initialBackdropOpacity?: string;
-  /**
-   * The current backdrop opacity value
+   * Defines whether the backdrop should have a
+   * static opacity.
    */
-  backdropOpacityValue?: string;
+  staticBackdropOpacity?: boolean;
 }
 
 type ModalPresentOptions = ModalOverlayOptions;