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

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;

core/src/components/modal/utils.ts

@@ -1,8 +1,6 @@
 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