feat: add ionBreakpointWillChange event

[EinfachHans]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

6.1 is awesome and it's nice that my pr land it in. But the original PR had additional to the ionBreakpointDidChange also a ionBreakpointWillChange event, that was removed. My request would be to add this again and expose it before the gesture of the sheet moving was finished.

Describe the Use Case

I show/hide some content within the modal based on the current breakpoint. Like this you can see a small delay when changing the breakpoint by drag.

Describe Preferred Solution

Readd ionBreakpointWillChange event

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you provide a more detailed example of what you are trying to do? A repo that shows the current limitations of the API would be helpful too.

[EinfachHans]

@liamdebeasi Of course, see a very very small reproduction here: https://github.com/EinfachHans/ionic-modal-breakpoints-example

In this case we have this two breakpoints. In the first (default) one you can place instant bids (left button). In the second state you can also enter a custom bid value. There are two ways of opening the second state:

1. Pressing the "Bid" (right) button in the default state. There i call the new method to move the sheet modal. Also i directly update the currentBreakpoint variable which i use to show/hide stuff in the modal. Because i set this instantly the transition looks more smooth, because the content changes while/before the sheet moves.
2.: Move the sheet by dragging into the second state. For this i subscribe to the ionBreakpointDidChange but because it is fired after the sheet gestures finishes, the content changes after it as well. This feels a bit buggy/delayed.

This would be solved by updating the variable and with it the content before/while the gesture is moving. That's why a ionBreakpointWillChange would help

[sean-perkins]

Hey @EinfachHans, I dug into your reproduction app and looked at a few other app concepts with modal sheets & dynamic contents; I think your other feature request: #23955 may actually be a better solution than this event.

The reason for that, is if we introduced ionBreakpointWillChange, you would only be able to have simple interactions of swapping out content when releasing near a new breakpoint. If we emitted the drag event position (and probably the closest breakpoint or similar), you would be able to do more progressive transitions of your content, as you got closer to the final "snap point" to full swap the experience.

My thoughts are we introduce a new option on ion-modal called dragEvents, that allows developers to subscribe to the drag events from both the sheet modal and card modal. For sheet modals, we could include additional metadata for the breakpoint position.

Based on this analysis, is there any thoughts you have on why the drag events could not solve your use case?

[EinfachHans]

Hey @sean-perkins , thanks - i really appreciate all the thoughts you put in this and you are right. If the event would everytime include the breakpoint, that the modal would snap to if you would release it at this moment, that would work as well 🤔

[sean-perkins]

Awesome, I am going to combine the issues and link out to my comment on that feature request. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.