Skip to content

feat(modal): expose isDismissing on ionDragEnd - #31002

Open
aeharding wants to merge 6 commits into
ionic-team:major-9.0from
aeharding:should-complete
Open

feat(modal): expose isDismissing on ionDragEnd#31002
aeharding wants to merge 6 commits into
ionic-team:major-9.0from
aeharding:should-complete

Conversation

@aeharding

@aeharding aeharding commented Mar 8, 2026

Copy link
Copy Markdown
Contributor

Issue number: resolves #31001


What is the current behavior?

The ionDragEnd event on card modals emits currentY, deltaY, velocityY and progress. None of these indicate whether the modal is about to dismiss, so consumers cannot react to the outcome of the gesture when the user lifts their finger.

What is the new behavior?

  • ionDragEnd now includes isDismissing on card modals. It is true when the gesture passed the dismiss threshold and the modal will animate away, and false when the modal will settle back open.
  • Updated tests.

Sheet modals are unchanged and continue to report snapBreakpoint.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Testing with Voyager and works great! aeharding/voyager#2227

Previews:

@aeharding
aeharding requested a review from a team as a code owner March 8, 2026 20:41
@aeharding
aeharding requested a review from thetaPC March 8, 2026 20:41
@vercel

vercel Bot commented Mar 8, 2026

Copy link
Copy Markdown

@aeharding is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the package: core @ionic/core package label Mar 8, 2026
@brandyscarney brandyscarney changed the title feat: expose snapBreakpoint on swipe-to-close modals feat(modal): expose snapBreakpoint on swipe-to-close modals Mar 9, 2026
@aeharding
aeharding changed the base branch from main to major-9.0 March 17, 2026 20:59
deltaY: detail.deltaY,
velocityY: detail.velocityY,
progress: calculateProgress(el, detail.deltaY),
snapBreakpoint: shouldComplete ? 0 : 1,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

snapBreakpoint is specific to sheet modals, and card modals have no breakpoint concept, so exposing a "breakpoint" here is a bit misleading. Let's call it isDismissing and return a plain boolean instead of 0/1.

Suggested change
snapBreakpoint: shouldComplete ? 0 : 1,
isDismissing: shouldComplete,

This also follows the convention we use for other booleans on public event details, such as isScrolling on ion-content's ScrollDetail and isAnimating on the menu interface.

One more change to go with it: please add the field to ModalDragEventDetail in modal-interface.ts so it's part of the public type:

/**
   * Whether the card modal will dismiss when the drag gesture ends.
   * `true` if the gesture passed the dismiss threshold, `false` if the
   * modal will remain open.
   */
  isDismissing?: boolean;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this variable changes the ionDragEnd detail length, so the existing assertion in modal-card.e2e.ts will fail. Please update the expected length there.

@vercel

vercel Bot commented Jul 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview Jul 31, 2026 11:10pm

Request Review

@thetaPC thetaPC changed the title feat(modal): expose snapBreakpoint on swipe-to-close modals feat(modal): expose dismiss intent on card modal ionDragEnd Jul 30, 2026

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work! I did catch an issue that I believe is blocking and some others that aren't necessarily but might be nice to fix now

Comment thread core/src/components/modal/gestures/swipe-to-close.ts Outdated
Comment thread core/src/components/modal/test/card/modal-card.e2e.ts
Comment thread core/src/components/modal/modal-interface.ts
Comment thread core/src/components/modal/modal-interface.ts
@thetaPC thetaPC changed the title feat(modal): expose dismiss intent on card modal ionDragEnd feat(modal): expose isDismissing on ionDragEnd Jul 31, 2026

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Great work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: swipe-to-close should support e.detail.snapBreakpoint

3 participants