feat(toast): add 'swipeGesture' property to dismiss toasts via swipe(… #23124

evgeniy-skakun · 2021-03-31T16:12:03Z

…TakumaKira) - expanded

Pull request checklist

Please check if your PR fulfills the following requirements:

Tests for the changes have been added (for bug fixes / features)
Docs have been reviewed and added / updated if needed (for bug fixes / features)
Build (npm run build) was run locally and any changes were pushed
Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

#21769

Does this introduce a breaking change?

Yes
No

Other information

…TakumaKira) - expanded

liamdebeasi · 2021-03-31T16:15:16Z

Thanks for the PR. What is the difference between this PR and the previous toast swipe gesture PR? (#22133).

evgeniy-skakun · 2021-03-31T16:16:00Z

@liamdebeasi Please check the extended version of the PR [ @TakumaKira ] #22133

evgeniy-skakun · 2021-03-31T16:17:02Z

@liamdebeasi Added "vertical" and "horizontal" swipe

liamdebeasi · 2021-03-31T16:20:32Z

What is the difference between a horizontal swipe and a swipe from the left or right?

evgeniy-skakun · 2021-03-31T16:23:16Z

@liamdebeasi You can swipe in both directions instead of just one.

liamdebeasi · 2021-03-31T16:30:25Z

Do you have any use cases for this? I wonder if it makes sense to just have the options be 'horizontal' | 'vertical' and determine the direction based upon where the toast was presented from.

For example, if the toast was presented from the bottom and I had swipeGesture="vertical" set, I can't imagine there is a use case where I would want to swipe up to dismiss. I would expect that I would just swipe down to dismiss since it is closest to the bottom edge of the screen.

Similarly, is there any benefit to only letting someone swipe to the left to dismiss versus being able to swipe to the left or the right?

evgeniy-skakun · 2021-03-31T16:41:46Z

vertical swipe will be useful if the toast is placed in the center of the screen.

horizontal swipe can be useful if the application is used by left-handers and right-handers.

@liamdebeasi In any case, if you do not see any use in them, then they can be removed.

liamdebeasi · 2021-03-31T16:48:45Z

Thanks for the clarification, that makes sense. I think in that case we can infer the direction based upon the position prop value.

If position="bottom" then swiping down would dismiss the toast.
If position="top" then swiping up would dismiss the toast.
If position="middle then swiping up or down would dismiss the toast.

Do you have any examples of the horizontal swipe in existing applications? I like the vertical swipe, but my concern with the horizontal swipe is that it is does not seem to exist in the Material Design spec.

evgeniy-skakun · 2021-03-31T16:55:35Z

20210331_195252.mp4

Samsung allows you to swipe in both directions

liamdebeasi · 2021-03-31T16:59:01Z

Those looks like Android-specific notification center components, not a toast/snackbar. Do you have any examples of this horizontal gesture with a toast/snackbar?

For example, the Snackbar Flutter demo on https://material.io/components/snackbars only lets you do a vertical swipe.

evgeniy-skakun · 2021-03-31T17:03:39Z

@liamdebeasi I don't have an example app.

I can remove the horizontal swipe if you think it doesn't make sense.

liamdebeasi · 2021-03-31T17:06:52Z

No problem, was just curious you knew of an example. I do see the benefit of this feature, so I think this is something we should add.

This is a new API, so it would need to go into a minor release. We are focusing on patch releases and the new major version of Ionic Framework at the moment, but I can add this to our project board and we will do a full review as we get closer to planning a new minor release.

lodenrogue · 2021-05-06T23:10:08Z

core/src/components/toast/toast.tsx

+  }
+
+  private clamp = (val: number) => {
+    if (val > 1) {


Can this be simplified?

return val > 1 ? 1 : Math.max(0, val);

reslear · 2021-09-13T15:43:53Z

any news?

katche70 · 2022-04-13T15:06:45Z

Hi Ionic Team,
It would be great if this feature comes in the official Ionic release

thekhegay · 2022-05-12T13:23:28Z

Any updates?

bstrasburg · 2022-06-02T13:50:21Z

Any updates ????

philmmoore · 2022-06-28T16:24:56Z

I'd find this useful in my apps too :)

EinfachHans · 2022-07-06T10:14:26Z

can't wait to se this in the framework

katche70 · 2022-12-07T09:03:42Z

Hey whats going on here with this open PR ? Nobody form ionic Team here to add this in official ionic release. Would by nice to have this feature, because it would be feel more native for ios user. Push Messages from ios simply can swipe up

liamdebeasi · 2022-12-07T14:15:52Z

Hi everyone,

The team met a few weeks ago to discuss this PR, and we are interested in adding this feature. The next step is for the team to do a feature design document. This is where we determine the scope, requirements, and architecture of the feature to help ship a reliable API. Once that has been approved, someone from the team will review the PR and help make any changes necessary to get this PR ready to merge.

Our primary focus right now is getting Ionic 7.0 into beta, which is why you have not seen much movement on this PR over the past few weeks. While I do not have a timeline for when this will merge, we recognize that this is an important feature for Ionic developers. Let me know if there are any questions. Thanks!

benmarsh · 2022-12-09T12:57:26Z

This is great news - thanks for the update @liamdebeasi :)

rsammelson · 2023-07-03T04:32:42Z

Is there any update on this being completed? Would a new PR with conflicts resolved be useful to that process?

sarevok89 · 2023-07-24T06:50:04Z

Is there any update on this? The PR has been opened more than 2 years above 😞

danieljancar · 2023-07-28T07:04:11Z

Any updates on the feature, since Ionic 7 is out?

Issue number: resolves #21769 ---------   ## What is the current behavior?  Toast does not support swipe gestures to dismiss. ## What is the new behavior?  - Added a `swipeGesture` property that allows users to swipe toasts closed. Note: This is a combination of previous PRs #28380 and #28402 ⚠️ There is a visual glitch on iOS where dragging and having the toast animate back to its opened position causes a flicker. This is an iOS 17 regression and is being tracked in #28467. This bug has been reported to and confirmed by Apple. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information  ⚠️ Give co-author credit to author in #23124 --------- Co-authored-by: evgeniy-skakun <evgeniy-skakun@users.noreply.github.com>

liamdebeasi · 2023-11-13T17:16:26Z

Hey there! Thanks for contributing this PR, and apologies for the delay in replying here. This feature was added to Ionic in #28442. The work you did here helped us build out the final implementation, so we've given you co-author credit in the commit that was merged.

This feature will be available in an upcoming minor release of Ionic. I am going to close this, and thanks again for contributing to Ionic!

feat(toast): add 'swipeGesture' property to dismiss toasts via swipe(…

28c268c

…TakumaKira) - expanded

github-actions bot added the package: core @ionic/core package label Mar 31, 2021

liamdebeasi mentioned this pull request Mar 31, 2021

feat(toast): add 'swipeGesture' property to dismiss toasts via swipe #22133

Closed

13 tasks

jschillingApollo mentioned this pull request Apr 27, 2021

feat: Swipe to dismiss Toasts #21769

Closed

lodenrogue suggested changes May 6, 2021

View reviewed changes

EinfachHans mentioned this pull request Jul 20, 2022

bug: toast, cannot render only button and have container fit width #25657

Open

3 tasks

liamdebeasi mentioned this pull request Nov 7, 2023

feat(toast): add swipeGesture #28442

Merged

2 tasks

liamdebeasi closed this Nov 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(toast): add 'swipeGesture' property to dismiss toasts via swipe(… #23124

feat(toast): add 'swipeGesture' property to dismiss toasts via swipe(… #23124

evgeniy-skakun commented Mar 31, 2021 •

edited

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

lodenrogue May 6, 2021

reslear commented Sep 13, 2021

katche70 commented Apr 13, 2022

thekhegay commented May 12, 2022

bstrasburg commented Jun 2, 2022

philmmoore commented Jun 28, 2022

EinfachHans commented Jul 6, 2022 •

edited

katche70 commented Dec 7, 2022

liamdebeasi commented Dec 7, 2022

benmarsh commented Dec 9, 2022

rsammelson commented Jul 3, 2023

sarevok89 commented Jul 24, 2023

danieljancar commented Jul 28, 2023

liamdebeasi commented Nov 13, 2023

feat(toast): add 'swipeGesture' property to dismiss toasts via swipe(… #23124

feat(toast): add 'swipeGesture' property to dismiss toasts via swipe(… #23124

Conversation

evgeniy-skakun commented Mar 31, 2021 • edited

Pull request checklist

Pull request type

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

evgeniy-skakun commented Mar 31, 2021

liamdebeasi commented Mar 31, 2021

lodenrogue May 6, 2021

Choose a reason for hiding this comment

reslear commented Sep 13, 2021

katche70 commented Apr 13, 2022

thekhegay commented May 12, 2022

bstrasburg commented Jun 2, 2022

philmmoore commented Jun 28, 2022

EinfachHans commented Jul 6, 2022 • edited

katche70 commented Dec 7, 2022

liamdebeasi commented Dec 7, 2022

benmarsh commented Dec 9, 2022

rsammelson commented Jul 3, 2023

sarevok89 commented Jul 24, 2023

danieljancar commented Jul 28, 2023

liamdebeasi commented Nov 13, 2023

evgeniy-skakun commented Mar 31, 2021 •

edited

EinfachHans commented Jul 6, 2022 •

edited