feat: sheet modal programmatically move to a breakpoint

[EinfachHans]

Prequisites

• 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

I have some feature requests for the new v6 Sheet Modal that all kinda belongs to each other:

Auto calculated height

It would be great to make the modal have the height of the content, not more, not less. The library we are currently using (https://github.com/roman-rr/cupertino-pane) has such an option.

Disable Drag Gesture

It would be great do be able to dynamically enable/disable the Drag Gesture

Manual move to Breakpoint

It would be great to be able to have a method on the modal like moveToBreakpoint(), where i can dynamically move to a breakpoint.

Describe the Use Case

These three requests should work all together, image the following use case:

I want to show a Sheet Modal that has only a checkbox and a button below.
This should have the height of the content (Request No 1).
Dragging on this Sheet should be disabled (Request No 2).
If the users selects (or unselects) the checkbox some more content will be shown. After that i want to dynamically move the Breakpoint (Request No 3).
Also this moveToBreakpoint() method should of course accept numbers for the breakpoint, but also accepts something like 'auto' to adjust the height on the current content (which changes with the checkbox)

I hope i described it understandable 😃

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Can you provide a code example of how this currently works using the Cupertino pane?

[EinfachHans]

See here: There is the option fitHeight

[liamdebeasi]

Sorry, my last comment was confusing. What I was asking for is a code example of how this is working with regards to your use case. I am interested in seeing how you are applying the features from Cupertino Pane to address the use case that you have.

[EinfachHans]

I create the pane with

this.drawer = new CupertinoPane('#drawerPane', {
  showDraggable: false,
  fitHeight: true
});

It offers a function calcFitHeight() which i can use after the content changes (the checkbox in my example).
Also i can disable the dragging: disableDrag() and switch between breakpoints is possible via moveToBreak()

[liamdebeasi]

I can see the value in programmatically moving the sheet to a certain breakpoint, but what is the use case here for disabling dragging on the sheet modal? The sheet is designed to be dragged/swiped, and disabling that breaks the primary usage of the sheet.

Also what is the use case for calcFitHeight? By default the sheet modal will take up the full height of the screen. It sounds like this behavior already exists in Ionic.

[EinfachHans]

As described i want to have the Sheet have a height to fit the content. After the content changes calcFitHeight() would recalculate this.

Disabling the Drag would be for this use case as well as the sheet should only have one breakpoint (the auto height one) so dragging it down or up shouldn't be possible

[liamdebeasi]

Can you provide an example of the sheet height changing? I have not seen this used in native apps. (Screenshots of an app would be really helpful!)

Disabling the Drag would be for this use case as well as the sheet should only have one breakpoint (the auto height one) so dragging it down or up shouldn't be possible

Maybe I am misunderstanding the use case, but this sounds like a regular modal with a custom height/styles?

[DavidStrausz]

I agree, disabling dragging (and also dismissing by dragging it down) the sheet modal would be a welcome addition.
In our projectes we often have use-cases where we display the user some (short) info along with a checkbox or only an action button - in this case I would like to use a sheet modal with one breakpoint which can't be dragged or dismissed execpt if the user presses the button (or checks the checkbox and then presses the button) - think agreeing to T&Cs or GDPR etc.

[EinfachHans]

I don't know if i have seen this in a native app, but i bet it's possible somehow 😃🤔

Yeah i use case is like @DavidStrausz described. Of course a normal Modal would work here too, but it should be a Sheet Modal (including handle etc)

[liamdebeasi]

We have plans to implement a canDismiss feature for ion-modal which should cover the use cases described here (I.e. not allowing dismiss until a user checkbox a box on the modal). This is being tracked on #22297.

In terms of resizing the modal to fit the height, I am not sure that API is a good fit for Ionic since we already expose a --height CSS Variable that you can use to adjust the height of the modal dynamically.

Being able to programmatically move to a certain breakpoint seems useful, so I can mark that as a feature request. Any updates regarding that feature will be posted on this thread. Thanks!

[not-a-designer]

I am trying to implement a sheet modal as a footer toolbar with an edge fab-button that works as a toggle between min/init breakpoint and .5. The initial height would height of the toolbar + half the height of the fab and the modal cssClass adjusted accordingly. In some cases it seems more intuitive to see the top edge of a sheet to know its even there.

so on ngOnInit() i present the modal already (backdrop breakpoint greater than initial) and then i want to click on the fab-button to expand the modal to halfway. a moveToBreakpoint() would be really useful in this use case, controlling the modal breakpoints from the modal itself

[jeremyw189]

Any news on programmatically moving to breakpoints? Hopefully that would include the ability to get the current breakpoint as well.

[philkonick]

Bumping for news on programmatically moving to breakpoints?

I have a few more related features I'd like to see too:

• Enabling dragging only on the handle to allow for scrollable content in the modal.
• Allowing px defined breakpoints (auto-height based on contents would also work for our use case)

The library we are currently using (https://github.com/arielfaur/ionic-pullup) has these features but it requires a lot of work-arounds and code duplication, we would love to be able to migrate to a simple, bundled component.

[EinfachHans]

I created a PR which activates the possibility to do this: #24648

[hatsantos]

I'm facing a use case where I need to change programmatically the modal breakpoint. This feature would be very useful.

[jeremyw189]

Bumping for news on programmatically moving to breakpoints?

I have a few more related features I'd like to see too:

• Enabling dragging only on the handle to allow for scrollable content in the modal.
• Allowing px defined breakpoints (auto-height based on contents would also work for our use case)

The library we are currently using (https://github.com/arielfaur/ionic-pullup) has these features but it requires a lot of work-arounds and code duplication, we would love to be able to migrate to a simple, bundled component.

I would love to see those features as well. Until then, I'm using this method to get breakpoints at 120px, 290px, and 100%. It's not great but it get's the job done for now.

breakpoints = [120 / this.platform.height(), 290 / this.platform.height(), 1];
initialBreakpoint = 290 / this.platform.height()

[MartinR2295]

Beside the feature to move to a breakpoint programmatically, it would be also great, if there is some method, to listen to breakpoint changes.

Example: I want to show an element e, if I reach the breakpoint b.
onBreakpoint(breakpoint) {
if (breakpoint.value === 0.5) {
showElementE();
}
}

[EinfachHans]

@MartinR2295 my PR adds also two methods: ionModalBreakpointWillChange/breakpointWillChange and ionModalBreakpointDidChange/breakpointDidChange

[liamdebeasi]

Thanks for the issue. This has been resolved via #24648, and this feature will be available in an upcoming release of Ionic Framework.

[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.