Upgrade to Ionic 6 #2380
Merged
Upgrade to Ionic 6 #2380
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
d7afd0c to
92a7d0d
Compare
jkaltoft
reviewed
Jun 28, 2022
libs/designsystem/src/lib/components/modal/services/action-sheet.helper.ts
Show resolved
Hide resolved
8cfaad4 to
9ddefe6
Compare
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.
It has now been refactored to work with the new Ionic 6 animations implemented in the previous commit.
42942e8 to
760920a
Compare
jkaltoft
previously approved these changes
Aug 5, 2022
libs/designsystem/src/lib/components/modal/services/action-sheet.helper.ts
Show resolved
Hide resolved
libs/designsystem/src/lib/components/modal/services/modal-animation-builder.service.ts
Show resolved
Hide resolved
jkaltoft
previously approved these changes
Aug 10, 2022
Adding a short timeout when waiting for ResizeObserver in modal helper test seems to fix failing tests
jkaltoft
approved these changes
Aug 10, 2022
7 tasks
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.
Which issue does this PR close?
Fixes #1932, fixes #1009, fixes #2260
What is the new behavior?
Upgraded to the newest Ionic version at the time of speaking, and made the necessary changes as per the upgrade guide.
This is mostly style refactorings to the modal to account for the new shadow root.
Furthermore, there are some changes to the Modal Animation Builder, as the modal was no longer animating correctly.
The animation builder is essentially just holding a copy of the enter/leave animations from Ionic, with some adjustments to account for removing the opacity on stacked backdrops.
Does this PR introduce a breaking change?
Are there any additional context?
With the new update we are seeing a boatload of these warnings in the console whenever a modal is opened:
I tried switching to canDismiss, but this does not seem to work for our drawer, as it is not a card modal. We will have to leave it to a followup issue to remove the deprecated functionality, before it is completely removed from Ionic.
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Reminders
Review
When the pull request has been approved it will be merged to
developby Team Kirby.