Adding static backdrop behaviour to modal when using ionic theme

Author: OS-pedrolourenco

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

@@ -1,7 +1,7 @@
 import { createAnimation } from '@utils/animation/animation';
 
 import type { ModalAnimationOptions } from '../modal-interface';
-import { getBackdropValueForSheet } from '../utils';
+import { getBackdropValueForSheet, staticBackdropOpacity } from '../utils';
 
 export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
   const { currentBreakpoint, backdropBreakpoint } = opts;
@@ -12,7 +12,13 @@ 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) * ${currentBreakpoint!})` : '0';
+
+  const initialBackdrop =
+    opts.theme === 'ionic'
+      ? staticBackdropOpacity
+      : shouldShowBackdrop
+      ? `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`
+      : '0';
 
   const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
 
@@ -40,10 +46,11 @@ 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 backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(
-    currentBreakpoint!,
-    backdropBreakpoint!
-  )})`;
+  const backdropValue =
+    opts.theme === 'ionic'
+      ? staticBackdropOpacity
+      : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint!, backdropBreakpoint!)})`;
+
   const defaultBackdrop = [
     { offset: 0, opacity: backdropValue },
     { offset: 1, opacity: 0 },

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

@@ -1,11 +1,12 @@
+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 } from '../utils';
+import { getBackdropValueForSheet, staticBackdropOpacity } from '../utils';
 
 import { calculateSpringStep, handleCanDismiss } from './utils';
 
@@ -53,6 +54,7 @@ export const createSheetGesture = (
   onDismiss: () => void,
   onBreakpointChange: (breakpoint: number) => void
 ) => {
+  const theme = getIonTheme(baseEl);
   // Defaults for the sheet swipe animation
   const defaultBackdrop = [
     { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -65,12 +67,18 @@ export const createSheetGesture = (
     { offset: 1, opacity: 0 },
   ];
 
+  const ionicThemeBackdrop = [
+    { offset: 0, opacity: staticBackdropOpacity },
+    { offset: 1, opacity: staticBackdropOpacity },
+  ];
+
   const SheetDefaults = {
     WRAPPER_KEYFRAMES: [
       { offset: 0, transform: 'translateY(0%)' },
       { offset: 1, transform: 'translateY(100%)' },
     ],
-    BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
+    BACKDROP_KEYFRAMES:
+      theme === 'ionic' ? ionicThemeBackdrop : backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
   };
 
   const contentEl = baseEl.querySelector('ion-content');
@@ -309,19 +317,35 @@ export const createSheetGesture = (
         { offset: 1, transform: `translateY(${(1 - snapToBreakpoint) * 100}%)` },
       ]);
 
-      backdropAnimation.keyframes([
-        {
-          offset: 0,
-          opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(
-            1 - breakpointOffset,
-            backdropBreakpoint
-          )})`,
-        },
-        {
-          offset: 1,
-          opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
-        },
-      ]);
+      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
+                )})`,
+              },
+            ]
+      );
 
       animation.progressStep(0);
     }

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

@@ -1,6 +1,6 @@
 import type { OverlayOptions } from '@utils/overlays-interface';
 
-import type { ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
+import type { ComponentProps, ComponentRef, FrameworkDelegate, Theme } from '../../interface';
 
 export interface ModalOptions<T extends ComponentRef = ComponentRef> extends OverlayOptions {
   component: T;
@@ -27,6 +27,7 @@ export interface ModalAnimationOptions {
   presentingEl?: HTMLElement;
   currentBreakpoint?: number;
   backdropBreakpoint?: number;
+  theme: Theme;
 }
 
 export interface ModalBreakpointChangeEventDetail {

core/src/components/modal/modal.tsx

@@ -31,6 +31,7 @@ import type {
   FrameworkDelegate,
   Gesture,
   OverlayInterface,
+  Theme,
 } from '../../interface';
 import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
@@ -573,6 +574,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
+      theme: getIonTheme(this),
     });
 
     /* tslint:disable-next-line */
@@ -789,6 +791,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
         presentingEl: presentingElement,
         currentBreakpoint: this.currentBreakpoint ?? this.initialBreakpoint,
         backdropBreakpoint: this.backdropBreakpoint,
+        theme: getIonTheme(this),
       }
     );
 
@@ -1048,6 +1051,10 @@ interface ModalOverlayOptions {
    * to fade in when using a sheet modal.
    */
   backdropBreakpoint: number;
+  /**
+   * The theme used by the sheet modal
+   */
+  theme: Theme;
 }
 
 type ModalPresentOptions = ModalOverlayOptions;

core/src/components/modal/utils.ts

@@ -1,6 +1,8 @@
 import { win } from '@utils/browser';
 import { StatusBar, Style } from '@utils/native/status-bar';
 
+export const staticBackdropOpacity = 0.7;
+
 /**
  * Use y = mx + b to
  * figure out the backdrop value