PHANTOM
🇮🇳 IN
Skip to content

feat(modal): add drag events for sheet and card modals#30962

Open
thetaPC wants to merge 10 commits intofeature-8.8from
FW-7051
Open

feat(modal): add drag events for sheet and card modals#30962
thetaPC wants to merge 10 commits intofeature-8.8from
FW-7051

Conversation

@thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Feb 20, 2026

Issue number: resolves internal


What is the current behavior?

The sheet and card modal can be dragged to view content. However, there are no events that determine when drag has started or ended.

What is the new behavior?

  • Added drag events for sheet and card modal: ionDragStart, ionDragMove, ionDragEnd
  • Added a drag interface
  • Added tests

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build: 8.7.17-dev.11772118942.181221d4

@vercel
Copy link

vercel bot commented Feb 20, 2026

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Feb 26, 2026 4:40pm

Request Review

@github-actions github-actions bot added the package: core @ionic/core package label Feb 20, 2026
Comment on lines -696 to -720
/**
* While the gesture animation is finishing
* it is possible for a user to tap the backdrop.
* This would result in the dismiss animation
* being played again. Typically this is avoided
* by setting `presented = false` on the overlay
* component; however, we cannot do that here as
* that would prevent the element from being
* removed from the DOM.
*/
this.gestureAnimationDismissing = true;

/**
* Reset the status bar style as the dismiss animation
* starts otherwise the status bar will be the wrong
* color for the duration of the dismiss animation.
* The dismiss method does this as well, but
* in this case it's only called once the animation
* has finished.
*/
setCardStatusBarDefault(this.statusBarStyle);
this.animation!.onFinish(async () => {
await this.dismiss(undefined, GESTURE);
this.gestureAnimationDismissing = false;
});
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was moved to a new function called cardOnDismiss()

@thetaPC thetaPC changed the title feat(modal): add drag events feat(modal): add drag events for sheet and card modals Feb 20, 2026
@github-actions github-actions bot added package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Feb 25, 2026
Copy link
Contributor Author

@thetaPC thetaPC Feb 26, 2026

Choose a reason for hiding this comment

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

Screenshots updated because a new button and a new header was added behind the modal.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

When adding new events to an overlay, we need to also add them to this file else devs won't be able to use them within a tag like @ionDragStart.

@thetaPC thetaPC marked this pull request as ready for review February 26, 2026 16:56
@thetaPC thetaPC requested a review from a team as a code owner February 26, 2026 16:56
@thetaPC thetaPC requested review from BenOsodrac and brandyscarney and removed request for BenOsodrac February 26, 2026 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: react @ionic/react package package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant