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

@@ -145,61 +145,9 @@
           >
             Backdrop is inactive
           </button>
-          <ion-button id="open-footer-test-modal" expand="block">Present Sheet Modal (footer test)</ion-button>
-          <ion-modal class="footer-test-modal" mode="ios" trigger="open-footer-test-modal" initial-breakpoint="0.25" expand-to-scroll="false"
-          >
-            <ion-content>
-              <ion-text>
-                <p>This is a modal!!</p>
-              </ion-text>
-              <ion-list>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-                <ion-item>Item</ion-item>
-              </ion-list>
-              The end!
-            </ion-content>
-            <ion-footer slot="footer">
-              <ion-toolbar>
-                Hello world!
-                <ion-textarea placeholder="This is a textarea" />
-              </ion-toolbar>
-            </ion-footer>
-          </ion-modal>
-          <script>
-            var footerTestModal = document.getElementsByClassName('footer-test-modal')[0];
-            footerTestModal.breakpoints = [0, 0.25, 0.5, 0.75, 1];
-          </script>
 
-          <  <div class="grid-item red"></div>
+          <div class="grid">
+            <div class="grid-item red"></div>
             <div class="grid-item green"></div>
             <div class="grid-item blue"></div>
             <div class="grid-item yellow"></div>

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);
 }