feat(toast): allow custom positioning relative to specific element

[averyjohnston]

Issue number: resolves #17499

---

What is the current behavior?

Currently, there isn't a way to position toasts such that they don't overlap navigation elements such as headers, footers, and FABs.

What is the new behavior?

Added the new positionAnchor property, which specifies an element that the toast's position should be anchored to.

While the name can be tweaked, we should take care to keep the relation between it and the position property clear. The position acts as a sort of "origin" point, and the toast is moved from there to sit near the chosen anchor element. This is important because it helps clarify why the toast sits above the anchor for position="bottom" and vice versa.

I chose not to rename the position prop itself to avoid breaking changes.

Docs PR: ionic-team/ionic-docs#3158

Does this introduce a breaking change?

• Yes
• No

Other information

[liamdebeasi]

Optional: We could move this to a utility function so both iOS/MD animations can use it. However, since it's only used twice this is optional.

[averyjohnston]

I decided against this because the two are subtly different -- they have different starting offsets and, more importantly, the bottom positions are generally calculated using addition for md but subtraction for ios. This is because md uses style.bottom, meaning the position is calculated from the bottom edge of the screen, but ios uses translateY which calculates from the top edge instead.

I could certainly have the util function check the mode and act accordingly, but the context behind the difference would sit outside the util, making it harder to follow the code. There's probably some refactoring that could be done here to align the two modes, but that feels outside the scope of this PR.

[averyjohnston]

Although, if I need to avoid implicit keyframes in the leave animation, in theory it might make more sense to do this calculation out in toast.tsx so I can pass it to both the enter and leave animations 🤔 Hmm. I'll play around with it some.

[averyjohnston]

I've gone with the above idea. Let me know if you think it'd be worth it to make a tech debt ticket to sync up how the toast's position is calculated between modes, so the new getAnimationPosition util can be cleaned up a little. I'm not sure if it's worth the effort since the position-related CSS would need touching too 😅

[liamdebeasi]

I like your approach here. The additional benefit is if devs want to create a custom toast animation they can still take advantage of the anchor/position information since we pass that in.

[liamdebeasi]

I like your approach here. The additional benefit is if devs want to create a custom toast animation they can still take advantage of the anchor/position information since we pass that in.

[liamdebeasi]

I reverted a flaky screenshot diff in 5ded707, so make sure you pull latest

[liamdebeasi]

Great work! I'm fine with the naming convention.

[sean-perkins]

This feature works great on device 🎉 this is such a great improvement for the user experience!