feat: ion-modal sheet, breakpoints with fixed pixels

[kumibrr]

Prerequisites

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

Describe the Feature Request

Implement adding pixel values to the breakpoints array

Describe the Use Case

Components on top of the modal that should never get overflowed would not get hidden on smaller or zoomed viewports

Describe Preferred Solution

[breakpoints]="[300, 0.70, 700 , 1]" would set four breakpoints and sort them by height. Example given a screen with height of 1400px it would be [300, 700, 0.7 = 980px, 1 = 1400px]

Describe Alternatives

No response

Related Code

https://github.com/kumibrr/sheet-modal-example

Additional Information

Here's two screenshots that showcase the current behavior

[sean-perkins]

Hello @kumibrr the breakpoints are based on the relative height of the modal, not the screen.

The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the initialBreakpoint property. For example: [0, .25, .5, 1]

The team landed on the decimal values between 0 to 1 to offer consistency across devices and a predictable pattern for developers.