Release version 6.3 #2421
Merged
Release version 6.3 #2421
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This change allows us to remove all the custom animation logic that was copied from Ionics code base, and enhanced with some logic for reducing the opacity of underlying modals. This was no longer working with Ionic 6, and had to be refactored or removed. The cost of this change is that modal backdrop opacity now stacks, so the background gets darker and darker with nested modals.
Text is already centered due to the empty state component which wraps all alert content.
We are scaling and moving the modal in unexpected ways to position the action sheet. Previously we were able to hide the modal shadow element that has the wrong size and position via CSS but it is now encapsulated and not exposed via a part in Ionic 6. Therefore it is removed instead.
This way all the modal elements that use the custom properties (modal shadow, modal content etc) get the proper sizes and so on.
The modal-wrapper component and its ion-modal parent is now separated by a shadow-dom, which means that nativeElement.closest no longer works, and an alternative approach for adding the full-height css class is needed. The solution has also been slightly refactored so the class is added to the ion-modal element instead, now the using custom css properties of that component.
These are now set via ion-modal --border-radius elsewhere and should properly cascade throughout the modal as a result of that.
Leave it to ionic to make the modal go all the way to the edge on small devices, effectively hiding the box shadow
As we are no longer testing the specific ionic implementation we can remove the different size scenarios as none of tests are based on the screen dimensions anymore.
We now use the default backdrop behavior from Ionic and should therefore not need to test this.
Instead of duplicating tests for both phone and tablet/desktop we now only test the special cases whenever it should be different on phone. Unfortunately I also accidentally bundled in a general cleanup with this commit. Sorry future someone, I owe you!
This way we avoid custom functionality to traverse the DOM from the modal wrapper that is now placed inside a slot.
The animations are directly based on the default enter/leave from Ionic. These are copied over to be able to adjust the backdrop opacity so it does not stack with multiple modals (see following commit).
It has now been refactored to work with the new Ionic 6 animations implemented in the previous commit.
Adding a short timeout when waiting for ResizeObserver in modal helper test seems to fix failing tests
…econd Upgrade to Ionic 6
dd464b8 to
e36a902
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changelog
Features
Upgrade to Ionic 6