Skip to content

feat(toast): add swipeGesture - #28442

Merged
liamdebeasi merged 7 commits into
feature-7.6from
FW-2004
Nov 13, 2023
Merged

feat(toast): add swipeGesture#28442
liamdebeasi merged 7 commits into
feature-7.6from
FW-2004

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Oct 31, 2023

Copy link
Copy Markdown
Contributor

Issue number: resolves #21769


What is the current behavior?

Toast does not support swipe gestures to dismiss.

What is the new behavior?

⚠️ 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
  • No

Other information

⚠️ Give co-author credit to author in #23124

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Toast does not support swipe gestures to dismiss.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds a `swipeGesture` property to enable this behavior
- Creates an HTML playground so I can later write E2E tests
- Adds stubbed implementations for creating and destroying the swipe
gesture on prop change, present, and dismiss
- Adds unit tests to verify that the gesture is being created/destroyed
on prop change, present, and dismiss

In
cf7e897
I moved the toast config tests to separate file. For some reason this
was causing issues with my new tests. This might be a Stencil bug given
that I got the following error:

```js
, getValue = (e, t) => getHostRef(e).$instanceValues$.get(t), setValue = (e, t, a, o) => {
                                     ^

TypeError: Cannot read properties of undefined (reading '$instanceValues$')
    at getValue (/Users/liamdebeasi/Ionic/ionic/core/node_modules/@stencil/core/internal/testing/index.js:508:38)
    at Toast.get [as position] (/Users/liamdebeasi/Ionic/ionic/core/node_modules/@stencil/core/internal/testing/index.js:538:13)
    at Toast.dismiss (/Users/liamdebeasi/Ionic/ionic/core/src/components/toast/toast.tsx:208:30)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:533:9)
    at processTimers (node:internal/timers:507:7)
```

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Note: This PR is missing some build artifacts. I will add those once
#28379 is merged and
synced into this branch.
@github-actions github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package labels Oct 31, 2023
@liamdebeasi liamdebeasi changed the title feat(toast): add stubbed swipeGesture (#28380) feat(toast): add swipeGesture (#28380) Nov 7, 2023
@liamdebeasi liamdebeasi changed the title feat(toast): add swipeGesture (#28380) feat(toast): add swipeGesture Nov 7, 2023
@liamdebeasi
liamdebeasi marked this pull request as ready for review November 7, 2023 17:06
@thetaPC

thetaPC commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Dev build: 7.5.4-dev.11699469920.1af6ea12

@thetaPC thetaPC left a comment

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.

LGTM

@liamdebeasi
liamdebeasi requested a review from a team November 9, 2023 16:29

@sean-perkins sean-perkins left a comment

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.

Looks good! Only 2 super minor JSDOC formatting suggestions.

Comment thread core/src/components/toast/animations/utils.ts Outdated
Comment thread core/src/components/toast/animations/utils.ts Outdated
liamdebeasi and others added 2 commits November 9, 2023 11:42
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
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: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants