fix(modal): clarity around mobile/portrait terminology

Author: ShaneK

core/src/components/modal/animations/ios.enter.ts

@@ -48,7 +48,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
   }
 
   if (presentingEl) {
-    const isMobile = window.innerWidth < 768;
+    const isPortrait = window.innerWidth < 768;
     const hasCardModal =
       presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined;
     const presentingElRoot = getElementRoot(presentingEl);
@@ -61,7 +61,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
 
     const bodyEl = document.body;
 
-    if (isMobile) {
+    if (isPortrait) {
       /**
        * Fallback for browsers that does not support `max()` (ex: Firefox)
        * No need to worry about statusbar padding since engines like Gecko

core/src/components/modal/animations/ios.leave.ts

@@ -35,7 +35,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
     .addAnimation(wrapperAnimation);
 
   if (presentingEl) {
-    const isMobile = window.innerWidth < 768;
+    const isPortrait = window.innerWidth < 768;
     const hasCardModal =
       presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined;
     const presentingElRoot = getElementRoot(presentingEl);
@@ -61,7 +61,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
 
     const bodyEl = document.body;
 
-    if (isMobile) {
+    if (isPortrait) {
       const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
       const modalTransform = hasCardModal ? '-10px' : transformOffset;
       const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;

core/src/components/modal/animations/ios.transition.ts

@@ -6,11 +6,11 @@ import { SwipeToCloseDefaults } from '../gestures/swipe-to-close';
 import type { ModalAnimationOptions } from '../modal-interface';
 
 /**
- * Transition animation from mobile view to portrait view
- * This handles the case where a card modal is open in mobile view
- * and the user switches to portrait view
+ * Transition animation from portrait view to landscape view
+ * This handles the case where a card modal is open in portrait view
+ * and the user switches to landscape view
  */
-export const mobileToPortraitTransition = (
+export const portraitToLandscapeTransition = (
   baseEl: HTMLElement,
   opts: ModalAnimationOptions,
   duration = 300
@@ -19,36 +19,36 @@ export const mobileToPortraitTransition = (
 
   if (!presentingEl) {
     // No transition needed for non-card modals
-    return createAnimation('mobile-to-portrait-transition');
+    return createAnimation('portrait-to-landscape-transition');
   }
 
   const hasCardModal =
     presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined;
   const presentingElRoot = getElementRoot(presentingEl);
   const bodyEl = document.body;
 
-  const baseAnimation = createAnimation('mobile-to-portrait-transition')
+  const baseAnimation = createAnimation('portrait-to-landscape-transition')
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(duration);
 
   const presentingAnimation = createAnimation();
 
   if (!hasCardModal) {
-    // Non-card modal: transition from mobile state to portrait state
-    // Mobile: presentingEl has transform and body has black background
-    // Portrait: no transform, no body background, modal wrapper opacity changes
+    // Non-card modal: transition from portrait state to landscape state
+    // Portrait: presentingEl has transform and body has black background
+    // Landscape: no transform, no body background, modal wrapper opacity changes
 
     const root = getElementRoot(baseEl);
     const wrapperAnimation = createAnimation()
       .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')!)
-      .fromTo('opacity', '1', '1'); // Keep wrapper visible in portrait
+      .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
 
     const backdropAnimation = createAnimation()
       .addElement(root.querySelector('ion-backdrop')!)
       .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
 
-    // Animate presentingEl from mobile state back to normal
+    // Animate presentingEl from portrait state back to normal
     const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
@@ -62,7 +62,7 @@ export const mobileToPortraitTransition = (
 
     baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
   } else {
-    // Card modal: transition from mobile card state to portrait card state
+    // Card modal: transition from portrait card state to landscape card state
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
     const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
@@ -75,7 +75,7 @@ export const mobileToPortraitTransition = (
 
     const shadowAnimation = createAnimation()
       .addElement(presentingElRoot.querySelector('.modal-shadow')!)
-      .fromTo('opacity', '0', '0') // Shadow stays hidden in portrait for card modals
+      .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
       .fromTo('transform', fromTransform, toTransform);
 
     baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
@@ -85,11 +85,11 @@ export const mobileToPortraitTransition = (
 };
 
 /**
- * Transition animation from portrait view to mobile view
- * This handles the case where a card modal is open in portrait view
- * and the user switches to mobile view
+ * Transition animation from landscape view to portrait view
+ * This handles the case where a card modal is open in landscape view
+ * and the user switches to portrait view
  */
-export const portraitToMobileTransition = (
+export const landscapeToPortraitTransition = (
   baseEl: HTMLElement,
   opts: ModalAnimationOptions,
   duration = 300
@@ -98,23 +98,23 @@ export const portraitToMobileTransition = (
 
   if (!presentingEl) {
     // No transition needed for non-card modals
-    return createAnimation('portrait-to-mobile-transition');
+    return createAnimation('landscape-to-portrait-transition');
   }
 
   const hasCardModal =
     presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined;
   const presentingElRoot = getElementRoot(presentingEl);
   const bodyEl = document.body;
 
-  const baseAnimation = createAnimation('portrait-to-mobile-transition')
+  const baseAnimation = createAnimation('landscape-to-portrait-transition')
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(duration);
 
   const presentingAnimation = createAnimation();
 
   if (!hasCardModal) {
-    // Non-card modal: transition from portrait state to mobile state
+    // Non-card modal: transition from landscape state to portrait state
     const root = getElementRoot(baseEl);
     const wrapperAnimation = createAnimation()
       .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')!)
@@ -124,7 +124,7 @@ export const portraitToMobileTransition = (
       .addElement(root.querySelector('ion-backdrop')!)
       .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
 
-    // Animate presentingEl from normal state to mobile state
+    // Animate presentingEl from normal state to portrait state
     const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
@@ -138,7 +138,7 @@ export const portraitToMobileTransition = (
 
     baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
   } else {
-    // Card modal: transition from portrait card state to mobile card state
+    // Card modal: transition from landscape card state to portrait card state
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
     const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;

core/src/components/modal/modal.tsx

@@ -37,7 +37,7 @@ import type { OverlayEventDetail } from '../../utils/overlays-interface';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
-import { mobileToPortraitTransition, portraitToMobileTransition } from './animations/ios.transition';
+import { portraitToLandscapeTransition, landscapeToPortraitTransition } from './animations/ios.transition';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 import type { MoveSheetToBreakpointOptions } from './gestures/sheet';
@@ -91,9 +91,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
   // Whether or not modal is being dismissed via gesture
   private gestureAnimationDismissing = false;
 
-  // View transition properties for handling mobile/portrait switches
+  // View transition properties for handling portrait/landscape switches
   private resizeListener?: () => void;
-  private currentViewIsMobile?: boolean;
+  private currentViewIsPortrait?: boolean;
   private viewTransitionAnimation?: Animation;
 
   lastFocus?: HTMLElement;
@@ -981,7 +981,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
 
     // Set initial view state
-    this.currentViewIsMobile = window.innerWidth < 768;
+    this.currentViewIsPortrait = window.innerWidth < 768;
 
     // Create debounced resize handler
     let resizeTimeout: any;
@@ -996,10 +996,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   private handleViewTransition() {
-    const isMobile = window.innerWidth < 768;
+    const isPortrait = window.innerWidth < 768;
 
     // Only transition if view state actually changed
-    if (this.currentViewIsMobile === isMobile) {
+    if (this.currentViewIsPortrait === isPortrait) {
       return;
     }
 
@@ -1016,17 +1016,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     // Create transition animation
     let transitionAnimation: Animation;
-    if (this.currentViewIsMobile && !isMobile) {
-      // Mobile to portrait transition
-      transitionAnimation = mobileToPortraitTransition(this.el, {
+    if (this.currentViewIsPortrait && !isPortrait) {
+      // Portrait to landscape transition
+      transitionAnimation = portraitToLandscapeTransition(this.el, {
         presentingEl: presentingElement,
         currentBreakpoint: this.currentBreakpoint,
         backdropBreakpoint: this.backdropBreakpoint,
         expandToScroll: this.expandToScroll,
       });
     } else {
-      // Portrait to mobile transition
-      transitionAnimation = portraitToMobileTransition(this.el, {
+      // Landscape to portrait transition
+      transitionAnimation = landscapeToPortraitTransition(this.el, {
         presentingEl: presentingElement,
         currentBreakpoint: this.currentBreakpoint,
         backdropBreakpoint: this.backdropBreakpoint,
@@ -1035,7 +1035,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
 
     // Update state and play animation
-    this.currentViewIsMobile = isMobile;
+    this.currentViewIsPortrait = isPortrait;
     this.viewTransitionAnimation = transitionAnimation;
 
     transitionAnimation.play().then(() => {