feat(sheet): moving the footer of the sheet modal to the body while dragging to eliminate shaking

Author: ShaneK

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

@@ -138,12 +138,12 @@ export const createSheetGesture = (
     currentFooterState = newPosition;
     if (newPosition === 'stationary') {
       // Reset positioning styles to allow normal document flow
+      cachedFooterEl.classList.remove('modal-footer-moving');
       cachedFooterEl.style.removeProperty('position');
       cachedFooterEl.style.removeProperty('bottom');
       page?.style.removeProperty('padding-bottom');
 
       // Move to page
-      console.log('Moving footer to page');
       page?.appendChild(cachedFooterEl);
     } else {
       // Add padding to the parent element to prevent content from being hidden
@@ -154,6 +154,7 @@ export const createSheetGesture = (
       page?.style.setProperty('padding-bottom', `${footerHeight}px`);
 
       // Apply positioning styles to keep footer at bottom
+      cachedFooterEl.classList.add('modal-footer-moving');
       cachedFooterEl.style.setProperty('position', 'absolute');
       cachedFooterEl.style.setProperty('bottom', '0');
 
@@ -162,7 +163,6 @@ export const createSheetGesture = (
       // the position back so it will collapse correctly.
       cachedFooterYPosition = cachedFooterEl.getBoundingClientRect().top + window.scrollY;
 
-      console.log('Moving footer to body');
       document.body.appendChild(cachedFooterEl);
     }
   };

core/src/components/modal/test/sheet/index.html

@@ -188,6 +188,12 @@
               The end!
             </ion-content>
             <ion-footer slot="footer">
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Back Button Example</ion-title>
+              </ion-toolbar>
               <ion-toolbar>
                 Hello world!
                 <ion-textarea placeholder="This is a textarea" />

core/src/css/core.scss

@@ -55,7 +55,8 @@ body.backdrop-no-scroll {
  */
 html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
 html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
-html.ios ion-modal ion-footer ion-toolbar:first-of-type {
+html.ios ion-modal ion-footer ion-toolbar:first-of-type,
+html.ios ion-footer.modal-footer-moving ion-toolbar:first-of-type {
   padding-top: $modal-sheet-padding-top;
 }
 
@@ -74,7 +75,8 @@ html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
 * of toolbars while accounting for
 * safe area values when in landscape.
 */
-html.ios ion-modal ion-toolbar {
+html.ios ion-modal ion-toolbar,
+html.ios .modal-footer-moving ion-toolbar {
   padding-right: calc(var(--ion-safe-area-right) + 8px);
   padding-left: calc(var(--ion-safe-area-left) + 8px);
 }