feat(drawer): created drawer slide-over pane component

[roman-rr]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the new behavior?

Create drawer component ion-drawer.
Modern slide-over pane drawer with touch technologies.
Right like in Apple Maps, Apple Stocks, Apple Music and other modern apps.

Does this introduce a breaking change?

• Yes
• No

Component demo

Don't be confused with ionModal

<ionModal> - Directed to quick access for a new page
<ionDrawer> - Directed to create interface for interactions with current page

[roman-rr]

Circle-CI Checks notes

@ionic/angular build fails: it is use @ionic/core from npm, but new component auto inserted to proxy-list and @ionic/core should be used related.

New issues regarding to ion-drawer

I will maintain all new issues from users regarding to ion-drawer

[EinfachHans]

Feature is nice, but i think it is possible to create this within 5.0.0 with the new ionModal and swipeToClose? 🤔

[roman-rr]

@HansKrywaa

Don't be confused with ionModal

<ionModal> - Directed to quick access for a new page

<ionDrawer> - Directed to create interface for interactions with current page

Both components have one similar gesture - swipe to close.
Other gestures might adversely affect ionModal direct functions and overload.
Create a new separated component reccomended.

To prove drawer existing demand 1 2 3

[liamdebeasi]

Thanks for the PR! We appreciate all the hard work you put into this. I took a quick look, and there are two main things I would like to bring up:

1. This adds 3rd party dependencies to Ionic Core. We try to avoid that as much as possible as it adds unnecessary bloat for every Ionic user.
2. We are already in the process of building a drawer component (https://github.com/ionic-team/ionic/tree/bottom-drawer). We were not able to get it in for Ionic 5 but hope to have it done in an upcoming feature release. It is likely that the final bottom drawer will be some combination of the code I linked to and the code you provided. If we do end up using parts of this PR, we will be sure to add you as a co-author.

I do not have an estimate of when our drawer component will be done, but I just wanted to let you know so you are not stuck wondering why we have not merged your PR yet 🙂. Thanks!

[roman-rr]

@liamdebeasi Ok, next time i will create issue before any PR.

Any cases when 3rd party allowed to use ? Or any rules for 3rd party packages ?

[liamdebeasi]

In all honesty we just stay away from 3rd party packages in general with Ionic Core 😅 (with the exception of Swiper). The two main issues are:

a) It adds bloat to the framework that affects every user.
b) If there is a bug in the 3rd party package, it is very difficult to get the bug fixed. We either have to wait for the developer to patch the issue, or patch it ourselves but still wait for the developer to merge the patch.

We are currently focused on getting patch releases out for Ionic 5, but when we start looking at new features we will be sure to take a look at this PR!

[roman-rr]

For anyone need this feature in applications https://github.com/roman-rr/cupertino-pane/

[EinfachHans]

@liamdebeasi Any news about the status of the IonDrawer Component? 😊

[roman-rr]

@HansKrywaa I think the best way here is to reach many stars/downloads for Cupertino Pane package.
When this library become stable as solid metal, ionic community will be ok to accept my pull request with 3d party library.

[blahblehblah]

@roman-rr Awesome work

[liamdebeasi]

Thanks for the PR! We appreciate your contribution to Ionic Framework. We are working on a bottom drawer/sheet feature as part of the next major release of Ionic Framework. As a result, we cannot accept this PR. We will definitely have an announcement out when this new release is ready for community testing.

All progress regarding the drawer will be tracked in #21039. Thanks!