question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat: Dynamic breakpoints for Sheet Modals

See original GitHub issue

Prerequisites

Describe the Feature Request

Sheet modals can have dynamic content within their container. When the content changes, the height of the sheet modal can also change. Sheet modals should offer the ability to the developer, to update the breakpoint values dynamically, so that the sheet modal will both animate to the updated height smoothly as well as the clip point for the breakpoint will respond to the updated height.

Describe the Use Case

Twitter spaces highlights this example perfectly.

<video src="https://user-images.githubusercontent.com/13732623/160919276-7713f2af-d640-4fb1-9170-1ac34b6ce3d7.mp4"></video>

Initial Breakpoint Max Breakpoint

When the number of participants in a Twitter space increases, the height of the modal will also increase, changing the breakpoint value:

Updated Breakpoint Max Breakpoint

Describe Preferred Solution

Dynamic breakpoints should happen automatically, with limited customization from the implementer. For example:

<ion-modal [breakpoints]="breakpoints"></ion-modal>
breakpoints = [0, 0.25];

onClick() {
  this.breakpoints = [0, 0.5];
}

Developers should be able to update the value of breakpoints at any point once the sheet modal is presented and the sheet modal should respond and update accordingly.

Describe Alternatives

Other options have been explored here: https://github.com/sean-perkins/modal-sheet-hans

  1. Presenting a new sheet modal when the state changes. Functional, but the transition between dismissing the previous sheet modal and presenting the new sheet modal is noticeable and not ideal.
  2. Dynamically changing the height of the modal. Displays similarly, but does not transition between height changes. Also the gesture behavior responds incorrectly.

Related Code

Supporting this internally will require changes similar to: https://github.com/ionic-team/ionic-framework/commit/f08456700246e7b14ef9eb2354bfdd9499a76d74

We will need to safeguard against instances where:

  • The current breakpoint is no longer in the list of available breakpoints
  • The sheet gesture needs to be re-created as a result of the breakpoints being modified

Additional Information

Duplicate feature request as: #24752, with updated use case.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:10
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
EinfachHanscommented, Apr 7, 2022

@Juanjo3299 6.1 should be released after their current sprint around April 13th

1reaction
sean-perkinscommented, Apr 1, 2022

@Juanjo3299 That feature will be available in 6.1.0. When a breakpoint is modified, either from programmatically changing it or dragging the sheet, ionBreakpointDidChange will emit with the new breakpoint value.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ionic 6.1: Dynamically changing the breakpoint of a Sheet Modal
Ionic Framework 6.1 introduces the ability to dynamically change the current breakpoint of a sheet modal. This features enables developers ...
Read more >
5 Examples of the new Ionic 6 Bottom Sheet Modal - #15 by ...
How can I programmatically “navigate” to a specific breakpoint? Is there any method or does present() supports a { breakpoint: number } param?...
Read more >
Grid template areas - CSS: Cascading Style Sheets | MDN
This method involves placing our items using named template areas, and we will find out exactly how this method works. You will see...
Read more >
Dynamic Breakpoints | Blocs Store
Dynamic Breakpoints is sneaky powerful. It doesn't just define the media queries, it both adds and removes your custom defined classes from any ......
Read more >
G. Schirmer Transcendent Journey Concert Band Level 5 ...
Written in a grand film score style, this magnificent work opens with a dynamic fanfare featuring soaring brass and woodwind flourishes.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found