Vuetify: [Feature Request] Refactor bottom sheet and add some behaviors

[peluprvi]

Problem to solve

Bottom sheet has some misconceptions.
It specs has some of navigation drawer's and some of dialog's behaviors.

Currently, bottom sheet has a persistent prop that not follow the material specs. Also, it needs some more of the core bahaviors

A persistent bottom sheet should:

Persistent bottom sheets integrate with the app to display supporting content.
[...] resting at the same elevation as an app and integrating with its content.

Elevation:

• Modal bottom sheets: Higher than the app
• Persistent bottom sheets: Same elevation as the app

A modal bottom sheet should:

Modal bottom sheets are primarily a mobile component, where they span full screen width in both portrait and landscape views.

For modal bottom sheets, don’t initially overlap the app bar. Allow the user to tap/swipe to dismiss.

Proposed solution

• [ ] Bottom sheet should be persistent = false by default (this is called a modal bottom sheet);
• [ ] Bottom sheet should use another prop to not be closed when clicking outside (dismi?);
• [ ] The persistent prop should place the bottom sheet at the same elevation of the app content. It pushes/resizes the app content. This behavior can be seen in the Google Maps Android app, where the map is centralized and, in some areas (like when you pin some place), you can move the map without close the bottom sheet;
• [ ] Add a fullscreen prop to bottom sheets;
• [ ] Add a scrollbar when the bottom sheet content is higher then its height (https://codepen.io/anon/pen/MVrzeE).

[J-Rojas]

Not sure if this should be proposed in a separate issue report, but it would be helpful to allow 'sheets' to also appear from the top, not the just the bottom of a container. I have a need to slide in a dialog from under a navigation bar.

[zzhenryquezz]

Same here, it would be nice to have a sheet from top to bottom.

[ghansham]

Can we add this kind of behavior:

https://framework7.io/docs-demos/vue/sheet-modal.html?theme=aurora

Very much similar to google map bottom sheet which can be swiped up and down.

[johnleider]

Can we add this kind of behavior:

framework7.io/docs-demos/vue/sheet-modal.html?theme=aurora

Very much similar to google map bottom sheet which can be swiped up and down.

In version 3 we are adding new directives to support modifying elements with touch such as carousel, navigation-drawer, etc. This will naturally be covered under that.

In regards to the original reason for this issue, this was reported right after the new spec released, which bottom-navigation currently meets.

[ghansham]

When is version 3 release expected? And will vue 2.x support it?

On Thu, 19 Nov, 2020, 11:32 pm John Leider, [e-mail]
wrote:

Can we add this kind of behavior:

framework7.io/docs-demos/vue/sheet-modal.html?theme=aurora

Very much similar to google map bottom sheet which can be swiped up and
down.

In version 3 we are adding new directives to support modifying elements
with touch such as carousel, navigation-drawer, etc. This will naturally be
covered under that.

In regards to the original reason for this issue, this was reported right
after the new spec released, which bottom-navigation currently meets.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/3692#issuecomment-730543453,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAYXFJGHB652AXJQ2YZ6TCLSQVMU3ANCNFSM4EX2JVPA
.