feat(modal): clicking handle advances to the next breakpoint

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

@@ -221,7 +221,7 @@ export const createSheetGesture = (
     const processedStep =
       isAttemptingDismissWithCanDismiss && secondToLastBreakpoint !== undefined
         ? secondToLastBreakpoint +
-          calculateSpringStep((step - secondToLastBreakpoint) / (maxStep - secondToLastBreakpoint))
+        calculateSpringStep((step - secondToLastBreakpoint) / (maxStep - secondToLastBreakpoint))
         : step;
 
     offset = clamp(0.0001, processedStep, maxStep);
@@ -371,5 +371,6 @@ export const createSheetGesture = (
   return {
     gesture,
     moveSheetToBreakpoint,
+    animation
   };
 };

core/src/components/modal/modal.scss

@@ -50,7 +50,8 @@
   contain: strict;
 }
 
-.modal-wrapper, ion-backdrop {
+.modal-wrapper,
+ion-backdrop {
   pointer-events: auto;
 }
 
@@ -124,9 +125,30 @@
    */
   transform: translateZ(0);
 
+  border: 0;
+
   background: var(--ion-color-step-350, #c0c0be);
 
+  cursor: pointer;
+
   z-index: 11;
+
+  &::before {
+    /**
+     * Adds a 4px tap area to the perimeter
+     * of the handle.
+     */
+    @include padding(4px, 4px, 4px, 4px);
+
+    position: absolute;
+
+    width: 36px;
+    height: 5px;
+
+    transform: translate(-50%, -50%);
+
+    content: "";
+  }
 }
 
 /**

core/src/components/modal/modal.tsx

@@ -62,6 +62,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private sortedBreakpoints?: number[];
   private keyboardOpenCallback?: () => void;
   private moveSheetToBreakpoint?: (options: MoveSheetToBreakpointOptions) => void;
+  private sheetAnimation?: Animation;
 
   private inline = false;
   private workingDelegate?: FrameworkDelegate;
@@ -550,7 +551,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     ani.progressStart(true, 1);
 
-    const { gesture, moveSheetToBreakpoint } = createSheetGesture(
+    const { gesture, moveSheetToBreakpoint, animation } = createSheetGesture(
       this.el,
       this.backdropEl!,
       wrapperEl,
@@ -570,6 +571,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     this.gesture = gesture;
     this.moveSheetToBreakpoint = moveSheetToBreakpoint;
+    this.sheetAnimation = animation;
 
     this.gesture.enable(true);
   }
@@ -719,6 +721,33 @@ export class Modal implements ComponentInterface, OverlayInterface {
     return this.currentBreakpoint;
   }
 
+  private moveToNextBreakpoint() {
+    const { breakpoints, currentBreakpoint } = this;
+    if (breakpoints && currentBreakpoint !== undefined) {
+      const allowedBreakpoints = breakpoints.filter((b) => b !== 0);
+      const currentBreakpointIndex = allowedBreakpoints.indexOf(currentBreakpoint);
+      const nextBreakpointIndex = (currentBreakpointIndex + 1) % allowedBreakpoints.length;
+      const nextBreakpoint = allowedBreakpoints[nextBreakpointIndex];
+
+      /**
+       * Sets the current breakpoint to the next available breakpoint.
+       * If the current breakpoint is the last breakpoint, we set the current
+       * breakpoint to the first non-zero breakpoint to avoid dismissing the sheet.
+       */
+      if (this.sheetAnimation?.isRunning()) {
+        this.sheetAnimation.onFinish(() => {
+          this.setCurrentBreakpoint(nextBreakpoint);
+        }, { oneTimeCallback: true });
+      } else {
+        this.setCurrentBreakpoint(nextBreakpoint);
+      }
+    }
+  }
+
+  private onHandleClick = () => {
+    this.moveToNextBreakpoint();
+  };
+
   private onBackdropTap = () => {
     this.dismiss(undefined, BACKDROP);
   };
@@ -786,7 +815,15 @@ export class Modal implements ComponentInterface, OverlayInterface {
         {mode === 'ios' && <div class="modal-shadow"></div>}
 
         <div role="dialog" class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
-          {showHandle && <div class="modal-handle" part="handle"></div>}
+          {showHandle && (
+            <button
+              class="modal-handle"
+              part="handle"
+              aria-label="Activate to adjust the size of the card overlaying the screen"
+              aria-controls={modalId}
+              onClick={this.onHandleClick}
+            ></button>
+          )}
           <slot></slot>
         </div>
       </Host>

core/src/components/modal/test/sheet/e2e.ts

@@ -207,3 +207,39 @@ describe('modal: sheet: setting the breakpoint', () => {
     expect(ionBreakpointDidChangeSpy).toHaveReceivedEventTimes(1);
   });
 });
+
+describe('clicking the handle', () => {
+  let page: E2EPage;
+
+  beforeEach(async () => {
+    page = await newE2EPage({
+      url: '/src/components/modal/test/sheet?ionic:_testing=true',
+    });
+  });
+
+  it('should advance to the next breakpoint', async () => {
+    const modal = await openModal(page, '#sheet-modal');
+    const handle = await page.find('ion-modal >>> .modal-handle');
+
+    await handle.click();
+    await modal.waitForEvent('ionBreakpointDidChange');
+
+    expect(await modal.callMethod('getCurrentBreakpoint')).toBe(0.5);
+
+    await handle.click();
+    await modal.waitForEvent('ionBreakpointDidChange');
+
+    expect(await modal.callMethod('getCurrentBreakpoint')).toBe(0.75);
+
+    await handle.click();
+    await modal.waitForEvent('ionBreakpointDidChange');
+
+    expect(await modal.callMethod('getCurrentBreakpoint')).toBe(1);
+
+    await handle.click();
+    await modal.waitForEvent('ionBreakpointDidChange');
+
+    // Advancing from the last breakpoint should change the breakpoint to the first non-zero breakpoint
+    expect(await modal.callMethod('getCurrentBreakpoint')).toBe(0.25);
+  });
+});

core/src/components/refresher/test/scroll-target/index.html

@@ -59,7 +59,7 @@
       const refresher = document.getElementById('refresher');
 
       refresher.addEventListener('ionRefresh', async function () {
-        console.log('refresh fired')
+        console.log('refresh fired');
         const data = await getAsyncData();
         items = items.concat(data);
         refresher.complete();