refactor(modal): add requested changes

Author: thetaPC

core/api.txt

@@ -1074,6 +1074,7 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
 ion-modal,prop,canDismiss,((data?: any, role?: string | undefined) => Promise<boolean>) | boolean,true,false,false
 ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-modal,prop,expandToScroll,boolean,true,false,false
 ion-modal,prop,focusTrap,boolean,true,false,false
 ion-modal,prop,handle,boolean | undefined,undefined,false,false
 ion-modal,prop,handleBehavior,"cycle" | "none" | undefined,'none',false,false
@@ -1085,7 +1086,6 @@ ion-modal,prop,keyboardClose,boolean,true,false,false
 ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
-ion-modal,prop,scrollAtEdge,boolean,true,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>

core/src/components.d.ts

@@ -1731,6 +1731,10 @@ export namespace Components {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * Determines whether or not the sheet modal will only scroll/drag the content when fully expanded. This will only take effect when the `breakpoints` and `initialBreakpoint` properties are set.  If the value is `true`, the modal will only scroll when fully expanded. If the value is `false`, the modal will scroll at any breakpoint.
+         */
+        "expandToScroll": boolean;
         /**
           * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
          */
@@ -1793,10 +1797,6 @@ export namespace Components {
           * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
          */
         "presentingElement"?: HTMLElement;
-        /**
-          * Determines whether or not the sheet modal will only scroll when fully expanded.  If the value is `true`, the modal will only scroll when fully expanded. If the value is `false`, the modal will scroll at any breakpoint.
-         */
-        "scrollAtEdge": boolean;
         /**
           * Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.
          */
@@ -6536,6 +6536,10 @@ declare namespace LocalJSX {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * Determines whether or not the sheet modal will only scroll/drag the content when fully expanded. This will only take effect when the `breakpoints` and `initialBreakpoint` properties are set.  If the value is `true`, the modal will only scroll when fully expanded. If the value is `false`, the modal will scroll at any breakpoint.
+         */
+        "expandToScroll"?: boolean;
         /**
           * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
          */
@@ -6622,10 +6626,6 @@ declare namespace LocalJSX {
           * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
          */
         "presentingElement"?: HTMLElement;
-        /**
-          * Determines whether or not the sheet modal will only scroll when fully expanded.  If the value is `true`, the modal will only scroll when fully expanded. If the value is `false`, the modal will scroll at any breakpoint.
-         */
-        "scrollAtEdge"?: boolean;
         /**
           * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
          */

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

@@ -24,7 +24,7 @@ const createEnterAnimation = () => {
  * iOS Modal Enter Animation for the Card presentation style
  */
 export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
-  const { presentingEl, currentBreakpoint, scrollAtEdge } = opts;
+  const { presentingEl, currentBreakpoint, expandToScroll } = opts;
   const root = getElementRoot(baseEl);
   const { wrapperAnimation, backdropAnimation, contentAnimation } =
     currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
@@ -35,15 +35,15 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
 
   // The content animation is only added if scrolling is enabled for
   // all the breakpoints.
-  !scrollAtEdge && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+  !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
 
   const baseAnimation = createAnimation('entering-base')
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(500)
     .addAnimation([wrapperAnimation])
     .beforeAddWrite(() => {
-      if (scrollAtEdge) {
+      if (expandToScroll) {
         // Scroll can only be done when the modal is fully expanded.
         return;
       }

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

@@ -19,7 +19,7 @@ const createLeaveAnimation = () => {
  * iOS Modal Leave Animation
  */
 export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions, duration = 500): Animation => {
-  const { presentingEl, currentBreakpoint, scrollAtEdge } = opts;
+  const { presentingEl, currentBreakpoint, expandToScroll } = opts;
   const root = getElementRoot(baseEl);
   const { wrapperAnimation, backdropAnimation } =
     currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
@@ -34,13 +34,13 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
     .duration(duration)
     .addAnimation(wrapperAnimation)
     .beforeAddWrite(() => {
-      if (scrollAtEdge) {
+      if (expandToScroll) {
         // Scroll can only be done when the modal is fully expanded.
         return;
       }
 
       /**
-       * If scrollAtEdge is disabled, we need to swap
+       * If expandToScroll is disabled, we need to swap
        * the visibility to the original, so the footer
        *  dismisses with the modal and doesn't stay
        *  until the modal is removed from the DOM.

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

@@ -26,7 +26,7 @@ const createEnterAnimation = () => {
  * Md Modal Enter Animation
  */
 export const mdEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
-  const { currentBreakpoint, scrollAtEdge } = opts;
+  const { currentBreakpoint, expandToScroll } = opts;
   const root = getElementRoot(baseEl);
   const { wrapperAnimation, backdropAnimation, contentAnimation } =
     currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
@@ -37,15 +37,15 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOption
 
   // The content animation is only added if scrolling is enabled for
   // all the breakpoints.
-  scrollAtEdge && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+  expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
 
   const baseAnimation = createAnimation()
     .addElement(baseEl)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(280)
     .addAnimation([backdropAnimation, wrapperAnimation])
     .beforeAddWrite(() => {
-      if (scrollAtEdge) {
+      if (expandToScroll) {
         // Scroll can only be done when the modal is fully expanded.
         return;
       }

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

@@ -21,7 +21,7 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 export const mdLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
-  const { currentBreakpoint, scrollAtEdge } = opts;
+  const { currentBreakpoint, expandToScroll } = opts;
   const root = getElementRoot(baseEl);
   const { wrapperAnimation, backdropAnimation } =
     currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
@@ -34,13 +34,13 @@ export const mdLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOption
     .duration(200)
     .addAnimation([backdropAnimation, wrapperAnimation])
     .beforeAddWrite(() => {
-      if (scrollAtEdge) {
+      if (expandToScroll) {
         // Scroll can only be done when the modal is fully expanded.
         return;
       }
 
       /**
-       * If scrollAtEdge is disabled, we need to swap
+       * If expandToScroll is disabled, we need to swap
        * the visibility to the original, so the footer
        *  dismisses with the modal and doesn't stay
        *  until the modal is removed from the DOM.

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

@@ -4,7 +4,7 @@ import type { ModalAnimationOptions } from '../modal-interface';
 import { getBackdropValueForSheet } from '../utils';
 
 export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
-  const { currentBreakpoint, backdropBreakpoint, scrollAtEdge } = opts;
+  const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
 
   /**
    * If the backdropBreakpoint is undefined, then the backdrop
@@ -32,7 +32,7 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
   /**
    * This allows the content to be scrollable at any breakpoint.
    */
-  const contentAnimation = !scrollAtEdge
+  const contentAnimation = !expandToScroll
     ? createAnimation('contentAnimation').keyframes([
         { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint!) * 100}%` },
         { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint! * 100}%` },

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

@@ -49,7 +49,7 @@ export const createSheetGesture = (
   backdropBreakpoint: number,
   animation: Animation,
   breakpoints: number[] = [],
-  scrollAtEdge: boolean,
+  expandToScroll: boolean,
   getCurrentBreakpoint: () => number,
   onDismiss: () => void,
   onBreakpointChange: (breakpoint: number) => void
@@ -117,7 +117,7 @@ export const createSheetGesture = (
   };
 
   /**
-   * Used when `scrollAtEdge` is disabled.
+   * Used when `expandToScroll` is disabled.
    * Changes the footer that is currently visible
    * @param footer - The footer to show
    */
@@ -171,7 +171,7 @@ export const createSheetGesture = (
     }
   }
 
-  if (contentEl && currentBreakpoint !== maxBreakpoint && scrollAtEdge) {
+  if (contentEl && currentBreakpoint !== maxBreakpoint && expandToScroll) {
     contentEl.scrollY = false;
   }
 
@@ -188,10 +188,10 @@ export const createSheetGesture = (
     currentBreakpoint = getCurrentBreakpoint();
 
     /**
-     * If we have scrollAtEdge disabled, we should not allow the swipe gesture to start
+     * If we have expandToScroll disabled, we should not allow the swipe gesture to start
      * if the content is being swiped.
      */
-    if (!scrollAtEdge && contentEl) {
+    if (!expandToScroll && contentEl) {
       return false;
     }
 
@@ -229,12 +229,12 @@ export const createSheetGesture = (
     canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
 
     /**
-     * If scrollAtEdge is disabled, we need to swap
+     * If expandToScroll is disabled, we need to swap
      * the visibility to the original, so if the modal
      * is dismissed, the footer dismisses with the modal
      * and doesn't stay on the screen after the modal is gone.
      */
-    if (!scrollAtEdge) {
+    if (!expandToScroll) {
       swapFooterVisibility('original');
     }
 
@@ -376,7 +376,7 @@ export const createSheetGesture = (
 
       if (contentAnimation) {
         /**
-         * The modal content should scroll at any breakpoint when scrollAtEdge
+         * The modal content should scroll at any breakpoint when expandToScroll
          * is disabled. In order to do this, the content needs to be completely
          * viewable so scrolling can access everything. Othewise, the default
          * behavior would show the content off the screen and only allow
@@ -398,11 +398,11 @@ export const createSheetGesture = (
     gesture.enable(false);
 
     /**
-     * If scrollAtEdge is disabled, we need to swap
+     * If expandToScroll is disabled, we need to swap
      * the visibility to the cloned one so the footer
      * doesn't flicker when the sheet's height is animated.
      */
-    if (!scrollAtEdge && shouldRemainOpen) {
+    if (!expandToScroll && shouldRemainOpen) {
       swapFooterVisibility('cloned');
     }
 
@@ -420,7 +420,7 @@ export const createSheetGesture = (
      * for when scrolling is re-enabled. Native iOS allows for scrolling on the
      * sheet modal as soon as the gesture is released, so we align with that.
      */
-    if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !scrollAtEdge)) {
+    if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
       contentEl.scrollY = true;
     }
 

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

@@ -31,7 +31,7 @@ export interface ModalAnimationOptions {
   presentingEl?: HTMLElement;
   currentBreakpoint?: number;
   backdropBreakpoint?: number;
-  scrollAtEdge: boolean;
+  expandToScroll: boolean;
 }
 
 export interface ModalBreakpointChangeEventDetail {

core/src/components/modal/modal.ios.scss

@@ -96,9 +96,7 @@
  * `core.scss` file. However, there's a workaround that requires
  * a cloned footer to be added to the modal. This is only necessary
  * because the core styles are not being applied to the cloned footer.
- * It's important to update the padding value when the core styles are
- * updated.
  */
-:host(.modal-sheet.modal-scroll-all) ion-footer ion-toolbar:first-of-type {
-  padding-top: 6px;
+:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type {
+  padding-top: $modal-sheet-padding-top;
 }